Angular Material Nav bar
Angular Material Nav bar: <md-nav-bar> Directive is used to create navbar in Angular Material. It uses inbuilt routing for page navigation.The events ng-href, ui-href and ng-click are supported. Here in this tutorial we are going to create Angular Material Navigation with example and demo. You can also use our online editor to edit and run the code online.
Angular Material Nav bar Example
Let us first create a simple example of nav bar –
Angular Material Nav bar Example:
<html lang="en" >
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script language="javascript">
angular
.module('myApp', ['ngMaterial', 'ngMessages'])
.controller('MyController', function ($scope, $mdDialog) {
//controller code goes here...
$scope.currNavItem = 'page1';
$scope.goto = function(page){
$scope.currNavItem = page;
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController as ctrl" ng-cloak="" >
<md-content layout-padding>
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page 1</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page 2</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page 3</md-nav-item>
</md-nav-bar>
<div class="ext-content">
Content For Nav <span>{{currNavItem}}</span>
</div>
</md-content>
</div>
</body>
</html>
|
| Try It On → |
If you run the above example it will produce output something like this –
Advertisements
