네 당신은 옳다! 설정하기 위해 angularjs
와 앱 2 URL이 angular입니다 동안 첫 번째
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>
를 사용하고 필요한 설치할 수 있습니다 angular4 npm 명령을 사용하여 모듈을 설치하고 각 응용 프로그램에서 모듈을 가져옵니다.
# install Angular Material 2 components
npm install --save @angular2-material/{core,button,card}
'@ angular/material'로 변경되었습니다. 여기에서 언급 한 것은 알파 버전입니다. – Edric