Angular Material - 環境搭建

如何使用 Angular Material？

有兩種方法可以使用 Angular Material：

本地安裝 - 你可以使用 npm、jspm 或 bower 在本地機器上下載 Angular Material 庫，並將其包含在你的 HTML 程式碼中。
基於 CDN 的版本 - 你可以直接從內容分發網路 (CDN) 將 angular-material.min.css 和 angular-material.js 檔案包含到你的 HTML 程式碼中。

本地安裝

在我們使用以下 npm 命令之前，需要在系統上安裝 NodeJS。要獲取有關 NodeJS 的資訊，請點選這裡並開啟 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 和 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>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      
      <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 的版本

你可以直接從內容分發網路 (CDN) 將 angular-material.css 和 angular-material.js 檔案包含到你的 HTML 程式碼中。Google CDN 提供最新版本的內容。

在本教程中，我們始終使用 Google CDN 版本的庫。

示例

現在讓我們使用來自 Google CDN 的 angular-material.min.css 和 angular-material.min.js 重寫上面的示例。

線上演示

<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>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

      <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>

以上程式將生成以下結果：

列印頁面