Question

我正在尝试使用可在this link上找到的Angular Material导航栏创建应用。

我是AngularJS的新手，我在加载应用程序时无法弄清楚为什么我会看到空白页面。

这是我的代码：

的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; 
}

Answer 1

您错过了在您的网页中添加几个JSscripts。 Angular Material需要包含angular-materials.js。您还需要angular-animate.js和angular-aria.js。

只需添加它们即可。

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>

Answer 2

你正在使用像这样的角度材料指令

md-content

但是没有地方可以将其添加到页面中。尝试首先删除连接到角度材料的所有东西并检查应用程序。

使用Angular-Material创建简单应用程序的问题

的index.html

的script.js

的style.css

2 个答案: