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

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

我正在将我的Angular应用程序从ngRoute更改为UI-Router.但我无法弄清楚如何以编程方式注入解析函数 – 我在Controller和config之外使用的那段代码.

因此,使用标准的Angular的ngRoute,我可以在Angular运行块中动态注入我的解析承诺:

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

现在我如何使用UI-Router以类似的方式注入解析承诺?我尝试传递$stateProvider来访问状态,但这对我来说是失败的.

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

      //$stateProvider would fail
您可以使用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,其中包括in-depth guide to using resolve.

https://stackoverflow.com/questions/33739533/angular-run-block-use-ui-router-stateprovider-to-resolve-promise

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – Angular Run Block – 使用UI-Router $stateProvider来解决Promise