Hello Friend’s, after so long time we meet here with the new post “How to create a simple dashboard using AngularJs Material?” In this post we will create a simple dashboard page using angularjs material; an angularjs material is used for the better looking of UI and animation controls, we can use the angularjs material in angular (single page application) application. AngularJS Material is both a UI Component framework and a reference implementation of Google's Material Design Specification. There are so many UI controls components are available and its performance is also attractive and user experience. The AngularJs Material structure is different to bootstraps like a row, column, and layout. Before starting the code we will see about the row, column, and layout that how it works. Let's see about AngularJs Material.
What is AngularJs Material?
AngularJS Material is an implementation of Google's Material Design Specification. AngularJS Material includes a rich set of reusable, well-tested, and accessible UI components. Please note that using AngularJs Material requires the use of AngularJs 1.3.x or higher.
How to Install AngularJs Material?
By Npm
## Latest stable version.
npm install angular-material –save
## Most recent, latest committed to master version.
Npm install https://github.com/angular/bower-material#master –save
By CDN
Css file
<link rel="style sheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.css">
Js File
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.js"></script>
Features of AngularJs Material
- Responsive designing.
- Standard CSS.
- User Interface controls like buttons, checkboxes, and text fields.
- Included specialized features like cards, toolbar, side nav, swipe, etc.
- Reusable web components.
- Support Cross-browser.
Difference between AngularJs Material & Bootstrap
A material design delivers the wow effect like the click on the button, selecting a checkbox or entering form details and anything else specification delivers great user experience. Bootstrap is good if you want to build very simple applications that look like they deliver the functionality and user experience is not the high priority. Bootstrap uses floats for its grid system and Material design use Flexbox instead of floats or inline-blocks. Material design provides fewer color options for the buttons. On other hands, Bootstrap provides 9colors options. An Angular Material providing different types of the button like Fab Buttons, Icon Buttons, Link Buttons. There the list of components currently found in Angular Material but not in Bootstrap like Date Picker, Slider, Slider toggle, Toolbar, Grid List, Stepper, Chips, and Progress Spinner.
Understanding Layout column & row in AngularJS Material
<div layout=”row”>
<div flex=”50”>
</div>
<div flex=”50”>
</div>
</div>
A layout=”row” create one row and then divided the row into two parts using fix width (flex). It looks like.
<div layout=”column”>
<div flex=”50”>
</div>
<div flex=”50”>
</div>
</div>
A layout=”column” create on the column and then divided the column into two parts using fix width (flex). It looks like.
It means, its layout column & row structure is different to Bootstrap.
Let’s go to coding, Open visual studio and create a new empty project. An empty project is created then creates new folders (modular, view, and controller). In the modular folder, we will create module file and create HTML view page in the view folder. In this tutorial, we will create -modular file and HTML page and controller file nothing else.
App.JS
var app = angular.module ('myApp', ['ngMaterial', 'ngMessages']);
In the modular file, we have created a module (‘myApp’) and inject the ‘ngMaterial’ and ‘ngMessages’ for use Angular Material components. Now we create controller file for the business logic.
myAppController.JS
app. controller ('myAppController', ['$scope', function ($scope) {
$scope. toggle = {};
}]);
Using modular name we have created the controller and inject the ‘$scope’ and created a blank object that we will use at HTML page. Now we will create HTML file for creating dashboard page.
Index.html
<! DOCTYPE html>
<html>
<head>
<title>AngularJs Material</title>
<!--Css file-->
<link
rel="style sheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.css">
<!--End-->
</head>
<body ng-app="myApp">
<! -- AngularJS Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js">
</script>
<script
src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js">
</script>
<script src="../modular/app.js"></script>
<script src="../controller/myAppController.js"></script>
</body>
</html>
In the index.html file, we have set the reference of Angular Material CSS file in the head tag and set the reference of Angular Material Js Dependencies in the body tag and at the last, we referenced the modular file. In body tag we have called the modular name using ‘ng-app’ directive.
Now we create the document body (main layout) and then add header, body, and footer in the tag. First, we create the header of a page.
Header
<div layout="row" name="Header">
<div flex="20" name="Logo">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<h1>
Angular Material
</h1>
</div>
</md-toolbar>
</div>
<div flex="80" name="Logout">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools" layout-align="end center">
<a href="#">Logout</a>
</div>
</md-toolbar>
</div>
</div>
For the Header, first we have created row layout then divide the row layout into two parts using the ‘flex’ attributes. A first we have divided by 20 flex and put heading of ‘Angular Material’ and second part divided by 80 flex and put the Logout button at the end center.
After the created header, we will create body (content) part. We will divide the body part into two parts first is side nav and second for the dynamic view. For creating side nav bar we use the Angular Material SideNav Bar.
Body (Content)
<div layout="row" name="Body" style="height: 535px">
<div flex="25" name="SideNavBar">
<section>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia ('gt-md')"
style="height: 535px">
<md-list flex>
<md-list-item ng-click="toggle.list1 =! toggle.list1">
<md-icon>
<i class="material-icons">account_balance</i>
</md-icon>
<span flex>Menu 1</span>
<md-icon ng-show="! toggle.list1">expand_more</md-icon>
<md-icon ng-show="toggle.list1">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list1" style="background: #e7e7e7">
<div layout="column" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 2
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 3
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 4
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 5
</div>
</a>
</div>
</md-list-item>
<md-list-item ng-click="toggle.list2 =! toggle.list2">
<md-icon>
<i class="material-icons">assessment</i>
</md-icon>
<span flex>Menu 2</span>
<md-icon ng-show="! toggle.list2">expand_more</md-icon>
<md-icon ng-show="toggle.list2">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list2">
<div layout="column" class="leftPaddingForSubMenu" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 2
</div>
</a>
</div>
</md-list-item>
<md-list-item ng-click="toggle.list3 =! toggle.list3">
<md-icon>
<i class="material-icons">build</i>
</md-icon>
<span flex>Menu 3</span>
<md-icon ng-show="! toggle.list3">expand_more</md-icon>
<md-icon ng-show="toggle.list3">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list3">
<div layout="column" class="leftPaddingForSubMenu" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 2
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 3
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 4
</div>
</a>
</div>
</md-list-item>
<md-list-item ng-click="toggle.list4 =! toggle.list4">
<md-icon>
<i class="material-icons">settings</i>
</md-icon>
<span flex>Menu 4</span>
<md-icon ng-show="! toggle.list4">expand_more</md-icon>
<md-icon ng-show="toggle.list4">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list4">
<div layout="column" class="leftPaddingForSubMenu" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 2
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 3
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 4
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 5
</div>
</a>
</div>
</md-list-item>
<md-list-item ng-click="toggle.list5 =! toggle.list5">
<md-icon>
<i class="material-icons">work</i>
</md-icon>
<span flex>Menu 5</span>
<md-icon ng-show="! toggle.list5">expand_more</md-icon>
<md-icon ng-show="toggle.list5">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list5">
<div layout="column" class="leftPaddingForSubMenu" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
</div>
</md-list-item>
</md-list>
</md-sidenav>
</section>
</div>
<div flex="75" name="dynamicView">
<div style="border: ridge; width: 100px">
<i class="material-icons" style="font-size: 100px">home</i>
</div>
<h1>you can use this side as dynamic view (ui-view) </h1>
</div>
</div>
You can see in the first part we have used the Angular Material "md-sidenav" in the
section tag for creating side navigation and second part we can use as a dynamic view or anything else. A header and body (content) are created then at the bottom of the page we will create footer. We know in the header code we used the built-in "md-toolbar" material design component for Exactly "md-toolbar" use for the title but we have used it to set header and footer of the page. So using "md-toolbar" we will create a simple footbar and write little content in it.
Foot bar
<div name="footer">
<md-toolbar>
<div class="md-toolbar-tools" layout-align="center center">
<a href="https://www.codingpot.com">CodingPot</a>
</div>
</md-toolbar>
</div>
In the above all codes in HTML page, we used the much attributes for example, layout, flex and used the AngularJs Material Components (
section, md-toolbar, md-sidenav, etc). At the end HTML page (index.html) codes are below.
Index.html (Finally)
<! DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!--Css file-->
<link rel="style sheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="style sheet">
<!--End-->
<style>
.hrefTextDecoration {
text-decoration: none;
}
</style>
</head>
<body ng-app="myApp">
<div layout="column" name="main Page">
<div layout="row" name="Header">
<div flex="20" name="Logo">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<h1>
Angular Material
</h1>
</div>
</md-toolbar>
</div>
<div flex="80" name="Logout">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools" layout-align="end center">
<a href="#">Logout</a>
</div>
</md-toolbar>
</div>
</div>
<div layout="row" name="Body" style="height: 535px">
<div flex="25" name="SideNavBar">
<section>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia ('gt-md')"
style="height: 535px">
<md-list flex>
<md-list-item ng-click="toggle.list1 =! toggle.list1">
<md-icon>
<i class="material-icons">account_balance</i>
</md-icon>
<span flex>Menu 1</span>
<md-icon ng-show="! toggle.list1">expand_more</md-icon>
<md-icon ng-show="toggle.list1">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list1" style="background: #e7e7e7">
<div layout="column" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 2
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 3
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 4
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 5
</div>
</a>
</div>
</md-list-item>
<md-list-item ng-click="toggle.list2 =! toggle.list2">
<md-icon>
<i class="material-icons">assessment</i>
</md-icon>
<span flex>Menu 2</span>
<md-icon ng-show="! toggle.list2">expand_more</md-icon>
<md-icon ng-show="toggle.list2">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list2">
<div layout="column" class="leftPaddingForSubMenu" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 2
</div>
</a>
</div>
</md-list-item>
<md-list-item ng-click="toggle.list3 =! toggle.list3">
<md-icon>
<i class="material-icons">build</i>
</md-icon>
<span flex>Menu 3</span>
<md-icon ng-show="! toggle.list3">expand_more</md-icon>
<md-icon ng-show="toggle.list3">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list3">
<div layout="column" class="leftPaddingForSubMenu" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 2
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 3
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 4
</div>
</a>
</div>
</md-list-item>
<md-list-item ng-click="toggle.list4 =! toggle.list4">
<md-icon>
<i class="material-icons">settings</i>
</md-icon>
<span flex>Menu 4</span>
<md-icon ng-show="! toggle.list4">expand_more</md-icon>
<md-icon ng-show="toggle.list4">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list4">
<div layout="column" class="leftPaddingForSubMenu" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 2
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 3
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 4
</div>
</a>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 5
</div>
</a>
</div>
</md-list-item>
<md-list-item ng-click="toggle.list5 =! toggle.list5">
<md-icon>
<i class="material-icons">work</i>
</md-icon>
<span flex>Menu 5</span>
<md-icon ng-show="! toggle.list5">expand_more</md-icon>
<md-icon ng-show="toggle.list5">expand_less</md-icon>
</md-list-item>
<md-list-item ng-show="toggle.list5">
<div layout="column" class="leftPaddingForSubMenu" flex>
<a href="#" class="hrefTextDecoration">
<div class="inset">
Sub Menu 1
</div>
</a>
</div>
</md-list-item>
</md-list>
</md-sidenav>
</section>
</div>
<div flex="75" name="dynamicView">
<div style="border: ridge; width: 100px">
<i class="material-icons" style="font-size: 100px">home</i>
</div>
<h1>you can use this side as dynamic view (ui-view) </h1>
</div>
</div>
<div name="footer">
<md-toolbar>
<div class="md-toolbar-tools" layout-align="center center">
<a href="https://www.codingpot.com">CodingPot</a>
</div>
</md-toolbar>
</div>
</div>
<! -- AngularJS Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>
<script src="../modular/app.js"></script>
<script src="../controller/myAppController.js"></script>
</body>
</html>
For the side navigation, we used the blank object “$scope.toggle” and handle the all the menus by list, list 2… list n. In this tutorial, we didn’t handle ‘At a time only one menu of submenu show’. You can open more than one menu without closing the previous menu. If you want to add some other functionality in this tutorial then download it in your device and make your changes.
Thanks’ a lot
Hello, my name is Gautam Nagraj. I am one year old blogger.We create and find innovative solution.
God Bless You.
ReplyDeleteSir, Where are you ? Please post next tutorial on "How to use Angular JS for mobile applications UI"
ReplyDeletePlease sir i really need it.
Where are you sir ? we need you to put more tutorials.
ReplyDelete