ui-router resolve 不适用于索引页面控制器答案

【问题标题】：ui-router resolve is not working with the index page controllerui-router resolve 不适用于索引页面控制器
【发布时间】：2015-03-17 14:08:57
【问题描述】：

我想在加载应用程序的第一页之前解析一些值，但它一直告诉我

未知提供者：programClassSummaryProvider

我很确定我做对了，因为我对任何其他控制器和路由都做了同样的事情。但它不适用于我的主页控制器。似乎它首先加载控制器，然后在路由中解决它。我的代码有什么问题吗？

在routing.js中

$stateProvider
        .state('home', {
          url: '/home',
          controller: 'HomeCtrl',
          controllerAs: 'vm',
          templateUrl: 'index_main.html',
          resolve: {
            programClassSummary: ['GroupDataFactory', function (groupDf) {
              return groupDf.getProgramClassSummary();
            }]
          },
          ncyBreadcrumb: {
            skip: true
          }
        });

在 controller.js 中

angular
    .module('issMccApp')
    .controller('HomeCtrl', homeCtrl);

  homeCtrl.$inject = ['$scope', '$location', '$state', '$auth', 'programClassSummary'];

  /* @ngInject */
  function homeCtrl($scope, $location, $state, $auth, programClassSummary) {

    var vm = this;

    vm.isAuthenticated = isAuthenticated;
    vm.programClassSummary = programClassSummary;

    if (!$auth.isAuthenticated()) {
      $state.go('login');
      return;
    }

    function isAuthenticated() {
      return $auth.isAuthenticated();
    }
  }

在 factory.js 中

 function getProgramClassSummary(showAll) {
      var query = "";
      if (showAll)
        query = APIConfigObj.base_url + '/api/group/infor/programclasssummary?all=1';
      else
        query = APIConfigObj.base_url + '/api/group/infor/programclasssummary';

      return $http.get(query)
        .success(function (result) {
          return result;
        })
        .error(function (err) {
          return err;
        })

    }

【问题讨论】：

如果控制器在解析发生之前被加载，您可能会加载控制器两次（例如通过在 HTML 中使用 ng-controller）。
你说的完全正确！！！

标签： angularjs angular-ui-router

【解决方案1】：

我想说，我们真的必须区分UI-Router 状态世界和角度本身。原因在这里明确定义（从UI-Router API documentation中提取$resolve）：

$resolve

resolve(invocables, locals, parent, self)

解析一组可调用对象。 invocable 是通过$injector.invoke() 调用的函数，并且可以具有任意数量的依赖项。可调用对象可以直接返回值，也可以返回$q 承诺。如果返回一个承诺，它将被解析并使用结果值。可调用对象的依赖关系被解析（按此优先顺序）

来自指定的本地人

来自属于此 $resolve 调用一部分的另一个可调用对象

从继承自对 $resolve 的父调用（或递归调用）的可调用对象

来自该父级的任何祖先 $resolve）。

有a wroking plunker，就是用这个index.html

<body ng-controller="RootCtrl">

    a summary for a root:
    <pre>{{summary}}</pre>

    <ul>
      <li><a href="#/home">home</a>
      <li><a href="#/other">other</a>
    </ul>

    <div ui-view=""></div>

所以，这里我们使用一些RootCtrl，它不会通过状态机UI-Router，它是角度基本的东西

根控制器必须定义为

.controller('RootCtrl', ['$scope', 'GroupDataFactory', function ($scope, groupDf) { 
  $scope.summary = groupDf.getProgramClassSummary();
}])

对于一个state home，我们可以使用不同的方法，其实和上面一样（下面是简化版）

  .state('home', {
      url: "/home",
      templateUrl: 'tpl.home.html',
      resolve: {
          programClassSummary: ['GroupDataFactory', function (groupDf) {
          return groupDf.getProgramClassSummary();
        }]
      },
      controller: 'HomeCtrl',
  })

它的控制器现在可以使用 locals

.controller('HomeCtrl', ['$scope', 'programClassSummary', function ($scope, summary) { 
  $scope.summaryForHome = summary;
}])

查看action here

【讨论】：