角RUN块 - 使用UI-路由器$ stateProvider化解无极 [英] Angular Run Block - Use UI-Router $stateProvider to Resolve Promise

问题描述

UI-路由器比角的不同的 ngRoute 。它支持一切正常 ngRoute 可以做的还有很多额外的功能。

我改变我角应用程序从 ngRoute 到 UI-路由器。但我不能完全弄清楚如何注入决心编程功能 - 计件code的，我使用控制器和配置。

所以，用标准的角的 ngRoute 我可以动态地注入我的决心承诺在角运行块：

  app.run（函数（$路径）{
  VAR路线= $ route.routes ['/'];
  route.resolve = route.resolve || {};
  route.resolve.getData =功能（为myService）{返回myService.getSomeData（）;};
}）;
 

现在我怎么注入承诺的决心使用 UI-路由器以类似的方式？我试图通过 $ stateProvider 以访问状态取值但这是失败对我来说。

  angular.module（'uiRouterSample'）。运行（
  ['$ rootScope'，'$州'，'$ stateProvider
    功能（$ rootScope，$状态，$ stateProvider）{      // $ stateProvider会失败
 




解决方案

您可以使用解析加载下一个状态之前提供您的控制器的数据。要访问解决对象，你需要将它们注入到控制器的依赖关系。

让我们用一个购物清单应用程序为例。首先，我们定义我们的应用模块，以及包括 ui.router 作为一个依赖启动：

  angular.module（'对myApp'，['ui.router']）;
 

我们现在要定义将具体到我们的应用程序的购物清单页面模块。我们将定义一个 shoppingList 模块，包括该模块的状态，该状态的决心，和控制器。

购物清单模块

  angular.module（'myApp.shoppingList'）。配置（函数（$ stateProvider）{    $ stateProvider.state（'app.shoppingList'，{
        网址：'/购物列表'，
        templateUrl：购物-list.html'，
        控制器：'ShoppingListController'，
        解析：{
            shoppingLists：功能（ShoppingListService）{
                返回ShoppingListService.getAll（）;
            }
        }
    }）;}）;
 

我们现在可以注入我们的解决对象纳入我们依赖控制器。在上述状态下，我解决一个对象的名称 shoppingLists 。如果我想在我的控制器来使用这个对象，我把它作为具有相同名称的依赖关系。

购物清单控制器

  angular.module（'myApp.shoppingList'）。控制器（'ShoppingListController'，函数（$范围，shoppingLists）{
    $ scope.shoppingLists = shoppingLists;
}）;
 

有关更多详细信息，阅读href=\"https://github.com/angular-ui/ui-router/wiki\" rel=\"nofollow\">角UI维基的深入指导使用决心。

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

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.

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

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

解决方案

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.

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']);

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.

Shopping List Module

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

});

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.

Shopping List Controller

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

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

这篇关于角RUN块 - 使用UI-路由器$ stateProvider化解无极的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！