Angular Material 攻略 03 angular Material 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了，複製粘貼的時候注意一下，若是是老版本的寫法就改一下