docs(schematics): clarify and refine the install schematic docs (#13267)

* Use ### header for consistency and to show up in table of contents
* Add CDK and Animations
* Add links to related guides
This commit is contained in:
Michael Prentice
2018-09-24 16:31:22 -04:00
committed by Jeremy Elbourn
parent 8558878274
commit 0f818fd767
+16 -11
View File
@@ -1,26 +1,31 @@
Angular Material comes packaged with Angular CLI schematics to make
creating Material applications easier.
## Install Schematics
Schematics come packaged with Angular Material, so once you have
installed the npm package, they will be available via the Angular CLI.
### Install Schematics
Schematics are included with both `@angular/cdk` and `@angular/material`. Once you install the npm
packages, they will be available through the Angular CLI.
Using the command below will automatically install Angular Material for you
and run the install schematic.
Using the command below will install Angular Material, the [Component Dev Kit](https://material.angular.io/cdk) (CDK),
and [Angular Animations](https://angular.io/guide/animations) in your project. Then it will run the
install schematic.
```
ng add @angular/material
```
The install schematic will help you to quickly add Material to a new project.
The install schematic will help you add Material to a new project.
This schematic will:
- Ensure project dependencies are placed in `package.json`
- Ensure project dependencies are placed in your app module
- Add Prebuilt or Setup Custom Theme
- Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json`
- Enable the [BrowserAnimationsModule](./getting-started#step-2-configure-animations) your app module
- Add either a [prebuilt theme](./theming#using-a-pre-built-theme) or a [custom theme](./theming#defining-a-custom-theme)
- Add Roboto fonts to your index.html
- Apply simple CSS reset to body
- Install and load `hammerjs` for gestures in your project.
- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your index.html
- Add global styles to
- Remove margins from `body`
- Set `height: 100%` on `html` and `body`
- Make Roboto the default font of your app
- Install and import `hammerjs` for [touch gesture support](./getting-started#step-5-gesture-support) in your project
## Generator Schematics
In addition to the install schematic, Angular Material has three schematics it comes packaged with: