From 4cc7f74d59ce8ec720912f1995fec54137a70fc6 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 8 Mar 2017 15:42:13 -0800 Subject: [PATCH 1/2] docs(getting-started): revise docs --- guides/getting-started.md | 81 ++++++++++++++++++--------------------- 1 file changed, 38 insertions(+), 43 deletions(-) diff --git a/guides/getting-started.md b/guides/getting-started.md index 02eb86b00feb..706b330c89e6 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -1,45 +1,42 @@ -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. + +To get started with a prebuilt theme, include the following in your app's index.html: + +```html + +``` + +For information on other prebuilt themes, or help building your own theme, check out the [theming guide](./theming.md). -:trident: See the [theming guide](./theming.md) for instructions. +## Step 4 (Optional): 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 +45,26 @@ 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: - -```bash -npm install --save hammerjs -``` - -After installing, import HammerJS on your app's module. -**src/app/app.module.ts** +After installing HammerJS, 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 +72,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) From 0930f9f435da7638de00b64f40ad0b65ba679191 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Thu, 9 Mar 2017 11:39:07 -0800 Subject: [PATCH 2/2] minor changes --- guides/getting-started.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/guides/getting-started.md b/guides/getting-started.md index 706b330c89e6..679676f8cc07 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -33,9 +33,11 @@ To get started with a prebuilt theme, include the following in your app's index. ``` -For information on other prebuilt themes, or help building your own theme, check out the [theming guide](./theming.md). +Note that your app's project structure may have a different relative location for your node_modules. -## Step 4 (Optional): Gesture Support +For more information on theming and instructions on how to create a custom theme, see the [theming guide](./theming.md). + +## Step 4: Gesture Support 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 @@ -45,7 +47,12 @@ 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. -After installing HammerJS, import it on your app's root module. +To install via npm, use the following command: +```bash +npm install --save hammerjs +``` + +After installing, import it on your app's root module. ```ts import 'hammerjs'; ```