I am trying to create a rather complicated application. This application includes many different states, configurations, and trigger blocks in their own modules. I realized that one good way to link these modules together would be to introduce them into the main app module, which contains all the modules introduced. In this particular case, subapp is the entered child module.
I find out that the subapp run and config blocks do not work as if they were their parents, let me demonstrate this below:
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('/'); });
Essentially, I'm trying to get Angular to run the .run and .config subapp functions, but use <html ng-app="app"> in the instantiation.
When you try to go to <a href="#/thestate"> nothing happens. Obviously this works if I replaced <html ng-app="app> with <html ng-app="subapp"> , but that would not allow me to do something like angular.module('app', ['ui.router', 'subapp', 'subapp2' ...]);
So my question is: why does this work not work (i.e., maybe .run launched only once and only from a module created in html), and what is the best way to approach something modular, for example this?
Thanks!
EDIT **
Plnkr: http://plnkr.co/edit/UCWc2cByHHjNgqAE8P7L?p=preview