Skip to content

Commit 22668af

Browse files
andrewseguintinayuangao
authored andcommitted
docs(getting-started): revise docs (#3523)
* docs(getting-started): revise docs * minor changes
1 parent 0a7e293 commit 22668af

File tree

1 file changed

+42
-40
lines changed

1 file changed

+42
-40
lines changed

guides/getting-started.md

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,44 @@
1-
Get started with Angular Material using the Angular CLI.
1+
For help getting started with a new Angular app, check out the [Angular CLI](https://cli.angular.io/).
22

3-
## Install Angular CLI
4-
5-
```bash
6-
npm install -g @angular/cli
7-
```
8-
9-
## Create a new project
10-
11-
```bash
12-
ng new my-project
13-
```
14-
15-
The new command creates a project with a build system for your Angular app.
3+
For existing apps, follow these steps to begin using Angular Material.
164

17-
## Install Angular Material components
5+
## Step 1: Install Angular Material
186

197
```bash
208
npm install --save @angular/material
219
```
2210

23-
## Import the Angular Material NgModule
11+
## Step 2: Import the Module
12+
13+
Add MaterialModule as an import in your app's root NgModule.
2414

25-
**src/app/app.module.ts**
2615
```ts
2716
import { MaterialModule } from '@angular/material';
28-
// other imports
17+
2918
@NgModule({
19+
...
3020
imports: [MaterialModule],
3121
...
3222
})
3323
export class PizzaPartyAppModule { }
3424
```
3525

36-
## Include the core and theme styles:
37-
This is **required** to apply all of the core and theme styles to your application. You can either
38-
use a pre-built theme, or define your own custom theme.
26+
## Step 3: Include Theming
27+
28+
Including a theme is **required** to apply all of the core and theme styles to your application.
3929

40-
:trident: See the [theming guide](./theming.md) for instructions.
30+
To get started with a prebuilt theme, include the following in your app's index.html:
31+
32+
```html
33+
<link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
34+
```
35+
36+
Note that your app's project structure may have a different relative location for your node_modules.
37+
38+
For more information on theming and instructions on how to create a custom theme, see the [theming guide](./theming.md).
39+
40+
## Step 4: Gesture Support
4141

42-
### Additional setup for gestures
4342
Some components (`md-slide-toggle`, `md-slider`, `mdTooltip`) rely on
4443
[HammerJS](http://hammerjs.github.io/) for gestures. In order to get the full feature-set of these
4544
components, HammerJS must be loaded into the application.
@@ -48,42 +47,45 @@ You can add HammerJS to your application via [npm](https://www.npmjs.com/package
4847
(such as the [Google CDN](https://developers.google.com/speed/libraries/#hammerjs)), or served
4948
directly from your app.
5049

51-
#### If you want to include HammerJS from npm, you can install it:
52-
50+
To install via npm, use the following command:
5351
```bash
54-
npm install --save hammerjs
52+
npm install --save hammerjs
5553
```
5654

57-
After installing, import HammerJS on your app's module.
58-
**src/app/app.module.ts**
55+
After installing, import it on your app's root module.
5956
```ts
6057
import 'hammerjs';
6158
```
6259

60+
## Step 5 (Optional): Add Material Icons
61+
62+
If you want your `md-icon` components to use [Material Icons](https://material.io/icons/), load the font in your `index.html`.
63+
64+
```html
65+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
66+
```
67+
68+
For more information on using Material Icons, check out the [Material Icons Guide](https://google.github.io/material-design-icons/).
69+
70+
Note that `md-icon` has support for any font or svg icons, so using Material Icons is just one option.
71+
72+
6373
## Configuring SystemJS
74+
6475
If your project is using SystemJS for module loading, you will need to add `@angular/material`
6576
to the SystemJS configuration:
6677

6778
```js
6879
System.config({
6980
// existing configuration options
7081
map: {
71-
...,
72-
'@angular/material': 'npm:@angular/material/bundles/material.umd.js'
82+
...
83+
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
84+
...
7385
}
7486
});
7587
```
7688

77-
### [Optional] Using Material Design icons with `md-icon`:
78-
79-
- If you want to use Material Design icons in addition to Angular Material components,
80-
load the Material Design font in your `index.html`.
81-
`md-icon` supports any font icons or svg icons, so this is only one option for an icon source.
82-
83-
**src/index.html**
84-
```html
85-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
86-
```
8789

8890
## Sample Angular Material projects
8991
- [Material Sample App](https://github.com/jelbourn/material2-app)

0 commit comments

Comments
 (0)