Angular Material 攻略 03 angular Material Design 安裝

肥飝貓發表於2018-02-11
AngularMaterial Design

Material Design

Material Design是由Google推出的一套視覺設計語言，從設計準則、動畫、配色等方面做出了詳盡的規定， 但是Material Design只是一套設計準則和bootstrap這類CSS框架相比，並沒有直接的CSS可用。 目前有幾個比較有名的實現 比如Google官方的Material Design Lite支援多平臺的Material Components 還有Materialize等。

這些css框架可以讓小公司和沒有什麼美感的程式設計師也能輕易設計出簡單、大方、富有美感的網頁。

Angular Material

Angular 是Google推出的主力前端框架， Material Design 是谷歌設計的方向，自然為angular量身打造了一套元件庫Angular Material。相比於ngx-bootstrap、primeng或者國內的NG-ZORRO等 Angular Material的質量是最高的（勿噴）所以我就選擇它作為本次教程的UI框架。

安裝Angular Material

在01 我們已經跑起來了Hello Word ,不過太醜了。我們先把Angular Material裝起來。

npm install --save @angular/material @angular/cdk
複製程式碼

在國內的話，有時候網路狀況比較差，可以先安裝nrm來測試各個源 然後再安裝

npm i -g nrm
複製程式碼

然後測試

nrm test
複製程式碼

我這裡的結果是


  npm ---- 712ms
  cnpm --- 249ms
* taobao - 211ms
  nj ----- Fetch Error
  rednpm - Fetch Error
  npmMirror  975ms
  edunpm - Fetch Error
複製程式碼

淘寶源最快那就選擇淘寶

 nrm use taobao
複製程式碼

這時候出現

 Registry has been set to: https://registry.npm.taobao.org/
複製程式碼

我們就可以繼續去安裝Angular Material

加入專案中

angular-tutorial\demo-angular\src\app\app.module.ts
複製程式碼

開啟 AppModule 然後引入BrowserAnimationsModule

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

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

複製程式碼

或者不想寫動畫，或者因為動畫的原因導致卡頓 直接關閉

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

@NgModule({
  ...
  imports: [
    ...
    NoopAnimationsModule
  ],
  ...
})
export class AppModule { }

複製程式碼

@angular/animations相容性

因為@angular/animations使用了WebAnimation API 所以如果想要支援較老版本的瀏覽器 需要引入web-animations.js 先去下載

npm install --save web-animations-js
複製程式碼

然後引入 在src/pollyills.ts找到import 'web-animations-js' 取消掉註釋

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.

複製程式碼

加入使用的元件

比如我們要使用Angular Material的button,我們就可以直接在AppModule直接引入

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';

import {AppComponent} from './app.component';
import {MatButtonModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

複製程式碼

然後在module下的Component就可以直接用了

<button mat-raised-button color="primary">Primary</button>
複製程式碼

公共元件

在較為複雜的專案中,有時候我們會將常用的MatXXXModule先import進來然後再export出去，這樣我們就可以在其他module只匯入這個module就好了。 先用CLI生成shared-material module 然後去匯入他

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material';

@NgModule({
  imports: [MatButtonModule], // 先import
  exports: [MatButtonModule] // 再export
})
export class SharedMaterialModule {}
複製程式碼

在使用他的module中匯入 比如在AppModule中

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';

import {AppComponent} from './app.component';
import {SharedMaterialModule} from './shared-material/shared-material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    SharedMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

複製程式碼

如果在SharedMaterialModule中並沒有Component使用外部的話可以直接export匯出

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material';

@NgModule({
  exports: [MatButtonModule] // 直接export
})
export class SharedMaterialModule {}
複製程式碼

關於ngmodule可以戳這裡

自定義主題

前端的元件怎麼能少得了樣式呢，目前官方提供四種主題我們可以在

@angular/material/prebuilt-themes/
複製程式碼

中檢視，也可以直接在官網的右上角切換，檢視效果 官方網址

先去style.scss中引入主題

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
複製程式碼

這樣Angular Material的樣式就算是補全了

支援手勢

在PC端和移動端有些互動是不一樣的，比如tooltipz在PC端只要滑鼠滑過就會顯示，但是在mobile上需要長按才出現，所以Angular Material一些元件（mat-slide-toggle，mat-slider，matTooltip）依靠HammerJS的支援了手勢。為了獲得完整的功能集這些元件，HammerJS必須載入到應用程式 先安裝

npm install --save hammerjs
複製程式碼

然後在angular CLI 中引入

      "scripts": [
        "./node_modules/hammerjs/hammer.min.js"
      ],
複製程式碼

或者直接在專案入口，比如main.ts中加入

import 'hammerjs';
複製程式碼

Material Icons

直接在index.html加入

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
複製程式碼

是不是夠簡單

提示

之前Angular Material的字首是mdXxxx或md-xxxx的在Angular Material 5之後都統一改成matXxxx或mat-xxxx了，複製貼上的時候注意一下，如果是老版本的寫法就改一下

相關文章