Angular Material 带了一份供 Angular CLI 使用的原理图（schematic），可以让创建 Material 应用更简单些。
Angular Material comes packaged with Angular CLI schematics to make creating Material applications easier.
Angular Material 附带了一些原理图，一旦你安装了这个 npm 包，就可以通过 Angular CLI 来使用这些原理图了。
Schematics are included with both @angular/cdk and @angular/material. Once you install the npm packages, they will be available through the Angular CLI.
运行下列命令可以自动为你的项目安装 Angular Material、组件开发工具 (CDK) 和 Angular 动画库，并运行代码原理图。
Using the command below will install Angular Material, the Component Dev Kit (CDK), and Angular Animations in your project. Then it will run the installation schematic.
ng add @angular/material
如果你只想安装 @angular/cdk，也可以使用组件开发工具的专用代码原理图
In case you just want to install the @angular/cdk, there are also schematics for the Component Dev Kit
ng add @angular/cdk
Angular Material 的 ng add 原理图会帮助你的 Angular CLI 项目配置 Angular Material。运行 ng add 将会：
The Angular Material ng add schematic helps you set up an Angular CLI project that uses Material. Running ng add will:
确保 package.json 中具有项目所需的依赖
Ensure project dependencies are placed in package.json
为应用启用 BrowserAnimationsModule 模块
Enable the BrowserAnimationsModule your app module
Add either a prebuilt theme or a custom theme
为 index.html 添加 Roboto 字体
Add Roboto fonts to your index.html
在 index.html 中添加 Material 图标字体
Add the Material Icon font to your index.html
添加下列全局样式
Add global styles to
移除 body 的边距（margin）
Remove margins from body
为 html 和 body 设置 height: 100%
Set height: 100% on html and body
把 Roboto 设置为应用的默认字体
Make Roboto the default font of your app
安装并导入 hammerjs，来为项目提供手势支持
Install and import hammerjs for gesture support in your project
除了用于安装的 schematic 之外，Angular Material 还带有多个原理图，用于轻松生成 Material Design 组件：
In addition to the installation schematic, Angular Material comes with multiple schematics that can be used to easily generate Material Design components:
名称 Name |
说明 Description |
|---|---|
address-form |
一个表单组，它使用 Material Design 的多个表单控件接收一个送货地址 Component with a form group that uses Material Design form controls to prompt for a shipping address |
navigation |
创建一个带有响应式 Material Design 侧边栏组件和一个用于显示应用名称的工具栏组件 Creates a component with a responsive Material Design sidenav and a toolbar for showing the app name |
dashboard |
带有多个 Material Design 卡片和菜单的网格式布局组件 Component with multiple Material Design cards and menus which are aligned in a grid layout |
table |
生成一个带有 Material Design 并支持排序和分页的数据表组件 Generates a component with a Material Design data table that supports sorting and pagination |
tree |
该组件以 Component that interactively visualizes a nested folder structure by using the |
此外，Angular CDK 也给出了一些组件的原理图：
Additionally, the Angular CDK also comes with a collection of component schematics:
名称 Name |
说明 Description |
|---|---|
drag-drop |
该组件使用 Component that uses the |
运行 address-form 原理图会生成一个新的 Angular 组件，它可用于快速开始一个 Material Design 表单组，其中包括：
Running the address-form schematic generates a new Angular component that can be used to get started with a Material Design form group consisting of:
一些 Material Design 表单字段
Material Design form fields
一些 Material Design 单选控件
Material Design radio controls
一些 Material Design 按钮
Material Design buttons
ng generate @angular/material:address-form <component-name>
navigation 原理图将会创建一个包括应用名的工具栏和一个能自适应 Material 的断点的侧边栏。
The navigation schematic will create a new component that includes a toolbar with the app name, and a responsive side nav based on Material
breakpoints.
ng generate @angular/material:navigation <component-name>
表格原理图将创建一个组件，它可以渲染出一个预置了可排序、可分页数据源的 Angular Material <table>。
The table schematic will create a component that renders an Angular Material <table> which has been pre-configured with a datasource for sorting and pagination.
ng generate @angular/material:table <component-name>
dashboard 原理图将创建一个新组件，它包含一个由 Material Design 卡片组成的动态网格列表。
The dashboard schematic will create a new component that contains a dynamic grid list of Material Design cards.
ng generate @angular/material:dashboard <component-name>
tree 原理图可用于快速生成一个 Angular 组件，它使用 Angular Material 的 <mat-tree> 组件来展示一个嵌套的文件夹式结构。
The tree schematic can be used to quickly generate an Angular component that uses the Angular Material <mat-tree> component to visualize a nested folder structure.
ng generate @angular/material:tree <component-name>
drag-drop 原理图是由 @angular/cdk 提供的，它可用来生成带有 CDK 拖放指令的组件。
The drag-drop schematic is provided by the @angular/cdk and can be used to generate a component that uses the CDK drag and drop directives.
ng generate @angular/cdk:drag-drop <component-name>