Angularjs Multiple master pages with different design without show hide

angularjs master page example master page concept in angularjs angularjs ui router tutorial master page ui-view vs ng-view State with A Different Master View Page in AngularJS Master single-page Web apps with AngularJS

Multiple master page in AngularJS is easy but it is not very straight forward in any documentation. Most of the people say no it is not feasible, some suggest to user different techniques which doesnot work for me. I try hard to find any quick solution but spend two days trying different suggestion for different people. After all decided to try my own so start exploring UI-Router in more detail and when I found to solution I was amazed, what, it was so easy.... DEMO

How it can work and what we need:

  1. We will use UI-Router
  2. Some simple routing
  3. Some master html pages

What kind of examples we are going to check

  1. index: Totally blank page - which we can use for login or other similar pages where we don't want to show anything except our child page
  2. MenuMaster: It will have our top menu which can be used after login
  3. LeftMaster: It will have left menu only, say we have some pages where we only want to show the left menu
  4. TopLeftMaster: it will have both top as well as left menus

UI-Router Abstract States

An abstract state can have child states but cannot get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

Some examples of how you might use an abstract state are:

  • To prepend a url to all child state urls, say we want url like /product/product1, /product/product2 .... /product/productN
  • To insert a template with its own ui-view(s) that its child states will populate. (we will use this technique) with blank URL

    • Optionally assign a controller to the template. The controller must pair to a template.
    • Additionally, inherit $scope objects down to children, just understand that this happens via the view hierarchy, not the state hierarchy.
  • To provide resolved dependencies via resolve for use by child states.
  • To provide inherited custom data via data for use by child states or an event listener.
  • To run an onEnter or onExit function that may modify the application in someway.
  • Any combination of the above

For more detail you can explore

Let's see what wee need to do to achieve our goal:

Index.html

This file will contain our all css and javascript files, because it will always render first so we are not going to use much code here and no routing is required for it, here is the code:

<!DOCTYPE html>
<html>
  <head>
    <!-- All CSS Files -->
  </head>
  <body ng-app="masters">
    <div ui-view=""></div>
    <!-- All JavaScript Files -->
  </body>
</html>

Here we just added one ui-view and ng-app that's it.

MenuMaster.html

Since it will render inside the index ui-view so we don't need all head, body and html, simply it will look like:

<div>
    MENU: we can design it to look better
</div>

<div ui-view=""></div>

I removed rest of the designing and css style for clarity. Since it will render inside the index (which is blank) and put the menu on top and give container for it's children, which we will see how to load childred in abstract view. Since we don't need any URL and want to use as a master page so it's routing will looks like this:

.state('menuMaster', {
    abstract: true,
    templateUrl: 'MenuMaster.html'
}) 

LeftMaster.html

Say we have some pages where we only want to show the left menu and not the top menu so we need a separate master for it, it's html will be similar to above:

<div class="container">
    <div class="row">
        <div class="col-md-3">
            Menu items
        </div>
        <div class="col-md-9" >
            <div ui-view=""></div>
        </div>
    </div>
</div>

Nothing new, just put two div left for menu and right for ui-view container by using bootstrap classes. It's routing will be same as above with a different name

.state('leftMaster', {
    abstract: true,
    templateUrl: 'LeftMaster.html'
})

TopLeftMaster.html

It not different from above two just the html change, you can try your own

 ----------------------------------
|         MENU ITEMS               |
|                                  |
 ----------------------------------
|  L   |                           |
|  E   |     vi-view               |
|  F   |                           |
|  T   |                           |
 ----------------------------------

It's routing will also be very similar to the above two

.state('topLeftMaster', {
    abstract: true,
    templateUrl: 'TopLeftMaster.html'
})

Note: we have not use any controller with our abstract state, if we want a controller which can be shared betweel all our child page then we can use here.

Now our three master pages are ready, time to use it, if you feel tired go and check the DEMO for a white and we will continue latter once you will come back and feel good :)

Login page On this page I don't want to use any master page so I will simply configure the route without any abstract state and will be

.state('login', {
    url: '/',
    templateUrl: 'login.html',
    controll: 'loginCtrl'
})

Similarly say we don't want to use any master on our contact page then it will be

.state('anyName', {
    url: '/contact',
    templateUrl: 'contact.html',
    controll: 'ourCtrl'
})

Dashboard: with menu master

Say we have a page Dashboard which should show the menu on top, routing for it:

.state('menuMaster.dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard.html',
})

Products: with left master

Our products page will not have any top menu but only the left menu:

.state('leftMaster.products', {
    url: '/products',
    templateUrl: 'products.html',
})

Customers: with Top & Left Menu Master

Our products page will not have any top menu but only the left menu:

.state('topLeftMaster.customer', {
    url: '/customer',
    templateUrl: 'customers.html',
})

Here is the complete app.js file where I use routing on plunker and you can copy the HTML from there to test locally:

var app = angular.module('masters', ['ui.router']);

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

    // For any unmatched url, redirect to root
    $urlRouterProvider.otherwise("/");

    $stateProvider
    .state('menuMaster', {
        abstract: true,
        templateUrl: 'MenuMaster.html'
    })
    .state('leftMaster', {
        abstract: true,
        templateUrl: 'LeftMaster.html'
    })
    .state('topLeftMaster', {
        abstract: true,
        templateUrl: 'TopLeftMaster.html'
    })

    .state('login', {
        url: '/',
        templateUrl: 'login.html'
    })
    .state('menuMaster.dashboard', {
        url: '/dashboard',
        templateUrl: 'dashboard.html',
    })
    .state('leftMaster.products', {
        url: '/products',
        templateUrl: 'products.html',
    })
    .state('topLeftMaster.customer', {
        url: '/customer',
        templateUrl: 'customers.html',
    });
}]);
Ali Adravi Having 10+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 8 years and still with the same company. Always ready to learn new technologies and tricks.
  • angularjs
  • ui-router
  • master-page
By Ali Adravi On 03 Nov, 16  Viewed: 293

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 4,796

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 23,146

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 9,770

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 1,667

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 18,295