AngularJS - 主模块无法识别子模块的状态
AngularJS - States from submodule not recognized by main module
我目前在尝试使用我的子模块上定义的状态时遇到错误。我正在研究这个 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 放在主模块中并将控制器模块也更改为主模块,它就可以工作。有帮助吗?
您还需要在主模块中有一个状态提供程序,至少是一个默认的。尝试在您的主模块中放置类似这样的内容:
$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'
})
基本上,子(子模块)状态应该知道它的父状态。
我目前在尝试使用我的子模块上定义的状态时遇到错误。我正在研究这个 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 放在主模块中并将控制器模块也更改为主模块,它就可以工作。有帮助吗?
您还需要在主模块中有一个状态提供程序,至少是一个默认的。尝试在您的主模块中放置类似这样的内容:
$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'
})
基本上,子(子模块)状态应该知道它的父状态。