Marc Rasmussen Marc Rasmussen - 1 month ago 10
AngularJS Question

Angular JS ui router templates error

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:

enter image description here

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 doesnt use this
login.html


Can anyone tell me what ive done wrong? and why this might be happening?

Answer Source

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.