Issue in creating a simple app using Angular-Material

Question

I'm trying to create an app that uses the Angular Material navigation bar that can be found on this link.

I'm fairly new to AngularJS and I cannot figure out when I load the app why I am presented with a blank page.

Here is my code:

index.html

<!DOCTYPE html>
<html ng-app="navBarDemoBasicUsage">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</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-href="#page4" name="page5">Page Four</md-nav-item>
      <md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
      You can also add options for the <code>ui-sref-opts</code> attribute.
      <md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
        Page Six
      </md-nav-item>
      -->
    </md-nav-bar>
    <div class="ext-content">
      External content for `<span>{{currentNavItem}}</span>`.
    </div>

    <md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>

  </md-content>
</div>
</body>
</html>

script.js

(function() {
  'use strict';

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

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

style.css

.navBardemoBasicUsage md-content .ext-content {
  padding: 50px;
  margin: 20px;
  background-color: #FFF2E0; 
}

try to move ng-app to body

Ivan
– Ivan

2017-08-31 08:37:56 +00:00
Commented Aug 31, 2017 at 8:37 — Ivan
– Ivan, Commented Aug 31, 2017 at 8:37
You missed to include the ngMaterial script.

Mistalis
– Mistalis

2017-08-31 08:40:23 +00:00
Commented Aug 31, 2017 at 8:40 — Mistalis
– Mistalis, Commented Aug 31, 2017 at 8:40
I agree with @Mistalis comment

Ramesh Rajendran
– Ramesh Rajendran

2017-08-31 08:40:52 +00:00
Commented Aug 31, 2017 at 8:40 — Ramesh Rajendran
– Ramesh Rajendran, Commented Aug 31, 2017 at 8:40
What error you got in console window?

Ramesh Rajendran
– Ramesh Rajendran

2017-08-31 08:41:32 +00:00
Commented Aug 31, 2017 at 8:41 — Ramesh Rajendran
– Ramesh Rajendran, Commented Aug 31, 2017 at 8:41

Stanislav Kvitash · Accepted Answer · 2017-08-31 08:53:09Z

You missed to include several JSscripts in your page. Angular Material requires to include angular-materials.js. You will also need angular-animate.js and angular-aria.js.

Just add them and it should work.

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css
">

<div ng-app="navBarDemoBasicUsage">
  <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>
      </md-nav-bar>
      <div class="ext-content">
        External content for `<span>{{currentNavItem}}</span>`.
      </div>

      <md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>

    </md-content>
  </div>
</div>

Kuzenko Lubko · Accepted Answer · 2017-08-31 08:39:20Z

0

You are using angular material directives like this

md-content

but there is no place where you add it to the page. Try to remove firstly all stuff connected to angular material and check application.

answered Aug 31, 2017 at 8:39

Kuzenko Lubko

2,1191 gold badge22 silver badges30 bronze badges

1 Comment

Ramesh Rajendran Over a year ago

You should add this in comment instead of an answer

Collectives™ on Stack Overflow

Issue in creating a simple app using Angular-Material

index.html

script.js

style.css

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.html

script.js

style.css

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related