AngularJS控制器初始化的狀態$ routeProvider

我有一個旨在支持特定型號的所有CRUD操作的控制器：顯示的記錄列表，記錄的展示細節，編輯，創建，更新和刪除。

不同視圖使用相同的控制器渲染 - 但每個視圖，需要不同的初始化：爲列表，我應該加載的記錄頁，對於詳細信息視圖 - 我會通過ID加載。

獲取控制器初始化狀態的最佳做法是什麼？

下面是我使用的是幾條路線的例子：

function config($routeProvider, $locationProvider) { 
    $routeProvider 

     // ... 

     .when('/activity/list', { 
      controller: 'ActivityController', 
      templateUrl: 'views/activityList.html', 
      controllerAs: 'vm' 
     }) 

     .when('/activity/create', { 
      controller: 'ActivityController', 
      templateUrl: 'views/createNewActivity.html', 
      controllerAs: 'vm' 
     }) 

     .when('/activity/:id', { 
      controller: 'ActivityController', 
      templateUrl: 'views/activity.html', 
      controllerAs: 'vm' 
     }) 

     .otherwise({ redirectTo: '/login' }); 
}

補丁 - 我檢查路徑明確區分開來。根據我的猜測，這不可能是最佳做法。

if ($location.$$path == '/activity/list') { 
    initList(); 
}

來源

2015-09-20 orberkov

可以在路由配置對象中設置其他屬性，並通過'$ route.current'檢查它們或使用'resolve'在控制器中注入變量 – charlietfl

其他屬性？ $ routeProvider.when的文檔似乎沒有該屬性。我錯過了什麼？ https://docs.angularjs.org/api/ngRoute/provider/$routeProvider – orberkov

嗯...我知道你曾經可以把屬性放在那些對象上......看起來你已經不能了，但仍然可以使用'resolve'。我沒有長時間使用'ngroute'，因爲缺乏對這個簡單問題的活動，而且你的（charliefl）答案 - 你是否建議AngularJS導航的行業標準是ui-route，並且使用ui-router？ – charlietfl

在我看來您的情況最好的辦法是不理控制器，並與RESTAPI去，這裏是一個例子，我將如何做到這一點：

路線文件：

.when('/tours', { 
    templateUrl: 'scripts/partials/pages/tours.partial.html', 
    controller: 'TourController', 
    controllerAs: 'vm', 
    resolve: { 
     toursService: function (genericData) { 
      return genericData.getTours; 
     } 
    } 
}) 
.when('/tour/:id', { 
    templateUrl: 'scripts/partials/pages/tour-single.html', 
    controller: 'TourSingleController', 
    controllerAs: 'vm', 
    resolve: { 
     toursSingleService: function ($route, genericData) { 
      // This will get us the current item with specific ID 
      var id = $route.current.params.id; 
      return genericData.getTourSingle(id); 
     }, 
    } 
})

這裏是我的genericservice.js文件：

function genericData($resource) { 

    // ngResource call to our static data 
    var TourSingle = $resource('/api/tour/:id', {'id': '@id'}); 

    function getListData(RestData) { 
     return RestData.query().$promise.then(function(results) { 
      return results; 
     }, function(error) { // Check for errors 
     }); 
    } 

    function getSpecificData(id) { 
     return TourSingle.get({'id':id}).$promise.then(function(results) { 
      return results; 
     }, function(error) { // Check for errors 
     }); 
    } 

    return { 
     getTours: getListData(TourSingle), 
     getTourSingle: getSpecificData, 
    } 
}

這是控制器例如：

function TourController(toursService) { 

    // vm is our capture variable 
    var vm = this; 

    vm.tours = toursService; 
}

來源

2015-09-20 20:10:33 Shota

AngularJS控制器初始化的狀態$ routeProvider

回答

相關問題