Getting AngularJS ui router templates error

Question

I have the following routes:

    $stateProvider
    .state('access', {
        abstract: true,
        url: '/access',
        templateUrl: 'login.html'
    })
    .state('access.signin', {
        url: '/signin',
        templateUrl: 'tpls/signin.html',
        data: {
            authorizedRoles: [USER_ROLES.all]
        }
    });

$urlRouterProvider.otherwise('/access/signin');

Then my project looks something like this:

AS you can see I have a template called "login.html" this template looks like this:

<div class="logo">
    <a href="index.html">
        <img src="./assets/pages/img/logo-big.png" alt=""/> </a>
</div>
<!-- END LOGO -->
<!-- BEGIN LOGIN -->
<div class="content" ui-view>
</div>

However when I run this it loads the index.html as my template and doesn't use this login.html

What have I done wrong, and why might this be happening?

Answer 1

As you ask in your question to have multiple layouts in your app, so for this you should use Multiple Named Views.

 $stateProvider     
 .state('report', {     
   views: {     
   'filters': { ... templates and/or controllers ... },     
   'tabledata': {},     
   'graph': {},     
  }     
})  

For more information about it read it's document.