javascript - AngularJS - 主模块无法识别子模块的状态

Question

我当前在尝试使用子模块上定义的状态时遇到错误。我正在研究这个AngularJS-Boilerplate他们以我不太习惯的方式编码。

这是我的主模块:

;(function() {


  /**
   * Definition of the main app module and its dependencies
   */
  angular
    .module('boilerplate', [
      'ui.router',
      'boilerplate.demo'
    ])
    .config(config);


  config.$inject = ['$locationProvider', '$stateProvider', '$httpProvider', '$compileProvider', '$authProvider'];

  function config($locationProvider, $stateProvider, $httpProvider, $compileProvider, $authProvider) {

    $locationProvider.html5Mode(false);

    $httpProvider.interceptors.push('authInterceptor');

    $authProvider.facebook({
      clientId: '471453806577471',
      responseType: 'token'
    });

  }

  /**
   * Run block
   */
  angular
    .module('boilerplate')
    .run(run);

  run.$inject = ['$rootScope', '$state', '$stateParams','$location'];

  function run($rootScope, $state, $stateParams, $location) {
    $state.go('boilerplate.home');

  }


})();

这是我的子模块:

;(function() {


  /**
   * Definition of the main app module and its dependencies
   */
  angular
    .module('boilerplate.demo', [
      'ui.router',
    ])
    .config(config);

  // safe dependency injection
  // this prevents minification issues
  config.$inject = ['$stateProvider'];

  function config($stateProvider) {
    console.log('states');
    $stateProvider
            .state('boilerplate.home', {
                url: '/home',
                templateUrl: 'app/demo/partials/home.html',
                controller: 'MainController',
                controllerAs: 'vm'
            })

  }

})();

我收到此错误:

angular.js:11706 Error: Could not resolve 'boilerplate.home' from state ''

如果我将 $stateProvider 放在主模块中并将 Controller 模块也更改为主模块，它就可以工作。有什么帮助吗？

Answer 1

主模块中还需要一个状态提供程序，至少是一个默认的。尝试在主模块中添加类似的内容:

$stateProvider
        .state('boilerplate', {
            url: '',
            abstract:true,
            templateUrl: 'app/demo/partials/blank.html' //some empty template, it will be overridden
        })

请注意，在单独的模块中创建状态时，必须满足状态命名的层次结构。如果您的抽象或默认状态名为 boilerplate，则您的子模块状态必须命名为 boilerplate.something。

编辑:

我忘了补充一件事。在子模块的 $stateProvider 状态定义中，您需要添加 parent 属性。它应该看起来像这样:

$stateProvider
            .state('boilerplate.home', {
                url: '/home',
                parent: 'boilerplate',
                templateUrl: 'app/demo/partials/home.html',
                controller: 'MainController',
                controllerAs: 'vm'
            })

基本上，子(子模块)状态应该知道它的父状态。