[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装步骤,并简单加入一个元件来体验一下有质感是怎样的一个感觉!

基本环境

本篇文章需要在电脑上安装node.js,并透过npm安装相关的套件(或是你想用yarn也没有问题),同时,你也必须安装Angular CLI。

虽然本系列文章假设读者已经有基本的Angular知识及会使用Angular CLI,但还是简单说明一下安装Angular CLI的方式(毕竟不是每个开发人员都会去使用Angular CLI来建立程式,只是使用Angular CLI比较方便而已),透过npm安装Angular CLI很简单,只要简单一行指令就可以了

npm install -g @angular/cli

再写这篇文章时,笔者的电脑中使用的Angular CLI版本为1.6.0。

建立新的专案

使用Angular CLI来建立新的专案也是简单到不行,使用ng new指令一行搞定:

ng new it-ironman-demo-angular-material --routing

由于之后还要开发其他的页面,所以加上了--routing,这会在专案中增加一个app-routing.module.ts的档案,方便未来增加模组以及页面连结时作设定。

接下来我们就要正式把Angular Material相关的套件装进来并且进行设定啦!

步骤1. 安装@angular/material和@angular/cdk

首先第一步我们先把套件装进来再说,进入专案目录(以上面的例子来说专案目录是it-ironman-demo-angular-material)

npm install --save @angular/material @angular/cdk

如果你喜欢嚐鲜,也可以安装最新非稳定的版本,Angular Material也提供了一个snapshot build,当然这不建议在真正的production环境上使用。

npm install --save angular/material2-builds angular/cdk-builds

步骤2. 安装@angular/animations

Angular Material运用了不少动画特效来让元件显示更加生动,这都多亏了@angular/animations这个套件,如果希望能在页面上看到这些动画效果,需要安装@angular/animations:

npm install --save @angular/animations

接著在我们的AppModule中的imports裡面加入BrowserAnimationsModule

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

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

虽然动画效果会让画面更加丰富,但也有可能会有效能问题,且不是每个人都喜欢那麽多的特效,想要取消特效的话,可以改加入NoopAnimationsModule

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'这一行,并且把它取消注解掉,如果找不到这一行,也可以直接手动加入就好。

步骤3. 汇入想要显示的元件模组

Angular Material将所有的主要元件都都方入对应的模组之中(MatXXXModule),让我们只有需要使用到某一群元件时,汇入相关模组就好,避免汇入过多不必要的元件。

在要使用的Module中汇入MatXXXModule

假如我们要使用Angular Material的button特性,可以汇入MatButtonModule

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

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

利用SharedModule先整理出常用的MatXXXModule

另外一种方式是,建立一个SharedModule,将常用的MatXXXModule先import,再export出来,在其他Module中就只要import这个SharedModule就好,这在较複杂的SPA程式中会非常实用。当然这个SharedModule只是个概念,实际上我们可以用这个概念分类出不同的Modules,例如专门放常用的Angular Material Components的Module我们就取名叫做SharedMaterialModule吧!

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裡面没有其他需要使用到Angular Material的元件,也可以直接export就好

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

@NgModule({
  exports: [MatButtonModule] // 直接export
})
export class SharedMaterialModule {}

然后在使用到的Module中汇入即可,唯一要注意的是,这个SharedMaterialModule一定要放在BrowserModule之后!

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

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

关于SharedModule的概念,可以参考官方文件的介绍。

步骤4. 加入theme设定

Material Design是极具质感的设计样式,因此Angular Material自然也少不了基本的CSS样式,目前(5.0.0-rc)Angular Material包含了4种内建的样式,在@angular/material/prebuilt-themes/,可以找到这4个css档。

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World_第1张图片
image.png

另外这4个佈景的样式也可以再Angular Material官方文件首页的上半部作切换

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World_第2张图片
image.png

以下是这4个样式在官方首页的样式,提供参考

  • indigo-pink.css
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World_第3张图片
image.png
  • deeppurple-amber.css
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World_第4张图片
image.png
  • pink-bluegrey.css
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World_第5张图片
image.png
  • purple-green.css
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World_第6张图片
image.png

未来Angular Material也会持续增加不同的配色;当然,我们也可以自己设计自己想要的样式,在Angular Material要产生客製化的样式非常简单,只需要简单设定要搭配的颜色即可,在后续的文章会介绍如何自订自己的Angular Material Theme。在这裡我们只要先选择内建的theme就好,我们可以把这个theme的css加到styles.css中。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

之后用到的Angular Material元件就会自动套上这样的样式萝。

步骤5. 手势支援

在某些元件中,会依照浏览的装置不同而有不同的互动,例如tooltip在一般PC上只要滑鼠游标移过去就会显示,但在行动装置中,则需要长按才会出现,这部分Angular Material搭配了HammerJS,为UI加上行动装置的手势支援,如果开发的网页需要在行动装置上也能达到最好的体验,就必须在程式中载入HammerJS。

有万能的npm,这些套件都只是一行指令的问题而已

npm install --save hammerjs

安装完HammerJS后,还需要在程式中载入,我们可以直接在程式的进入点src/main.ts中加入

import 'hammerjs';

步骤6. 加入Material Icons

Material Icons是搭配Material Design出来的一系列icon set,在Angular Material中,我们也可以透过MatIcon来统一显示icon的逻辑,以现代化网页设计来说,想要使用Material Icons最简单的方式,就是直接在index.html中加入相关Icon Font的CDN:



实际写点东西来看看吧!

上述的步骤已经把所有Angular Material相关的套件及设定都完成了,同时我们也练习载入了MatButtonModule,既然都已经载入了,我们就直接来写一个Button来看看吧!

在app.component.html中先写一个简单到不行的button



这时候的按钮随著作业系统、浏览器的不同会有不同的显示方式。接著我们来让它变成一个充满Material Design样式的按钮吧!

在Angular Material中使用了原生的按钮,但是加上了directive让按钮有了Material Design的样式,最简单的directive就是mat-button



来看看结果:

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World_第7张图片
image

可以看到整个按钮的样式变得不一样了,同时点选下去也有清楚的wave特效,这让我们的按钮从此活了起来!画面更加丰富!!

在之后的文章我们会在对MatButton有更熟悉的理解,不过在这裡我们还是手痒稍微修改一下按钮的样式,让按钮能有不一样的呈现方式



我们改用了mat-raised-button,让按钮变成有有层次的阴影,同时加上color="primary",为按钮加上了主题色的主要颜色,看看结果:

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World_第8张图片
image

可以发现按钮变成了蓝色的背景,而且也有了些阴影,这可以让画面更佳的有立体感,颜色也更加鲜明;在所有的Angular Material的元件都有类似的立体效果及配色,让整个画面呈现能够更加的层次分明,是不是对于Material Design的设计有了更多的期待啦!

关于安装Angular Material的小补充

如果有使用SystemJS的方式载入模组,官方文件也有说明该如何使用,可以参考看看

https://material.angular.io/guide/getting-started#appendix-configuring-systemjs

关于Angular Material文件的补充

如果你已经迫不及待要去Angular Material的文件上看看有什麽好玩的元件可以用了,在这边做一点小提醒,由于文件目前还没有完全更新,有些程式码可能会是错的,最主要的部分是当看到mdXxxxmd-xxxx时,都是旧版的写法,Angular Material 5之后统一都改成matXxxxmat-xxxx的写法,因此当你複製程式时,别忘了看一下是不是旧版的写法,可能会导致跑不出结果喔!

本日小结

今天我们介绍了将Angular Material加入Angular专案的方法,虽然不算複杂,但也有些细节需要注意,并且也理解到Angular Material需要相依一些套件,才能发挥出全部的威力,尽管没有这些相依套件,也不会影响到主要的操作,但如果可以的话,还是建议把这些套件都加进来,让前端画面能够更加丰富!

安装完Angular Material后,我们也实际用按钮当作案例,建立了一个充满Material Design风格的按钮元件,让按钮不再是死板板的按钮,还要担心作业系统和浏览器不同而有不同的显示方式,让呈现更加一致,也更加的生动。

明天即将开始进入正戏,介绍Angular Material的元件啦!

本日的程式码GitHub:https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-02-prepare-installation (分枝:day-02-prepare-installation)

相关资源:

  • Getting Started - Angular Material

你可能感兴趣的:([Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World)