材料

AngularJS 應用程式的材料設計

Material Design 是一個統一的視覺、運動和互動設計系統的規範，可以適應不同的裝置。我們的目標是提供一組精簡、輕量級的 AngularJS 原生 UI 元素，這些元素實現了 AngularJS 單頁應用程式 (SPA) 中使用的材質設計規格。

AngularJS Material是針對 AngularJS (v1.x) 開發人員的 Google Material Design 規範 (2014-2017) 的實作。

有關 Material Design 規範 (2018+) 的實現，請參閱為 Angular (v2+) 開發人員所建構的 Angular Material 專案。

生命終點

AngularJS Material 支援已於 2022 年 1 月正式結束。請造訪material.angular.io 以獲取積極支援的 Angular Material。

在此處查找有關報告安全問題的詳細資訊。

AngularJS Material 包含一組豐富的可重複使用、經過良好測試且可存取的 UI 元件。

快速連結：

• API 和演示
• 大樓
• 安裝中

請注意，使用最新版本的 AngularJS Material 需要使用AngularJS 1.7.2或更高版本。

AngularJS Material 支援 package.json 的browserslist欄位中定義的瀏覽器版本。在我們的文件網站上了解更多。

AngularJS Material 支援此處列出的螢幕閱讀器版本。

線上文件和演示

• 在線訪問material.angularjs.org以查看API，透過現場演示查看正在運行的組件，並閱讀我們的詳細指南，其中包括佈局系統、主題系統、排版等。
• 或者您可以在本地建立文件和演示；有關詳細信息，請參閱構建文件和演示。

大樓

開發人員可以使用 NPM 和 gulp 建構 AngularJS Material。

首先安裝或更新本機專案的npm相依性：

npm install

全域安裝 Gulp v3：

npm install -g gulp@3

然後執行gulp任務：

 # To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs

對於開發，請使用docs:watch NPM腳本在開發模式下執行：

 # To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch

有關構建過程如何工作以及其他命令（可用於測試和調試）的更多詳細信息，開發人員應閱讀構建指南。

安裝建置（分發檔案）

國家公共管理

對於對建立 AngularJS Material 庫不感興趣的開發人員...使用NPM來安裝和使用 AngularJS Material 分發文件。

更改為專案的根目錄。

 # To get the latest stable version, use NPM from the command line.
npm install angular-material --save

# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save

其他依賴管理器

請造訪我們的分發儲存庫，以了解有關如何在本機專案中安裝和使用 AngularJS Material 分發檔案的更多詳細資訊。

CDN

AngularJS Material 的 CDN 版本現已推出。

使用 Google CDN，您無需下載散佈檔案的本機副本。相反，只需引用 CDN url 即可輕鬆使用這些遠端庫檔案。這在使用 CodePen 或 Plunker 等線上工具時特別有用。

">

  < head >

    
   < link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " >  script >
   body >

尋求最新、最新建置版本的開發人員可以使用 GitCDN.xyz 直接從我們的分發儲存庫中提取：

">

  < head >

    
    < link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " >  script >

   body >

安裝完所有必要的資源後，將ngMaterial和ngMessages新增為應用程式的依賴：

 angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;