Angularjs - New layout file in UI Router

Question

My project structure

js
views
 -dashboard.html
 -inbox.html
 -messages.html
 -home.html
includes
 -header.html
 -footer.html
 -aside.html
index.html
login.html

All my views are using index.html as the layout file which is containing <div ui-view></div>

 $stateProvider

            .state ('home', {
                url: '/home',
                templateUrl: 'views/home.html'
            })
            .state ('inbox', {
                url: '/inbox',
                templateUrl: 'views/inbox.html'
            })

I would to like use login.html as the new layout file for my login/register pages. How can I do this?

Answer 1

What you have to do is create nested states.

// For index pages
.state ('index', {

                templateUrl: 'index.html'
            })
.state ('index.home', {
                url: '/home',
                templateUrl: 'views/home.html'
            })


// For login
.state ('login', {

                templateUrl: 'login.html'
            })
.state ('login.register', {
                url: '/register',
                templateUrl: 'views/register.html'
            })

Now in both index.html and login.html you need to have . As they both will enact as independent layouts for different set of pages.