角度运行块-使用UI-Router $ stateProvider解决承诺

一尘不染

角度运行块-使用UI-Router $ stateProvider解决承诺

angularjs

UI-Router比不同Angular的ngRoute。它支持普通ngRoute用户可以执行的所有操作以及许多其他功能。

我正在将我的Angular应用程序从更改ngRoute为UI-Router。但是我不太知道如何以resolve编程的方式注入函数-
我在外部Controller和外部使用的代码config。

因此，使用standard 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以获取对的访问权限，state但这对我来说是失败的。

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

      //$stateProvider would fail

阅读 252

2020-07-04

共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();
            }
        }
    });

});

现在，我们可以将已解析的对象作为依赖项注入到控制器中。在上述状态下，我正在将一个对象解析为name
shoppingLists。如果要在控制器中使用此对象，则将其包含为具有相同名称的依赖项。

购物清单控制器

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

有关更多详细信息，请阅读Angular-UI
Wiki，其中包括使用resolve的深入指南。

2020-07-04