nik*_*ong 5 javascript angularjs angular-ui-router
我正在尝试构建一个非常复杂的应用程序.此应用程序在各自的模块中涉及许多不同的状态,配置和运行块.我认为将这些模块连接在一起的一种好方法是将它们注入一个主app模块,该模块包含所有注入的模块.在这种特定情况下,subapp是注入的子模块.
我发现,subapp运行和配置块不会像他们的父母那样运行,让我在下面演示:
HTML
<html ng-app="app">
<body>
<a href="#/thestate">Head to the state!</a>
<ui-view></ui-view>
</body>
</html>
JS
angular.module('app', ['ui.router', 'subapp']);
angular.module('subapp', ['ui.router'])
.run(function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(event, toState) {
if (toState.name === "theState") {
event.preventDefault();
$state.go('theState.substate', {
param: 1
});
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('theState', {
url: '/thestate',
template: '<div>this is the main state</div>' +
'<a href="#/thestate/12">Go to state.substate</a>' +
'<ui-view></ui-view>'
})
.state('theState.substate', {
url: '/:param',
template: '<div>{{id}}</div>',
controller: function($scope, $stateParams) {
$scope.id = $stateParams.param;
}
});
$urlRouterProvider.otherwise('/');
});
本质上,我试图让Angular运行.run和.config函数,subapp但<html ng-app="app">在实例化中使用.
在尝试导航时<a href="#/thestate">,没有任何反应.它确实有效,如果我更换<html ng-app="app>,<html ng-app="subapp">但这不允许我做类似的事情,angular.module('app', ['ui.router', 'subapp', 'subapp2' ...]);
所以,我的问题是,为什么这不起作用 - (也就是说,可能.run只运行一次,而且只运行在html中实例化的模块),以及这样处理模块化的最佳方法是什么？
谢谢你!
编辑**
Plnkr:http://plnkr.co/edit/UCWc2cByHHjNgqAE8P7L?p=preview
唯一的问题.run()是缺少主模块[]
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
原始代码片段：
.run('$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
})
没有做 Angular 所期望的事情
.run(['param1', 'param2', ... , function(param1, param2, ...) {}]