Amar Ghodke Amar Ghodke - 2 months ago 79
AngularJS Question

angular material design demo implementation issue

i am trying demo on my local machine angular material nav bar

but my browser shows blank page. i also checked console but no errors also checked all files are loaded correctly .so what is missing here ???

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="angular-material/angular-material.css">
<style type="text/css">.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0; }</style>
</head>
<body>
<div ng-controller="AppCtrl" ng-cloak>
<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>
<!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
<md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
<md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`
</div>
</md-content>

</div>

<script src="angular/angular.js"></script>
<script src="angular-material/angular-material.js"></script>
<script src="angular-aria/angular-aria.js"></script>
<script src="angular-animate/angular-animate.js"></script>

<script>

(function() {
'use strict';

angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);

function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();

</script>

</body>
</html>

Answer

You have nowhere declared the module in the view,

<body ng-app="navBarDemoBasicUsage">
Comments