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了，复制粘贴的时候注意一下，若是是老版本的写法就改一下