使用 CDN 進行設定
在 index.html 中，連結來自 Google CDN 的 CSS
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
必需的依賴項：
angularangular-ariaangular-animateangular-messages
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
連結： https ： //material.angularjs.org/latest/getting-started
index.html
<!DOCTYPE html>
<html ng-app="angularMaterial">
<head>
<link rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="app.js"></script>
<title>Angular Material</title>
</head>
<body ng-controller="MainController">
<md-content>{{content}}</md-content>
</body>
</html>
app.js
angular.module('angularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('MainController', function($scope) {
$scope.content = "Your content goes here.";
})