angularjs - Angular.js configuring ui-router child-states from multiple modules -
i'd implement setup can define "root state" in main module, , add child states in other modules. this, because need root state resolve before can go child state.
apparently, should possible according faq: how to: configure ui-router multiple modules
for me doesn't work: error uncaught error: no such state 'app' ngboilerplate.foo
here have:
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 run'); $state.transitionto('app'); }) .controller( 'appctrl', function appctrl ( $scope, auth ) { console.log('greetings 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 going on in here*/ } } } }); }) .controller( 'fooctrl', function fooctrl( $scope ) { console.log('deferred foo'); }); how make work or other approaches take have global resolved before every state (without defining resolve on each state)?
i chose approach job me:
// add dependencies here , configure root state e.g. "app" angular.module( 'ngboilerplate', ['ui.router','templates-app', 'templates-common','etc','etc']); // configure child states in here, such app.foo, app.bar etc. angular.module( 'ngboilerplate.foo', ['ngboilerplate']); angular.module( 'ngboilerplate.bar', ['ngboilerplate']); // tie have static module name // can used ng-app. module doesn't more that. angular.module( 'app', ['ngboilerplate.foo','ngboilerplate.bar']); and in app index.html
<html ng-app="app">
Comments
Post a Comment