angular2结合angular-material2

1.检测是否安装最新的node和npm

2.未安装请到官网进行安装https://nodejs.org/en/

3.创建angular项目请参考官网简单步骤https://angular.cn/docs/ts/latest/cli-quickstart.html

4. 创建完之后请安装相关的组件依赖

$ npm install --save @angular/material @angular/animations

$ npm install --save hammerjs

5. 如果你决定使用hammer.js，修改你的angular-cli.json文件添加hammer.js路径

"scripts": [

  "../node_modules/hammerjs/hammer.min.js"

],

6. 在模块组件中引入依赖

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { MaterialModule } from '@angular/material';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';




import { AppComponent } from './app.component';




@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    MaterialModule,

    BrowserAnimationsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

7. 导入预先构建的主题和材质图标

在styles.css引入以下两个和全局样式：

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

body { margin: 0; font-family: Roboto, sans-serif; } md-card { max-width: 80%; margin: 2em auto; text-align: center; } md-toolbar-row { justify-content: space-between; } .done { position: fixed; bottom: 20px; right: 20px; color: white; }

5. 开始填写组件ui

<div>

  <md-toolbar color="primary">

    <span><md-icon>mood</md-icon></span>




    <span>Yay, Material in Angular 2!</span>




    <button md-icon-button [md-menu-trigger-for]="menu">

      <md-icon>more_vert</md-icon>

    </button>

  </md-toolbar>

  <md-menu x-position="before" #menu="mdMenu">

    <button md-menu-item>Option 1</button>

    <button md-menu-item>Option 2</button>

  </md-menu>




  <md-card>

    <button md-button>All</button>

    <button md-raised-button>Of</button>

    <button md-raised-button color="primary">The</button>

    <button md-raised-button color="accent">Buttons</button>

  </md-card>




  <span class="done">

    <button md-fab>

      <md-icon>check circle</md-icon>

    </button>

  </span>

</div>

这里是我们的示例应用程序的显示结果：