Nested routing with Angular UI Router

Question

I have a (likely stupid) AngularJS question involving nested UI Router configurations, hoping the fine community here can help.

Basically, I have a standard app.routes.js for the main menu links. Code (trimmed to whats valuable and generified):

angular.module('app',[
    'ui.router',
    'ui.bootstrap',
    'oc.lazyLoad',
    'app.links'
])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        $stateProvider
            .state('index',{
                url:'/',
                views:{
                    'index':{
                        templateUrl:'app/app.view.html'
                    },
                    'header@index':{
                        templateUrl:'app/components/core/header/header.view.html',
                        controller:'HeaderController as headerCtrl'
                    }
                },
                resolve:{
                    loadLayoutModules:['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load([
                            {
                                name:'app.header',
                                serie:true,
                                files: [
                                    'app/components/core/header/header.module.js',
                                    'app/components/core/header/header.service.js',
                                    'app/components/core/header/header.controller.js',
                                    'app/components/links/links.module.js',
                                    'app/components/links/links.routes.js'
                                ]
                            }
                        ]);
                    }]
                }
            })

I have several other .state()s in the chain for each link, standard menu stuff. However, one of the links has a submenu, and I specifically wanted to segregate out the configuration of those to a separate file ... app/componenets/links/links.routes.js. It's code:

angular.module('app.links',[])
    .config(['$stateProvider',function($stateProvider){
        $stateProvider
            .state('index.links.first',{
                url:'links/first',
                views:{
                    'main@index':{
                        templateUrl:'app/components/links/first/first.view.html',
                        controller:'FirstLinkController as firstLinkCtrl'
                    }
                },
                resolve:{
                    loadFirstLinkModules:['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load([
                            {
                                name:'app.home',
                                serie:true,
                                files: [
                                    'app/components/links/first/first.module.js',
                                    'app/components/links/first/first.service.js',
                                    'app/components/links/first/first.controller.js'
                                ]
                            }
                        ]);
                    }]
                }
            });
    }]);

Nothing too crazy here. The problem is that this .config() is not firing at all. I put a console.log() at the top of it just to test; even though the file itself is being loaded, the .config() function for the module never runs.

Based on the UI Router documentation, I should be able to use multiple modules to establish routing. Is it because I'm lazy loading the file? Is there something that I am missing? Please help!!

By the way, if anyone is wondering why I want to separate these states out, it is because it is for scaling ... just assume this will be used for a site with like 10,000 states, and this is to organize the routing to those states better. With that context in mind, if you recommend a different methodology, I'm all ears! I'm pretty new to Angular, and welcome any and all wisdom.

Ryan Warner · Accepted Answer · 2015-01-27 20:54:55Z

0

First of all, nothing wrong with separating out routes into multiple files. I do that successfully in all my angular apps. See my angular starter app here: https://github.com/RyanWarner/angular-sprout.

I can't comment yet, but are you remembering to require your links module as a dependency to your app module?

Example from the UI router docs:

angular.module('main', ['main.page1']);

Where main.page1 is equivalent to the module you call links.

edited Jan 27, 2015 at 20:54

answered Jan 27, 2015 at 20:36

Ryan Warner

1,4341 gold badge11 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PlantTheIdea Over a year ago

Let me give this a try ... I did not do this because of the lazy loading I was doing. I didn't want to have a <script> tag for every file, but for the nested routing it may be unavoidable.

Ryan Warner Over a year ago

In development, I use gulp-inject with gulp-angular-filesort to take care of all the <script> tags.

PlantTheIdea Over a year ago

Alright so I double-checked, by avoiding lazy loading the config function fires now, it just doesnt go to the state. Another puzzle to solve, I'll checkmark this because the issue was solved.

Ryan Warner Over a year ago

Do you have an index.links state? Parents MUST exist. github.com/angular-ui/ui-router/wiki/…

PlantTheIdea Over a year ago

yup, i figured out very quickly that I needed an index.links state ... i just set the url to be links/ and abstract to be true ... works as expected now. thanks for your help!

Collectives™ on Stack Overflow

Nested routing with Angular UI Router

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related