回答

1

是的,你說得對!爲了建立與angularjs你的應用程序中使用的第一個

DEMO

// Code goes here 
 

 
angular.module('webapp', ['ngMaterial']) 
 
    .controller('AppCtrl', function($scope) { 
 
    $scope.todos = []; 
 
    for (var i = 0; i < 45; i++) { 
 
     $scope.todos.push({ 
 
     face: 'https://avatars0.githubusercontent.com/u/598463?v=3&s=60', 
 
     what: "Brunch this weekend?", 
 
     who: "Markus Thiel", 
 
     notes: "I'll be in your neighborhood doing errands." 
 
     }); 
 
    } 
 
    });
<!DOCTYPE html> 
 
<html ng-app="webapp"> 
 
<head> 
 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css"> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script> 
 

 
    <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here --> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script> 
 

 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="AppCtrl" layout="column"> 
 
    <md-toolbar md-scroll-shrink> 
 
     <div class="md-toolbar-tools"> 
 
     <div flex="50"> 
 
      <h3 class="title"><span>My Title</span></h3> 
 
     </div> 
 
     <div flex="50" layout layout-align="end center"> 
 
      <md-button class="md-fab" aria-label="Time"> 
 
      <md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon> 
 
      </md-button> 
 
     </div> 
 
     </div> 
 
    </md-toolbar> 
 
    <md-content layout-fill> 
 
     <md-list> 
 
     <md-item ng-repeat="item in todos"> 
 
      <md-item-content> 
 
      <div class="md-tile-left"> 
 
       <img ng-src="{{item.face}}" alt="{{item.who}}" class="face"> 
 
      </div> 
 
      <div class="md-tile-content"> 
 
       <h3>{{item.what}}</h3> 
 
       <h4>{{item.who}}</h4> 
 
       <p>{{item.notes}}</p> 
 
      </div> 
 
      </md-item-content> 
 
      <md-divider inset></md-divider> 
 
     </md-item> 
 
     </md-list> 
 
    </md-content> 
 
</body> 
 

 
</html>

而第二URL是angular和angular4您可以安裝必要的使用命令npm的模塊在您的角度應用程序中安裝並導入模塊。

# install Angular Material 2 components 
npm install --save @angular2-material/{core,button,card} 
+0

它已更改爲'@ angular/material'。你在這裏指的是alpha版本。 – Edric