Question

所有Angular Materials组件似乎都包含在代码和＆＃34; hello world＆＃34;示例本身直接从网站上复制。

但由于某种原因，当我尝试加载文件并测试它时，没有任何格式化。我在这里缺少什么？

<!doctype html>
<html  lang="en">
<head>
<title>
  Angular Material
</title>
<meta name="viewport" content="initial-scale=1" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
</head>

<body>

<div layout="column" layout-fill>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <span>My App's Title</span>
      <!-- fill up the space between left and right area -->
      <span flex></span>
      <md-button>
        Right Bar Button
      </md-button>
    </div>
  </md-toolbar>
  <md-content>
    Hello!
  </md-content>
</div>

<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-route.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/angularjs/1.3.15/angular-messages.min.js"></script>

<script src="bower_components/angular-material/angular-material.js"></script>

</body>

Answer 1

你需要一个Controller和App引用来初始化Angular＆amp;引用＆＃34; ngMaterial＆＃34;加载Angular Material模块

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  }; 
}]);

JS引用了ng-app＆amp;标记中的ng-controller：

<html lang="en" ng-app="StarterApp">
..
<body layout="column" ng-controller="AppCtrl">

请参阅http://codepen.io/marcysutton/pen/OPbpKm

缺少Angular材料的组件？

1 个答案: