javascript - How to use a separated template in ui-router? -

i have angular app uses ui-router view routing.

i have master template layout, , inside have ui-view below:

<div class="content" ui-view> <div> 

and routes in app:

 app.config(["$stateprovider", "$urlrouterprovider", function ($stateprovider, $urlrouterprovider) {          $stateprovider             .state("customers", {                 url: "/customers",                 templateurl: "app/customers/tpl.html",                 controller: "customers vm"             });          $urlrouterprovider.otherwise("/dashboard");      }]); 

in code above, templateurl injected in content, usual.

now, have login page uses different layout of app. there way tell ui-router use custom layout? how achieve that?

you make other states share common parent state. parent state may have empty string url.

the following snippet should 2 ways implement parent states. options either name state parent.child. other way explicitly mention parent in state definition.

'use strict';    angular.module('myapp', [    'ui.router'  ]).    config(function($stateprovider, $urlrouterprovider) {    $stateprovider.    state('login', {  // login state has no parent      url: '/login',      template: '<h1>login</h1>'    }).    state('app', {      url: '',      abstract: true,      template:        '<h1>default template</h1>' +        '<a ui-sref="customers">customers</a>' +        '<br/>' +        '<a ui-sref="app.dashboard">dashboard</a>' +        '<br/>' +        '<a ui-sref="login">login page</a>' +        '<div class="content" ui-view></div>'    }).    state('customers', {      parent: 'app',  // app parent state of customers      url: '/customers',      template: '<h3>customers page</h3>'    }).    state('app.dashboard', {  // app parent state of dashboard      url: '/dashboard',      template: '<h3>dashboard page</h3>'    });      $urlrouterprovider.otherwise('/dashboard');  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>    <div ng-app="myapp" ui-view></div>

for more details see ui-router docs.