如何避免使用ui-router"污染"解决方法

Question

我想尽可能地限制我的AngularJS应用程序中的"闪烁".我使用resolve:从路由器(与ngRouter和ui-router一起工作)加载数据,以便在更改路由之前显示我的页面所需的一切.

常见例子:

.state('recipes.category', {
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl as recipeList',
    resolve: {
         category: ['$http','$stateParams', function ($http, $stateParams) {
             return $http.get('/recipes/' + $stateParams.cat).then(function(data) { return data.data; });
         }]
     }
});

现在我的RecipesCategoryCtrl控制器可以加载类别,承诺将直接解决.

有没有办法将加载代码直接嵌入我的控制器中？或者其他地方更"干净"？我不喜欢在路线定义中有太多逻辑......

就像是:

.state('recipes.category', {
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl as recipeList',
    resolve: 'recipeList.resolve()' // something related to RecipesCategoryCtrl and "idiomatic" AngularJS
});

Answer 1

您可以在控制器中注入一个服务，该服务执行 $http.get 来清理您的代码。

.state('recipes.category', {
  url: '/:cat',
  templateUrl: '/partials/recipes.category.html',
  controller: 'RecipesCategoryCtrl as recipeList',
  resolve: {
       category: ['recipeService','$stateParams', function (recipeService, $stateParams) {
           return recipeService.get($stateParams.cat)
       }]
  }
});