使用 Angular CLI 進行安裝或設定

在這個例子中,我們將使用 @angular/cli(最新)和最新版本的 @angular/material。在繼續執行以下步驟之前,你至少應該瞭解 Angular 2/4 的基礎知識。

  1. npm 安裝角度材料模組:

    npm install @angular/material --save
    

Version >= 2.0.0 beta.3

這僅適用於 2.0.0-beta.3 及以上版本。

安裝 @angular/animations 模組:

npm install @angular/animations --save

Version >= 2.0.0 beta.8

這僅適用於 2.0.0-beta.8 及以上版本。

安裝 @angular/cdk 模組:

npm install @angular/cdk --save
  1. 在你的應用程式模組中匯入你要使用的元件:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
    
    import { AppComponent } from './app.component';
    
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    @NgModule({
         imports: [
             BrowserAnimationsModule,
             MdButtonModule,
             MdSnackBarModule,
             MdSidenavModule,
             CommonModule,
             // This is optional unless you want to have routing in your app
             // RouterModule.forRoot([
             //     { path: '', component: HomeView, pathMatch: 'full'}
             // ])
         ],
         declarations: [ AppComponent ],
         boostrap: [ AppComponent ]
    })
    export class AppModule {}
    

你現在可以在元件中使用 Angular Material 了!

注意:特定元件的文件即將推出