我正在尝试实现这个示例:https://material.angularjs.org/1.1.1/demo/navBar
所以我创建了以下index.html:
<!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:
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
我收到此异常:
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
我做错了什么？
最佳答案
您缺少 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
关于javascript - AngularJS:导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40639187/