材料

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' ] ) ;