Angular.js从多个模块配置ui-路由器子状态
我希望实现一个设置，在其中我可以在主模块中定义一个“根状态”，然后在其他模块中添加子状态。这是因为在进入子状态之前，我需要解析根状态。
显然，根据这个常见问题：如何:从多个模块配置ui-路由器，这是可能的。
对我来说，它不起作用：错误未登录错误: ngBoilerplate.foo中没有这样的状态'app‘
以下是我所拥有的：
app.js
angular.module( 'ngBoilerplate', [
'templates-app',
'templates-common',
'ui.state',
'ui.route',
'ui.bootstrap',
'ngBoilerplate.library'
])
.config( function myAppConfig ( $stateProvider, $urlRouterProvider ) {
$stateProvider
.state('app', {
views:{
"main":{
controller:"AppCtrl"
}
},
resolve:{
Auth:function(Auth){
return new Auth();
}
}
});
$urlRouterProvider.when('/foo','/foo/tile');
$urlRouterProvider.otherwise( '/foo' );
})
.factory('Auth', ['$timeout','$q', function ($timeout,$q) {
return function () {
var deferred = $q.defer();
console.log('before resolve');
$timeout(function () {
console.log('at resolve');
deferred.resolve();
}, 2000);
return deferred.promise;
};
}])
.run(function run( $rootScope, $state, $stateParams ) {
console.log('greetings from run');
$state.transitionTo('app');
})
.controller( 'AppCtrl', function AppCtrl ( $scope, Auth ) {
console.log('greetings from AppCtrl');
});foo.js
angular.module( 'ngBoilerplate.foo', ['ui.state'])
.config(function config( $stateProvider ) {
$stateProvider
.state( 'app.foo', {
url: '/foo/:type',
views: {
"main": {
controller:'FooCtrl',
templateUrl: function(stateParams) { /* stuff is going on in here*/ }
}
}
});
})
.controller( 'FooCtrl', function FooCtrl( $scope ) {
console.log('deferred foo');
});我如何使这一工作，或者我可以采取什么其他方法，使一些全局解决之前，每个州(而不定义每个州的解决办法)？
回答 3
Stack Overflow用户
发布于 2013-09-17 07:07:22
我最终选择了为我工作的方法：
// add all your dependencies here and configure a root state e.g. "app"
angular.module( 'ngBoilerplate', ['ui.router','templates-app',
'templates-common','etc','etc']);
// configure your child states in here, such as app.foo, app.bar etc.
angular.module( 'ngBoilerplate.foo', ['ngBoilerplate']);
angular.module( 'ngBoilerplate.bar', ['ngBoilerplate']);
// tie everything together so you have a static module name
// that can be used with ng-app. this module doesn't do anything more than that.
angular.module( 'app', ['ngBoilerplate.foo','ngBoilerplate.bar']);然后在你的应用程序index.html中
<html ng-app="app">Stack Overflow用户
发布于 2013-08-15 16:51:33
在文档中，feature1模块依赖于application模块。试一试
angular.module( 'ngBoilerplate.foo', ['ngBoilerplate'])Stack Overflow用户
发布于 2013-09-16 21:11:46
我只是想评论一下，但我没有代表。我知道这是旧的，但我也遇到了同样的问题。我感到困惑的是，在app.js中，您不导入"ngBoilerplate.foo“，而是导入ngBoilerplate.library。我也有同样的问题，我的解决方案是将子模块注入顶层模块，而不是它们的父模块。
我的结构是模块(‘ngBoilerplate’)，模块(‘ngBoilerplate.foo’)和模块(‘ngBoilerplate.foo.bar’)。我把ngBoilerplate.foo.bar注射到ngBoilerplate.foo中，$stateProvider失败了。我需要将ngBoilerplate.foo.bar注入顶级ngBoilerplate。
我想我应该把这个放在这里以防其他人看到这个。我所犯的错误是未定义的TypeError:无法从ngBoilerplate.foo读取未定义的属性“可导航”
https://stackoverflow.com/questions/18255821
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号