[Angular Material完全攻略] Day 02 - 環(huán)境設(shè)定 & 安裝 & Hello World

今天我們將開始正式邁入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檔船万。

image.png

另外這4個(gè)佈景的樣式也可以再Angular Material官方文件首頁的上半部作切換

image.png

以下是這4個(gè)樣式在官方首頁的樣式刻撒,提供參考

  • indigo-pink.css
image.png
  • deeppurple-amber.css
image.png
  • pink-bluegrey.css
image.png
  • purple-green.css
image.png

未來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é)果:

image

可以看到整個(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é)果:

image

可以發(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)看到mdXxxxmd-xxxx時(shí)枫匾,都是舊版的寫法架诞,Angular Material 5之后統(tǒng)一都改成matXxxxmat-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)

相關(guān)資源:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市碘举,隨后出現(xiàn)的幾起案子忘瓦,更是在濱河造成了極大的恐慌,老刑警劉巖引颈,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件耕皮,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡蝙场,警方通過查閱死者的電腦和手機(jī)凌停,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來售滤,“玉大人罚拟,你說我怎么就攤上這事。” “怎么了舟舒?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵拉庶,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我秃励,道長(zhǎng)氏仗,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任夺鲜,我火速辦了婚禮皆尔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘币励。我一直安慰自己慷蠕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布食呻。 她就那樣靜靜地躺著流炕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪仅胞。 梳的紋絲不亂的頭發(fā)上每辟,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音干旧,去河邊找鬼渠欺。 笑死,一個(gè)胖子當(dāng)著我的面吹牛椎眯,可吹牛的內(nèi)容都是我干的挠将。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼编整,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼舔稀!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起掌测,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤镶蹋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后赏半,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贺归,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年断箫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拂酣。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡仲义,死狀恐怖婶熬,靈堂內(nèi)的尸體忽然破棺而出剑勾,到底是詐尸還是另有隱情,我是刑警寧澤赵颅,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布虽另,位于F島的核電站,受9級(jí)特大地震影響饺谬,放射性物質(zhì)發(fā)生泄漏捂刺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一募寨、第九天 我趴在偏房一處隱蔽的房頂上張望族展。 院中可真熱鬧,春花似錦拔鹰、人聲如沸仪缸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽恰画。三九已至,卻和暖如春瓷马,著一層夾襖步出監(jiān)牢的瞬間拴还,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工决采, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人坟奥。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓树瞭,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親爱谁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子晒喷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容