Question

在ngRoute，I've seen code中，将已解析的值传递给某个州的控制器。

代码是：

.config(['$routeProvider', 'securityAuthorizationProvider', function ($routeProvider, securityAuthorizationProvider) {
  $routeProvider.when('/projects', {
    templateUrl:'projects/projects-list.tpl.html',
    controller:'ProjectsViewCtrl',
    resolve:{
      projects:['Projects', function (Projects) {
        //TODO: fetch only for the current user
        return Projects.all();
      }],
      authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
    }
  });
}])

我想在ui-router中做一些非常相似的事情，有点像这样：

...
$stateProvider.
     $state('home', {
          url: '/home',
          templateUrl: 'myhome.html',
          controller: 'HomeCtrl'
     })
     ...

但我想传递HomeCtrl一些从API获取数据的服务，以便在myhome.html中显示。

如何使用ui-router？

执行此操作

Answer 1

这也是：

Resolve

您可以使用resolve为控制器提供自定义状态的内容或数据。 resolve是一个可选的依赖关系图，应该注入控制器。

如果这些依赖项中的任何一个是promise，它们将在实例化控制器并触发$ stateChangeSuccess事件之前被解析并转换为值。

resolve属性是一个地图对象。 map对象包含键/值对：


key - {string}：要注入控制器的依赖项的名称。

factory - {string | function}：

如果是字符串，则它是服务的别名。

否则，如果是函数，则将其注入，并将返回值视为依赖项。如果结果是一个promise，则在实例化控制器并将其值注入控制器之前解析它。

如果您想查看实际操作，请在此处查看：

angular ui-route state parent and resolve (nested resolves)（包括plunker）

一个片段形式的Q＆amp; A，表明解决甚至可以在各州之间继承：

.state('layout', {
    url: "",
    templateUrl: 'partials/layout.html',
    controller:'LayoutController',
    abstract:true, 
    resolve : {
        result_data: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a parent");
             }, 500);
            return deferred.promise;
        } 
    }
})
.state('homepage', {
    url: "/homepage",
    templateUrl: 'partials/homepage.html',
    parent: 'layout',
    controller:'HomepageController',
    resolve : {
        result_data_child: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a child");
             }, 500);
            return deferred.promise;
        }
    }

链接to working plunker

Answer 2

对于ui-router

是一样的

$stateProvider.
     $state('home', {
          url: '/home',
          templateUrl: 'myhome.html',
          controller: 'HomeCtrl',
     resolve:{
       projects:['Projects', function (Projects) {
        //TODO: fetch only for the current user
        return Projects.all();
      }],
      authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
    }
     })
 ...

在ui-router中是否有等效的Angular ngRoute“resolve”

2 个答案:

Resolve