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>

這裏是我們的示例應用程序的顯示結果：