ui-router 中是否有相当于 Angular 的 ngRoute 的“resolve”

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 是一个可选的依赖映射，应该注入到控制器中。

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

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

• key – {string}：要注入控制器的依赖项的名称。
• 工厂 - {字符串|函数}：
  • 如果是字符串，则它是服务的别名。
  • 否则如果是函数，则将其注入并将返回值视为依赖项。如果结果是一个承诺，它会在控制器被实例化之前被解析，并且它的值被注入到控制器中。

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

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

一个 sn-p 格式的问答，表明决心甚至可以在状态之间继承：

.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
    }
     })
 ...