Angular Material 环境设置
Angular Material 有两种使用方式：
-
本地安装 ： 你可以在本地机器上使用 npm、jspm 或 bower 下载 Angular Material 库，并将其包含在你的 HTML 代码中。
-
基于 CDN 的版本 ：你可以直接从内容交付网络(CDN)将angular-material.min.css和angular-material js文件包含到你的HTML代码中。
本地安装
在我们使用以下 npm 命令之前，我们需要在系统上安装 NodeJS。要获取有关节点 JS 的信息，请单击 here 并打开 NodeJS 命令行界面。我们将使用以下命令来安装 Angular Material 库。
npm install angular-material
上面的命令会产生如下输出：
angular-animate@1.5.2 node_modules\angular-animate angular-aria@1.5.2 node_modules\angular-aria angular-messages@1.5.2 node_modules\angular-messages angular@1.5.2 node_modules\angular angular-material@1.0.6 node_modules\angular-material
npm 将下载下的文件 node_modules > Angular Material 文件夹。包含以下示例中说明的文件：
例子
现在你可以包括 css and js 你的 HTML 文件中的文件如下：
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js">
<script type = "text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML
4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
presenting content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
the Web Hypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as
Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>
上述程序会产生如下结果：
基于 CDN 的版本
你可以包括 Angular Material .css and Angular Material .js 直接从内容交付网络 (CDN) 将文件导入你的 HTML 代码。 Google CDN 提供最新版本的内容。
在本教程中，我们使用库的 Google CDN 版本。
例子
现在让我们重写上面的例子 Angular Material .min.css and Angular Material .min.js 来自谷歌 CDN。
<html lang = "en" >
<head>
<link rel = "stylesheet"
href = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js">
<script type = "text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting
content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
ypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as Adobe
Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>
上述程序会产生如下结果：