今天我們將開始正式邁入Angular Material的世界杜秸,要學(xué)習(xí)使用Angular Material打造高品質(zhì)及高質(zhì)感的網(wǎng)頁峻村,當(dāng)然要從安裝Angular Material套件開始,本篇文章就來介紹基本的Angular Material安裝步驟,并簡(jiǎn)單加入一個(gè)元件來體驗(yàn)一下有質(zhì)感是怎樣的一個(gè)感覺!
基本環(huán)境
本篇文章需要在電腦上安裝node.js,并透過npm安裝相關(guān)的套件(或是你想用yarn也沒有問題)盗迟,同時(shí),你也必須安裝Angular CLI熙含。
雖然本系列文章假設(shè)讀者已經(jīng)有基本的Angular知識(shí)及會(huì)使用Angular CLI罚缕,但還是簡(jiǎn)單說明一下安裝Angular CLI的方式(畢竟不是每個(gè)開發(fā)人員都會(huì)去使用Angular CLI來建立程式,只是使用Angular CLI比較方便而已)怎静,透過npm安裝Angular CLI很簡(jiǎn)單邮弹,只要簡(jiǎn)單一行指令就可以了
npm install -g @angular/cli
再寫這篇文章時(shí)黔衡,筆者的電腦中使用的Angular CLI版本為1.6.0。
建立新的專案
使用Angular CLI來建立新的專案也是簡(jiǎn)單到不行腌乡,使用ng new
指令一行搞定:
ng new it-ironman-demo-angular-material --routing
由于之后還要開發(fā)其他的頁面盟劫,所以加上了--routing
,這會(huì)在專案中增加一個(gè)app-routing.module.ts
的檔案与纽,方便未來增加模組以及頁面連結(jié)時(shí)作設(shè)定侣签。
接下來我們就要正式把Angular Material相關(guān)的套件裝進(jìn)來并且進(jìn)行設(shè)定啦!
步驟1. 安裝@angular/material和@angular/cdk
首先第一步我們先把套件裝進(jìn)來再說急迂,進(jìn)入專案目錄(以上面的例子來說專案目錄是it-ironman-demo-angular-material
)
npm install --save @angular/material @angular/cdk
如果你喜歡嚐鮮影所,也可以安裝最新非穩(wěn)定的版本,Angular Material也提供了一個(gè)snapshot build僚碎,當(dāng)然這不建議在真正的production環(huán)境上使用猴娩。
npm install --save angular/material2-builds angular/cdk-builds
步驟2. 安裝@angular/animations
Angular Material運(yùn)用了不少動(dòng)畫特效來讓元件顯示更加生動(dòng),這都多虧了@angular/animations這個(gè)套件听盖,如果希望能在頁面上看到這些動(dòng)畫效果胀溺,需要安裝@angular/animations:
npm install --save @angular/animations
接著在我們的AppModule中的imports裡面加入BrowserAnimationsModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [
...
BrowserAnimationsModule
],
...
})
export class AppModule { }
雖然動(dòng)畫效果會(huì)讓畫面更加豐富,但也有可能會(huì)有效能問題皆看,且不是每個(gè)人都喜歡那麼多的特效仓坞,想要取消特效的話,可以改加入NoopAnimationsModule
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [
...
NoopAnimationsModule
],
...
})
export class AppModule { }
關(guān)于@angular/animations的支援度
@angular/animations使用了WebAnimation API腰吟,但不是所有瀏覽器都有支援无埃,如果你希望盡可能讓所有瀏覽器都支援,可以安裝web-animations.js
套件毛雇。
npm install --save web-animations-js
接著打開src/pollyills.ts
檔案嫉称,找到import 'web-animations-js'
這一行,并且把它取消注解掉灵疮,如果找不到這一行织阅,也可以直接手動(dòng)加入就好。
步驟3. 匯入想要顯示的元件模組
Angular Material將所有的主要元件都都方入對(duì)應(yīng)的模組之中(MatXXXModule
)震捣,讓我們只有需要使用到某一群元件時(shí)荔棉,匯入相關(guān)模組就好,避免匯入過多不必要的元件蒿赢。
在要使用的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
另外一種方式是,建立一個(gè)SharedModule羡棵,將常用的MatXXXModule先import壹若,再export出來,在其他Module中就只要import這個(gè)SharedModule就好,這在較複雜的SPA程式中會(huì)非常實(shí)用店展。當(dāng)然這個(gè)SharedModule只是個(gè)概念养篓,實(shí)際上我們可以用這個(gè)概念分類出不同的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中匯入即可,唯一要注意的是睡腿,這個(gè)SharedMaterialModule一定要放在BrowserModule之后!
import { SharedMaterialModule } from './shared-material/shared-material.module';
@NgModule({
...
imports: [
BrowserModule,
...
SharedMaterialModule
],
...
})
export class AppModule {}
關(guān)于SharedModule的概念峻贮,可以參考官方文件的介紹席怪。
步驟4. 加入theme設(shè)定
Material Design是極具質(zhì)感的設(shè)計(jì)樣式,因此Angular Material自然也少不了基本的CSS樣式纤控,目前(5.0.0-rc)Angular Material包含了4種內(nèi)建的樣式挂捻,在@angular/material/prebuilt-themes/
,可以找到這4個(gè)css檔船万。
另外這4個(gè)佈景的樣式也可以再Angular Material官方文件首頁的上半部作切換
以下是這4個(gè)樣式在官方首頁的樣式刻撒,提供參考
- indigo-pink.css
- deeppurple-amber.css
- pink-bluegrey.css
- purple-green.css
未來Angular Material也會(huì)持續(xù)增加不同的配色;當(dāng)然耿导,我們也可以自己設(shè)計(jì)自己想要的樣式声怔,在Angular Material要產(chǎn)生客製化的樣式非常簡(jiǎn)單,只需要簡(jiǎn)單設(shè)定要搭配的顏色即可舱呻,在后續(xù)的文章會(huì)介紹如何自訂自己的Angular Material Theme醋火。在這裡我們只要先選擇內(nèi)建的theme就好,我們可以把這個(gè)theme的css加到styles.css中箱吕。
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
之后用到的Angular Material元件就會(huì)自動(dòng)套上這樣的樣式蘿芥驳。
步驟5. 手勢(shì)支援
在某些元件中,會(huì)依照瀏覽的裝置不同而有不同的互動(dòng)茬高,例如tooltip在一般PC上只要滑鼠游標(biāo)移過去就會(huì)顯示兆旬,但在行動(dòng)裝置中,則需要長(zhǎng)按才會(huì)出現(xiàn)怎栽,這部分Angular Material搭配了HammerJS丽猬,為UI加上行動(dòng)裝置的手勢(shì)支援,如果開發(fā)的網(wǎng)頁需要在行動(dòng)裝置上也能達(dá)到最好的體驗(yàn)婚瓜,就必須在程式中載入HammerJS宝鼓。
有萬能的npm,這些套件都只是一行指令的問題而已
npm install --save hammerjs
安裝完HammerJS后巴刻,還需要在程式中載入愚铡,我們可以直接在程式的進(jìn)入點(diǎn)src/main.ts中加入
import 'hammerjs';
步驟6. 加入Material Icons
Material Icons是搭配Material Design出來的一系列icon set,在Angular Material中,我們也可以透過MatIcon來統(tǒng)一顯示icon的邏輯沥寥,以現(xiàn)代化網(wǎng)頁設(shè)計(jì)來說碍舍,想要使用Material Icons最簡(jiǎn)單的方式,就是直接在index.html中加入相關(guān)Icon Font的CDN:
<link rel="stylesheet">
實(shí)際寫點(diǎn)東西來看看吧邑雅!
上述的步驟已經(jīng)把所有Angular Material相關(guān)的套件及設(shè)定都完成了片橡,同時(shí)我們也練習(xí)載入了MatButtonModule,既然都已經(jīng)載入了淮野,我們就直接來寫一個(gè)Button來看看吧捧书!
在app.component.html中先寫一個(gè)簡(jiǎn)單到不行的button
<button>Hello World!</button>
這時(shí)候的按鈕隨著作業(yè)系統(tǒng)骤星、瀏覽器的不同會(huì)有不同的顯示方式经瓷。接著我們來讓它變成一個(gè)充滿Material Design樣式的按鈕吧!
在Angular Material中使用了原生的按鈕洞难,但是加上了directive讓按鈕有了Material Design的樣式舆吮,最簡(jiǎn)單的directive就是mat-button
<button mat-button>Hello World!</button>
來看看結(jié)果:
可以看到整個(gè)按鈕的樣式變得不一樣了队贱,同時(shí)點(diǎn)選下去也有清楚的wave特效色冀,這讓我們的按鈕從此活了起來!畫面更加豐富V印锋恬!
在之后的文章我們會(huì)在對(duì)MatButton有更熟悉的理解,不過在這裡我們還是手癢稍微修改一下按鈕的樣式编丘,讓按鈕能有不一樣的呈現(xiàn)方式
<button mat-raised-button color="primary">Hello World伶氢!</button>
我們改用了mat-raised-button,讓按鈕變成有有層次的陰影瘪吏,同時(shí)加上color="primary"
癣防,為按鈕加上了主題色的主要顏色,看看結(jié)果:
可以發(fā)現(xiàn)按鈕變成了藍(lán)色的背景掌眠,而且也有了些陰影蕾盯,這可以讓畫面更佳的有立體感,顏色也更加鮮明蓝丙;在所有的Angular Material的元件都有類似的立體效果及配色级遭,讓整個(gè)畫面呈現(xiàn)能夠更加的層次分明,是不是對(duì)于Material Design的設(shè)計(jì)有了更多的期待啦渺尘!
關(guān)于安裝Angular Material的小補(bǔ)充
如果有使用SystemJS的方式載入模組挫鸽,官方文件也有說明該如何使用,可以參考看看
https://material.angular.io/guide/getting-started#appendix-configuring-systemjs
關(guān)于Angular Material文件的補(bǔ)充
如果你已經(jīng)迫不及待要去Angular Material的文件上看看有什麼好玩的元件可以用了鸥跟,在這邊做一點(diǎn)小提醒丢郊,由于文件目前還沒有完全更新盔沫,有些程式碼可能會(huì)是錯(cuò)的,最主要的部分是當(dāng)看到mdXxxx
或md-xxxx
時(shí)枫匾,都是舊版的寫法架诞,Angular Material 5之后統(tǒng)一都改成matXxxx
或mat-xxxx
的寫法,因此當(dāng)你複製程式時(shí)干茉,別忘了看一下是不是舊版的寫法谴忧,可能會(huì)導(dǎo)致跑不出結(jié)果喔!
本日小結(jié)
今天我們介紹了將Angular Material加入Angular專案的方法角虫,雖然不算複雜沾谓,但也有些細(xì)節(jié)需要注意,并且也理解到Angular Material需要相依一些套件戳鹅,才能發(fā)揮出全部的威力搏屑,盡管沒有這些相依套件,也不會(huì)影響到主要的操作粉楚,但如果可以的話,還是建議把這些套件都加進(jìn)來亮垫,讓前端畫面能夠更加豐富模软!
安裝完Angular Material后,我們也實(shí)際用按鈕當(dāng)作案例饮潦,建立了一個(gè)充滿Material Design風(fēng)格的按鈕元件燃异,讓按鈕不再是死板板的按鈕,還要擔(dān)心作業(yè)系統(tǒng)和瀏覽器不同而有不同的顯示方式继蜡,讓呈現(xiàn)更加一致回俐,也更加的生動(dòng)。
明天即將開始進(jìn)入正戲稀并,介紹Angular Material的元件啦仅颇!
本日的程式碼GitHub:https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-02-prepare-installation (分枝:day-02-prepare-installation)