ui-路由器解析无法与索引页面控制器一起使用

Question

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

未知提供者：programClassSummaryProvider <- programClassSummary <- HomeCtrl

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

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

    }

Answer 1

我会说，我们真的必须区分 UI-Router 状态世界和 angular 本身。这里明确定义的原因(提取$resolve from UI-Router API documentation):

$resolve

resolve(invocables, locals, parent, self)

Resolves a set of invocables. An invocable is a function to be invoked via $injector.invoke(), and can have an arbitrary number of dependencies. An invocable can either return a value directly, or a $q promise. If a promise is returned it will be resolved and the resulting value will be used instead. Dependencies of invocables are resolved (in this order of precedence)

from the specified locals

from another invocable that is part of this $resolve call

from an invocable that is inherited from a parent call to $resolve (or recursively

from any ancestor $resolve of that parent).

有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，它是angular基本的东西

根控制器必须定义为

.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

中查看

ui-路由器解析无法与索引页面控制器一起使用

ui-router resolve is not working with the index page controller

angularjs

angular-ui-router

$resolve