material - 左子网

Angularjs应用的material 设计

material设计是针对跨不同设备的统一视觉，运动和交互设计系统的规范。我们的目标是提供一组精简，轻巧的AngularJS本地UI元素，这些元素可以实现用于在AngularJS单页应用程序（SPA）中使用的material设计规范。

AngularJS material是Google的material设计规范（2014-2017）的实现，用于AngularJS（v1.x）开发人员。

有关material设计规范（2018+）的实施，请参阅为Angular（V2+）开发人员构建的角度material项目。

寿命

截至2022年1月，Angularjs的material支持已正式结束。请参阅最终支持意味着什么并阅读终身公告的终结。访问material 。angular.io作为积极支撑的角material 。

在此处查找有关报告安全问题的详细信息。

AngularJS material包括一组可重复使用的，经过良好测试和可访问的UI组件。

快速链接：

API和演示
建筑
安装

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

AngularJS material支持包装的browserslist列表字段中定义的浏览器版本。在我们的文档网站上找到更多信息。

AngularJS material支持此处列出的屏幕读取器版本。

在线文档和演示

访问material .angularjs.org在线查看API，请参阅通过实时演示的组件，并阅读我们的详细指南，其中包括布局系统，主题系统，排版等。
或者，您可以在本地构建文档和演示；有关详细信息，请参见构建文档和演示。

建筑

开发人员可以使用NPM和GULP构建AngularJS material 。

首先安装或更新您本地项目的NPM依赖项：

npm install

全球安装Gulp V3：

npm install -g gulp@3

然后运行GULP任务：

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

 # 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脚本以在DEV模式下运行：

material Source, Docs, and Demos in watch mode
npm run docs:watch\”>

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

有关构建过程如何工作的更多详细信息以及开发人员的其他命令（可用于测试和调试）应阅读《构建指南》。

安装构建（分发文件）

NPM

对于不感兴趣的开发人员，构建AngularJS material库…使用NPM安装和使用AngularJS material分发文件。

更改您项目的根目录。

material –save

# To get the most recent, latest committed-to-master version use:
npm install http://*gi**thub.com/angular/bower-material#master –save\”>

 # 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://*gi**thub.com/angular/bower-material#master --save

其他依赖经理

请访问我们的分发存储库，以获取有关如何在本地项目中安装和使用AngularJS material分发文件的更多详细信息。

CDN

可以使用cdn版本的angularj material 。

使用Google CDN，您无需下载分发文件的本地副本。相反，只需引用CDN URL即可轻松使用那些远程库文件。当使用codepen或plunker等在线工具时，这特别有用。

material CSS now available via Google CDN; version 1.2.1 used here –>
<link rel=\”stylesheet\” href=\”https://ajax.googl*ea*pi*s.com/ajax/libs/angular_material/1.2.1/angular- material .min.css\”>

</head>
<body>

<!– AngularJS material Dependencies –>
<script src=\”https://ajax.googlea*p**is.com/ajax/libs/angularjs/1.8.2/angular.min.js\”></script>
<script src=\”https://ajax.goog*le**apis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js\”></script>
<script src=\”https://ajax.*g*oo*gleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js\”></script>
<script src=\”https://ajax.*goo*gleapi*s.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js\”></script>

<!– AngularJS material Javascript now available via Google CDN; version 1.2.1 used here –>
<script src=\”https://ajax.googl*ea*pi*s.com/ajax/libs/angular_material/1.2.1/angular- material .min.js\”></script>
</body>\”>

  < head >

    <!-- AngularJS material CSS now available via Google CDN; version 1.2.1 used here -->
   < link rel =\" stylesheet \" href =\" https://ajax.googl*ea*pi*s.com/ajax/libs/angular_material/1.2.1/angular- material .min.css \" >

  </ head >
  < body >

    <!-- AngularJS material Dependencies -->
    < script src =\" https://ajax.googlea*p**is.com/ajax/libs/angularjs/1.8.2/angular.min.js \" > </ script >
    < script src =\" https://ajax.goog*le**apis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js \" > </ script >
    < script src =\" https://ajax.*g*oo*gleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js \" > </ script >
    < script src =\" https://ajax.*goo*gleapi*s.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js \" > </ script >

    <!-- AngularJS material Javascript now available via Google CDN; version 1.2.1 used here -->
    < script src =\" https://ajax.googl*ea*pi*s.com/ajax/libs/angular_material/1.2.1/angular- material .min.js \" > </ script >
  </ body >

寻求最新的，最流动的构建版本的开发人员可以使用gitcdn.xyz直接从我们的分发存储库中提取：

material /master` –>
<link rel=\”stylesheet\” href=\”https://**gitcd*n.xyz/cdn/angular/bower-material/master/angular- material .css\”>

</head>
<body>

<!– AngularJS material Dependencies –>
<script src=\”https://ajax.go*og*le*apis.com/ajax/libs/angularjs/1.8.2/angular.js\”></script>
<script src=\”https://ajax.googl***eapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js\”></script>
<script src=\”https://ajax.goog*leap**is.com/ajax/libs/angularjs/1.8.2/angular-aria.js\”></script>
<script src=\”https://ajax.*goo*gleapi*s.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js\”></script>

<!– AngularJS material Javascript using GitCDN to load directly from `bower- material /master` –>
<script src=\”https://**gitcd*n.xyz/cdn/angular/bower-material/master/angular- material .js\”></script>

</body>\”>

  < head >

    <!-- AngularJS material CSS using GitCDN to load directly from `bower- material /master` -->
    < link rel =\" stylesheet \" href =\" https://**gitcd*n.xyz/cdn/angular/bower-material/master/angular- material .css \" >

  </ head >
  < body >

    <!-- AngularJS material Dependencies -->
    < script src =\" https://ajax.go*og*le*apis.com/ajax/libs/angularjs/1.8.2/angular.js \" > </ script >
    < script src =\" https://ajax.googl***eapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js \" > </ script >
    < script src =\" https://ajax.goog*leap**is.com/ajax/libs/angularjs/1.8.2/angular-aria.js \" > </ script >
    < script src =\" https://ajax.*goo*gleapi*s.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js \" > </ script >

    <!-- AngularJS material Javascript using GitCDN to load directly from `bower- material /master` -->
    < script src =\" https://**gitcd*n.xyz/cdn/angular/bower-material/master/angular- material .js \" > </ script >

  </ body >

安装了所有必要的资产后，将ng material和ngMessages添加为应用程序的依赖项：

 angular . module ( \'myApp\' , [ \'ng material \' , \'ngMessages\' ] ) ;

Angularjs应用的material设计

寿命

在线文档和演示

建筑

安装构建（分发文件）

NPM

其他依赖经理

CDN

相关文章

微信

左子网

QQ交流群

Angularjs应用的material 设计