Fatal编程技术网

Javascript AngularJS：导航栏

javascript angularjs navigation

Javascript AngularJS：导航栏,javascript,angularjs,navigation,Javascript,Angularjs,Navigation,我正在尝试实现此示例： 因此，我创建了以下index.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage" ng-

我正在尝试实现此示例：

因此，我创建了以下
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>
我得到一个例外：

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>

您缺少
Angle 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>

我认为您应该将本例中的ng应用程序放在body标签中，就像

<body ng-app="MyApp">
正如文档所指出的，您不应该将应用程序和其他指令放在同一个标签中

希望能有所帮助。

我认为您应该将本例中的ng应用程序放在body标签中，就像

<body ng-app="MyApp">
正如文档所指出的，您不应该将应用程序和其他指令放在同一个标签中

希望有帮助。

谢谢您的回答！不幸的是，事实并非如此help@Rudziankoŭ它应该确保您也加载css。这是一个演示，谢谢回答！不幸的是，事实并非如此help@Rudziankoŭ它应该确保您也加载css。这是一个演示，谢谢回答！不幸的是，它没有帮助谢谢你的回答！不幸的是，这没有帮助