Getting AngularJS ui router templates error

Issue

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?

Solution

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.

Answered By - Hadi J