docs(getting-started): revise docs (#3523)

* docs(getting-started): revise docs

* minor changes
This commit is contained in:
Andrew Seguin
2017-03-10 10:41:00 -08:00
committed by tinayuangao
parent 0a7e29345e
commit 22668af8c5
+42 -40
View File
@@ -1,45 +1,44 @@
Get started with Angular Material using the Angular CLI.
For help getting started with a new Angular app, check out the [Angular CLI](https://cli.angular.io/).
## Install Angular CLI
```bash
npm install -g @angular/cli
```
## Create a new project
```bash
ng new my-project
```
For existing apps, follow these steps to begin using Angular Material.
The new command creates a project with a build system for your Angular app.
## Install Angular Material components
## Step 1: Install Angular Material
```bash
npm install --save @angular/material
```
## Import the Angular Material NgModule
## Step 2: Import the Module
Add MaterialModule as an import in your app's root NgModule.
**src/app/app.module.ts**
```ts
import { MaterialModule } from '@angular/material';
// other imports
@NgModule({
...
imports: [MaterialModule],
...
})
export class PizzaPartyAppModule { }
```
## Include the core and theme styles:
This is **required** to apply all of the core and theme styles to your application. You can either
use a pre-built theme, or define your own custom theme.
## Step 3: Include Theming
:trident: See the [theming guide](./theming.md) for instructions.
Including a theme is **required** to apply all of the core and theme styles to your application.
To get started with a prebuilt theme, include the following in your app's index.html:
```html
<link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
```
Note that your app's project structure may have a different relative location for your node_modules.
For more information on theming and instructions on how to create a custom theme, see the [theming guide](./theming.md).
## Step 4: Gesture Support
### Additional setup for gestures
Some components (`md-slide-toggle`, `md-slider`, `mdTooltip`) rely on
[HammerJS](http://hammerjs.github.io/) for gestures. In order to get the full feature-set of these
components, HammerJS must be loaded into the application.
@@ -48,19 +47,31 @@ You can add HammerJS to your application via [npm](https://www.npmjs.com/package
(such as the [Google CDN](https://developers.google.com/speed/libraries/#hammerjs)), or served
directly from your app.
#### If you want to include HammerJS from npm, you can install it:
To install via npm, use the following command:
```bash
npm install --save hammerjs
npm install --save hammerjs
```
After installing, import HammerJS on your app's module.
**src/app/app.module.ts**
After installing, import it on your app's root module.
```ts
import 'hammerjs';
```
## Step 5 (Optional): Add Material Icons
If you want your `md-icon` components to use [Material Icons](https://material.io/icons/), load the font in your `index.html`.
```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
For more information on using Material Icons, check out the [Material Icons Guide](https://google.github.io/material-design-icons/).
Note that `md-icon` has support for any font or svg icons, so using Material Icons is just one option.
## Configuring SystemJS
If your project is using SystemJS for module loading, you will need to add `@angular/material`
to the SystemJS configuration:
@@ -68,22 +79,13 @@ to the SystemJS configuration:
System.config({
// existing configuration options
map: {
...,
'@angular/material': 'npm:@angular/material/bundles/material.umd.js'
...
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
...
}
});
```
### [Optional] Using Material Design icons with `md-icon`:
- If you want to use Material Design icons in addition to Angular Material components,
load the Material Design font in your `index.html`.
`md-icon` supports any font icons or svg icons, so this is only one option for an icon source.
**src/index.html**
```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
## Sample Angular Material projects
- [Material Sample App](https://github.com/jelbourn/material2-app)