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

问题描述

UI-Router 不同于 Angular 的 ngRoute.它支持普通 ngRoute 可以做的所有事情以及许多额外的功能.

UI-Router is different than Angular's ngRoute. It supports everything the normal ngRoute can do as well as many extra functions.

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

I am changing my Angular app from ngRoute to UI-Router. But I cannot quite figure out how to inject resolve function programmatically - the piece of code that I use outside Controller and config.

因此，使用标准 Angular 的 ngRoute 我可以在 Angular 运行中动态注入我的 resolve promise块:

So, with standard Angular's ngRoute I can dynamically inject my resolve promise in the Angular run block:

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

现在我如何使用 UI-Router 以类似的方式注入 resolve promise?我尝试通过 $stateProvider 来访问 state，但这对我来说失败了.

Now how do I inject resolve promise in a similar way using UI-Router? I tried passing $stateProvider to get access to states but that was failing for me.

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

      //$stateProvider would fail

推荐答案

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

You can use resolve to provide your controller with data before it loads the next state. To access the resolved objects, you will need to inject them into the controller as dependencies.

让我们以购物清单应用程序为例.我们将从定义我们的应用程序模块开始，并包含 ui.router 作为依赖项.:

Let's use a shopping list application as an example. We'll start by defining our application module, and including ui.router as a dependency.:

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

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

We now want to define the module that will be specific to the shopping list page of our application. We'll define a shoppingList module, include the states for that module, a resolve for that state, and the controller.

购物清单模块

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.如果我想在我的控制器中使用这个对象，我将它作为一个具有相同名称的依赖项包含在内.

We now can inject our resolved objects into our controller as dependencies. In the above state, I am resolving an object to the name shoppingLists. If I want to use this object in my controller, I include it as a dependency with the same name.

购物清单控制器

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

有关更多详细信息，请阅读 Angular-UI Wiki，其中包括 Angular-UI Wikia href="https://github.com/angular-ui/ui-router/wiki#resolve" rel="noreferrer">使用解析的深入指南.

For additional details read the Angular-UI Wiki, which includes an in-depth guide to using resolve.

这篇关于Angular Run Block - 使用 UI-Router $stateProvider 解决 Promise的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！