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:
What kind of examples we are going to check
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 insert a template with its own ui-view(s) that its child states will populate. (we will use this technique) with blank URL
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',
});
}]);
|
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
| By Ali Adravi On 03 Nov, 16 Viewed: 6,903 |
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: 16,696
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: 51,553
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: 18,132
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: 4,112
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: 29,739