入门指南
For help getting started with a new Angular app, check out theAngular CLI.
For existing apps, follow these steps to begin using Angular Material.
步骤 1: 安装 Angular Material
npm install --save @angular/material
步骤 2: 动画
Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the@angular/animationsmodule and include theBrowserAnimationsModulein your app.
npm install --save @angular/animations
npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }
If you don't want to add another dependency to your project, you can use theNoopAnimationsModule.
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [NoopAnimationsModule],
...
})
export class PizzaPartyAppModule { }
步骤 3: 导入组件模块
Import the NgModule for each component you want to use:
import {MdButtonModule, MdCheckboxModule} from '@angular/material';
@NgModule({
...
imports: [MdButtonModule, MdCheckboxModule],
...
})
export class PizzaPartyAppModule { }
Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you'd like to use the components.
@NgModule({
imports: [MdButtonModule, MdCheckboxModule],
exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }
步骤 4: 引入样式
Including a theme isrequiredto 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:
<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
For more information on theming and instructions on how to create a custom theme, see thetheming guide.
步骤 5: 手势
Some components (md-slide-toggle,md-slider,mdTooltip) rely onHammerJSfor gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.
You can add HammerJS to your application vianpm, a CDN (such as theGoogle CDN), or served directly from your app.
To install via npm, use the following command:
npm install --save hammerjs
After installing, import it on your app's root module.
import 'hammerjs';
步骤 6 (可选): Add Material Icons
If you want to use themd-iconcomponent with the officialMaterial Design Icons, load the icon font in yourindex.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Note thatmd-iconsupports any font or svg icons; using Material Icons is one of many options.
Appendix: Configuring SystemJS
If your project is using SystemJS for module loading, you will need to add@angular/materialto the SystemJS configuration:
System.config({
// existing configuration options
map: {
// ...
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
// ...
}
});