Angular UI Router - nested states and views

Question

I have this index.html:

<body ng-controller="MainCtrl">
    <div class="app" ui-view>
          <h1>This should be visible while the app loads</h1>
    </div>
</body>

My config code:

angular.module('app').config(function ($locationProvider, $stateProvider) {
$locationProvider.html5Mode(true);
$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: '/res/login/login.tpl.html'
    })
    .state('app', {
        url: '/',
        templateUrl: '/res/app/app.tpl.html',
        controller: 'AppCtrl',
        abstract: true,
        views:{
            header: {
                templateUrl: '/res/app/header.tpl.html'
            },
            toolbox: {
                templateUrl: '/res/app/toolbox.tpl.html'
            }
        }
    })
    .state('app.online', {
        url: 'online',
        templateUrl: '/res/app/online/online.tpl.html'
    })
    .state('app.history', {
        url: 'history',
        templateUrl: '/res/app/history/history.tpl.html'
    });
})    
.controller('MainCtrl', ['$state', function ($state) {

}])
.controller('LoginCtrl', [function () {

}])
.controller('AppCtrl', [function () {

}])
.controller('HeaderCtrl', [function () {

}])
.controller('SidebarCtrl', [function () {

}]);

app.tpl.html:

<div class="header" ui-view="header"></div>
<div class="content">
    <div class="toolbox" ui-view="toolbox"></div>
    <div class="content" ui-view>
         Place for the states - "app.online" and "app.history"
    </div>
</div>

I want the following to happen:

It should have two main states - Login and App.
The App state should contain three sub-views: header, toolbox and content. The "content" view is a container for the views of sub-states app.online and app.history.
After getting into App state, I want the user to navigate between the sub-states app.online and app.history. The App state should be abstract and the default sub-state should be app.online
URLs:

/login [login state with single view]

/ [app state, which should redirect to /online]

/online [app.online state]

/history [app.history state]

Currently, I can load /login successfully, but I don't understand why going to /online doesn't display app.tpl.html.

What am I missing?

Radim Köhler · Accepted Answer · 2014-08-20 13:51:38Z

1

The main change should be this state defintion:

.state('app', {
    url: '/',
    abstract: true,
    views:{
        '': {
            templateUrl: '/res/app/app.tpl.html',
            controller: 'AppCtrl',
        },
        'header@app': {
            templateUrl: '/res/app/header.tpl.html'
        },
        'toolbox@app': {
            templateUrl: '/res/app/toolbox.tpl.html'
        }
    }
})

this way we do pass the app.tpl.html into the unnamed ui-view="" in the index.html (root) next, we target with absolute naming that view, and inject the others:

'header@app': {
    templateUrl: '/res/app/header.tpl.html'
},
'toolbox@app': {
    templateUrl: '/res/app/toolbox.tpl.html'
}

Check the: View Names - Relative vs. Absolute Names cite:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

answered Aug 20, 2014 at 13:51

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

Radim Köhler Over a year ago

Adding a plunker plnkr.co/edit/jvXM1YjhJTE0h6nZ0OuT?p=preview with an example ;)

Collectives™ on Stack Overflow

Angular UI Router - nested states and views

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related