diff --git a/guides/getting-started.md b/guides/getting-started.md index 02eb86b00feb..679676f8cc07 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -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 - ``` - -The new command creates a project with a build system for your Angular app. +For existing apps, follow these steps to begin using Angular Material. -## 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 + +Including a theme is **required** to apply all of the core and theme styles to your application. -:trident: See the [theming guide](./theming.md) for instructions. +To get started with a prebuilt theme, include the following in your app's index.html: + +```html + +``` + +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 + +``` + +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 - -``` ## Sample Angular Material projects - [Material Sample App](https://github.com/jelbourn/material2-app)