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错误：无法从状态''
解析'boilerplate.home'

如果我将$ stateProvider放入主模块并将控制器模块也更改为主模块，则可以正常工作。有什么帮助吗？

Answer 1

您还需要主模块中的状态提供程序，至少是默认的状态提供程序。尝试将这样的东西放在主模块中：

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

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

编辑：

我忘记添加一件事。在子模块的$ stateProvider状态定义中，您需要添加 parent 属性。看起来应该是这样的：

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

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

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

1 个答案: