AngularJS：ナビゲーションバー

私はこの例を実装しようとしている：私はこの例外を取得していますAngularJS：ナビゲーションバー

(function() { 
    'use strict'; 

    angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
     .controller('AppCtrl', AppCtrl); 

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

：

<!DOCTYPE html> <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
    <div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage" ng-app="MyApp"> 
    <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-content></div> 

    <script src="vendor/angular/angular.min.js"></script> 
    <script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script> 
    <script src="app.js"></script> 
</body> 
</html>

とapp.jsを以下：https://material.angularjs.org/1.1.1/demo/navBar

だから私はindex.htmlを次のように作成しました

Failed to instantiate module MyApp due to: 
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...) 
    at http://localhost:8000/vendor/angular/angular.min.js:6:412 
    at http://localhost:8000/vendor/angular/angular.min.js:40:222 
    at q (http://localhost:8000/vendor/angular/angular.min.js:7:355) 
    at g (http://localhost:8000/vendor/angular/angular.min.js:39:319) 
    at http://localhost:8000/vendor/angular/angular.min.js:39:488 
    at q (http://localhost:8000/vendor/angular/angular.min.js:7:355) 
    at g (http://localhost:8000/vendor/angular/angular.min.js:39:319) 
    at cb (http://localhost:8000/vendor/angular/angular.min.js:43:336) 
    at c (http://localhost:8000/vendor/angular/angular.min.js:20:390) 
    at Bc (http://localhost:8000/vendor/angular/angular.min.js:21:179

どうしたのですか？

出典

2016-11-16 Rudziankoŭ

あなたはangular-material.jsとCSSの参照が不足している

 <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.4/angular-material.min.js"></script>

DEMO

出典

2016-11-16 18:12:14 Sajeetharan

ありがとうございます！残念ながらそれは助けていない –

@Rudziankoŭそれは、あなたもCSSをロードすることを確認してください。ここデモですhttps://plnkr.co/edit/ok14o9?p=preview – Sajeetharan