Angular Material2开发教程_01_介绍与安装

逃离我推掉我的手 2021-09-28 04:06 276阅读 0赞

# Angular Material2开发入门-01 #

## 介绍 ##

Angular Material2 是 angular团队开发的组件设计，是angular 2开发首选框架，网上关于material的中文使用文档很少，一般都是从官网的案例和api。  
备注：Angular Meterial1是AngularJs的框架

## 参考链接 ##

**Angular Material2官网：**  
[https://material.angular.io][https_material.angular.io]  
**Angular Material2 GitHup：**  
[https://github.com/angular/material2][https_github.com_angular_material2]

## Angular Material目标 ##

Angular Material的目标是根据Material Design规范构建一组使用Angular和TypeScript构建的高质量UI组件。这些组件将作为如何按照最佳实践编写Angular代码的示例。

**“高质量”是什么意思？**

*  国际化和可访问，以便所有用户都可以使用它们。
 *  简单直接的API，不会混淆开发人员。
 *  在没有错误的各种用例中表现出预期的效果。
 *  行为经过了单元测试和集成测试的充分测试。
 *  可在Material Design规范的范围内自定义。
 *  性能成本降至最低。
 *  代码干净且记录良好，可作为Angular开发人员的一个示例。
 *  浏览器和屏幕阅读器支持
 *  Angular  
    Material支持所有主流浏览器的最新两个版本：Chrome（包括Android），Firefox，Safari（包括iOS）和IE11  
    / Edge

**还致力于通过以下屏幕阅读器提供出色的用户体验：**

*  使用IE / FF / Chrome的NVDA和JAWS（在Windows上）。
 *  VoiceOver在iOS上使用Safari，在OSX上使用Safari / Chrome。
 *  适用于Android的Chrome浏览器。

## 安装 ##

### 第1步：安装Angular Material，Angular CDK和Angular Animations ###

您可以使用npm或yarn命令行工具来安装软件包。在下面的示例中使用适合您的项目的任何一个。  
**NPM**

npm install --save @angular/material @angular/cdk @angular/animations

**yarn**

yarn add @angular/material @angular/cdk @angular/animations

**备选方案1：快照构建**  
还可以使用master的最新更改构建快照。请注意，此快照构建不应被视为稳定，并且可能在版本之间中断。  
**NPM**

npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds

**yarn**

yarn add angular/material2-builds angular/cdk-builds angular/animations-builds

**备选方案2：Angular Devkit 6+**  
使用Angular CLI ng add命令将使用正确的依赖项更新Angular项目，执行配置更改并执行初始化代码。

ng add @angular/material

### 第2步：配置animations ###

安装animations包后，导入BrowserAnimationsModule到您的应用程序中以启用animations支持。

import { BrowserAnimationsModule} from '@angular/platform-browser/animations';@NgModule({ 
          ...
          imports: [BrowserAnimationsModule],
          ...
        })export class PizzaPartyAppModule {  }

或者，您可以通过导入禁用动画NoopAnimationsModule。

import { NoopAnimationsModule} from '@angular/platform-browser/animations';@NgModule({ 
          ...
          imports: [NoopAnimationsModule],
          ...
        })export class PizzaPartyAppModule {  }

### 第3步：导入组件模块 ###

为要使用的每个组件导入NgModule：

import { MatButtonModule, MatCheckboxModule} from '@angular/material';@NgModule({ 
          ...
          imports: [MatButtonModule, MatCheckboxModule],
          ...
        })export class PizzaPartyAppModule {  }

或者，您可以创建一个单独的NgModule，用于导入将在应用程序中使用的所有Angular Material组件。然后，您可以将此模块包含在您要使用组件的任何位置。

import { MatButtonModule, MatCheckboxModule} from '@angular/material';@NgModule({ 
          imports: [MatButtonModule, MatCheckboxModule],
          exports: [MatButtonModule, MatCheckboxModule],
        })export class MyOwnCustomMaterialModule {  }

无论使用哪种方法，一定要导入Material模块的 BrowserModule，

### 第4步：包含主题 ###

包含主题是将所有核心和主题样式应用于您的应用程序所必需的。  
要开始使用预先构建的主题，请在应用程序中全局包含Angular Material的预构建主题之一。如果您使用的是Angular CLI，可以将其添加到styles.css：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

如果您没有使用Angular CLI，则可以通过您的元素中包含预先构建的主题index.html。  
有关主题的更多信息以及有关如何创建自定义主题的说明，请参阅 主题指南。

### 第5步：手势支持 ###

一些组件（mat-slide-toggle，mat-slider，matTooltip）依靠 HammerJS的手势。为了获得这些组件的完整功能集，必须将HammerJS加载到应用程序中。  
您可以通过npm，CDN（例如Google CDN）将HammerJS添加到您的应用程序，或直接从您的应用程序提供。  
要通过npm安装，请使用以下命令：  
**NPM**

npm install --save hammerjs

**yarn**

yarn add hammerjs

安装完成后，将其导入应用程序的入口点（例如src/main.ts）。

import 'hammerjs';

### 步骤6（可选）：添加Material 图标 ###

如果要将mat-icon组件与官方 Material Design Icons一起使用，请在您的index.html。中加载图标字体。

有关使用“材质图标”的更多信息，请查看“ 材质图标指南”。  
请注意，mat-icon支持任何字体或svg图标; 使用材料图标是众多选项之一。  
附录：配置SystemJS  
如果你的项目使用模块加载SystemJS，你将需要添加@angular/material和 @angular/cdk到SystemJS配置。  
该@angular/cdk包由多个入口点组成。这些入口点中的每一个都必须使用SystemJS单独注册。  
这里是其中示例性配置@angular/material，@angular/cdk/platform并且 @angular/cdk/a11y被使用：

System.config({ 
          // Existing configuration options
          map: { 
            // ...
            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
            // CDK individual packages
            '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
            '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
            // ...
            'hammerjs': 'npm:hammerjs',
          },
          packages: { 
            //...
            hammerjs: { main: './hammer.min.js', defaultExtension: 'js'}
            //...
          }
        });

[https_material.angular.io]: https://material.angular.io
[https_github.com_angular_material2]: https://github.com/angular/material2