Nesting routes in Angular UI Router

Question

(AngularJS v1.2.0-rc.3 + Angular UI-Router v0.2.0)

In my index.html, I have the following code:

<div class="container" ui-view></div>

In my app.js, I have the following code:

    $stateProvider
    .state('projects', {
        abstract: true,
        url: '/projects',
        template: '<ui-view />',
    })
    // below display properly
    .state('projects.list', {
        url: '',
        templateUrl: 'views/project_list.html',
        controller: 'ProjectListCtrl'
    })
    // below display properly
    .state('projects.one', {
        url: '/{projectId:[0-9]{1,8}}',
        templateUrl: 'views/project_dashboard.html',
        controller: 'ProjectCtrl'
    })
    // below does not display at all
    .state('projects.one.campaigns', {
        url: '/campaigns',
        template: 'I cannot seem to display this text'
    })

I can hit the following routes just fine: index.html/projects, index.html/projects/1, but I cannot hit this route: index.html/projects/1/campaigns

Does anyone know why I can't?

Bonus points if you can answer how I could display the projects.one.campaigns state on the same URL page as the projects.one state.

Answer 1

The reason is because projects.one matches before projects.one.campaigns

Add a projects.one abstract state and then add a projects.one.default state with the templateUrl.

.state('projects.one', {
    url: '/{projectId:[0-9]{1,8}}',
    abstract:true,
    template: '<ui-view/>',
})
.state('projects.one.default', {
    url: '',
    templateUrl: 'views/project_dashboard.html',
    controller: 'ProjectCtrl'
})
.state('projects.one.campaigns', {
    url: '/campaigns',
    template: 'I cannot seem to display this text'
}

To display the template of the campaigns on the same page of the projects.one you should not use a state but a directive instead and toggle with ng-show on the same page.

Answer 2

I just spent whole day dealing with this problem.

I found out, that you don't need abstract states at all!

Try this: index.html:

<div class="container"><ui-view/></div>

use directive ui-view as a tag in the top level template.

Now all your nested templates wrap like this:

<ui-view>
    <div>
        template code
    </div>
</ui-view>

and now you can just:

   $stateProvider        
    .state('list', {
        url: '',
        templateUrl: 'views/project_list.html',
        controller: 'ProjectListCtrl'
    })
    // below display properly
    .state('one', {
        url: '/{projectId:[0-9]{1,8}}',
        templateUrl: 'views/project_dashboard.html',
        controller: 'ProjectCtrl'
    })
    // below does not display at all
    .state('one.campaigns', {
        url: '/campaigns',
        template: 'I cannot seem to display this text'
    })

I needed general solution for the nesting and this works. Now you can create very deep nesting easily (for example one.campaing.group.member.note). If you will use ui-view on the top level and wrap all templates with the ui-view, they contact of each template will replace content of the top level ui-view (which is empty).