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在主模塊中並將控制器模塊更改爲其工作的主模塊。任何幫助？

Answer 1

您還需要主模塊中的狀態提供程序以及至少一個默認的狀態提供程序。嘗試把這樣的事情你的主要模塊：

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

請注意，創建單獨的模塊狀態時，層次結構狀態的命名必須得到滿足。如果您的抽象或默認狀態被命名爲樣板，則您的子模塊狀態必須命名爲boilerplate.something。

編輯：

我忘了補充一點。在您的子模塊的$ stateProvider狀態定義中，您需要添加父項屬性。它應該看起來像這樣：

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

基本上，子（子模塊）的狀態應該知道它的父狀態。