Angular Run Block - 使用UI-Router $ stateProvider来解决Promise

Question

UI-Router比不同Angular的ngRoute.它支持正常ngRoute可以执行的所有操作以及许多额外功能.

我正在将我的Angular应用程序更改ngRoute为UI-Router.但我不能完全弄清楚如何注入resolve编程功能-在一块,我使用之外的代码Controller和config.

所以,用标准Angular的ngRoute,我可以动态地注入我resolve promise在Angular运行程序段:

app.run(function ($route) {
  var route = $route.routes['/'];
  route.resolve = route.resolve || {};
  route.resolve.getData = function(myService){return myService.getSomeData();};
});

现在我如何使用类似的方式注入解决承诺UI-Router？我尝试过去$stateProvider访问states,但这对我来说是失败的.

angular.module('uiRouterSample').run(
  [          '$rootScope', '$state', '$stateProvider'
    function ($rootScope,   $state, $stateProvider) {

      //$stateProvider would fail

Answer 1

您可以resolve在加载下一个状态之前使用它为控制器提供数据.要访问已解析的对象,您需要将它们作为依赖项注入控制器.

我们以购物清单应用程序为例.我们首先定义我们的应用程序模块,并包括ui.router作为依赖:

angular.module('myApp', ['ui.router']);

我们现在想要定义将特定于我们的应用程序的购物清单页面的模块.我们将定义一个shoppingList模块,包括该模块的状态,该状态的解析和控制器.

购物清单模块

angular.module('myApp.shoppingList').config(function ($stateProvider) {

    $stateProvider.state('app.shoppingList', {
        url: '/shopping-list',
        templateUrl: 'shopping-list.html',
        controller: 'ShoppingListController',
        resolve: {
            shoppingLists: function (ShoppingListService) {
                return ShoppingListService.getAll();
            }
        }
    });

});

我们现在可以将已解析的对象作为依赖项注入控制器.在上面的状态中,我正在解析一个名称的对象shoppingLists.如果我想在我的控制器中使用此对象,我将其包含为具有相同名称的依赖项.

购物清单控制器

angular.module('myApp.shoppingList').controller('ShoppingListController', function ($scope, shoppingLists) {
    $scope.shoppingLists = shoppingLists;
});

有关其他详细信息,请阅读Angular-UI Wiki,其中包含使用resolve的深入指南.