I am trying to use angular material design and currently working on navigation. I tried the examples on the official website but the navbar was not rendering. I also tried to search for the solution but non of them helped. Here is the code:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ift.tt/1ZZVYF8">
</head>
<body ng-app="MyApp" ng-cloak>
<div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage">
<md-content class="md-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 One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
<span></span>
</md-content>
</div>
<script src="http://ift.tt/1UDNF1z"></script>
<script src="http://ift.tt/1ZZWaEk"></script>
<script src="http://ift.tt/1UDMW0C"></script>
<script src="http://ift.tt/1ZZVX46"></script>
<script src="http://ift.tt/1UDMejP"></script>
<script type="text/javascript">
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
</script>
</body>
</html>
Does anyone have clue what can be wrong with this code?
Aucun commentaire:
Enregistrer un commentaire