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

 

    mood




    Yay, Material in Angular 2!




   

      more_vert

   

 

 

    Option 1

    Option 2

 




 

    All

    Of

    The

    Buttons

 




 

   

      check circle

   

 

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