CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-ui
GuFigueiredo
GuFigueiredo

Reputation: 635

How to use a separated template in ui-router?

I have an angular app that uses ui-router for view routing.

I have a master template with all my layout, and inside that I have my ui-view like below:

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

and my routes in app:

 app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state("customers", {
                url: "/customers",
                templateUrl: "app/customers/tpl.html",
                controller: "Customers as vm"
            });

        $urlRouterProvider.otherwise("/dashboard");

    }]);

In the code above, the templateUrl is injected in my content, as usual.

Now, I have a login page that uses a completely different layout of my app. Is there any way to tell ui-router to use a custom layout? How to achieve that?

Upvotes: 0

Views: 77

Answers (1)

Remco Haszing
Remco Haszing

Reputation: 7809

You could make all other states share a common parent state. This parent state may have an empty string for a url.

The following snippet should two ways to implement parent states. The options are either to name the state parent.child. The other way is to explicitly mention the parent in the state definition.

'use strict';

angular.module('myApp', [
  'ui.router'
]).

config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.
  state('login', {  // The 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 is the parent state of customers
    url: '/customers',
    template: '<h3>Customers Page</h3>'
  }).
  state('app.dashboard', {  // app is the 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 the ui-router docs.

Upvotes: 3

Related Questions