簡述Angular 5 快速入門

一、概述

盡管被稱為Angular5，實(shí)際上它只是這個(gè)誕生于2012年的前端框架的的第四個(gè)版本：

angular history

看起來差不多半年就發(fā)布一個(gè)新版本，不過實(shí)際上從重寫的版本2開始，開發(fā)接口與核心思想就穩(wěn)定下來了，并基本保持著與前序版本的兼容性。

在5這個(gè)新的版本中，Angular團(tuán)隊(duì)將改進(jìn)重點(diǎn)放在以下特性方面：

1. 更易于構(gòu)建漸進(jìn)式Web應(yīng)用 —— __P__rogressive __W__eb __A__pp
2. 使用構(gòu)建優(yōu)化器剔除無用代碼，以獲得更小的應(yīng)用、更快的網(wǎng)絡(luò)加載時(shí)間
3. 使物化設(shè)計(jì)組件兼容服務(wù)端渲染

PWA是Google提出的一個(gè)標(biāo)準(zhǔn)，旨在讓W(xué)eb應(yīng)用在移動終端上獲得媲美原生應(yīng)用的用戶體驗(yàn)。一個(gè)PWA應(yīng)用主要利用Service Worker和瀏覽器緩存來提省交互體驗(yàn)，它不僅可以直接部署在手機(jī)桌面，而且可以離線應(yīng)用：

pwa

二、引入angular環(huán)境

Angular推薦使用TypeScript來開發(fā)應(yīng)用，這要求使用一個(gè)在線編譯器（JIT）實(shí)時(shí)編譯代碼，或者在開發(fā)期采用預(yù)編譯器(AOT)提前編譯代碼。

為了避免這個(gè)繁瑣的過程影響對Angular框架本質(zhì)的思考，我們將這些必需品進(jìn)行了必要的配置和打包，以便適應(yīng)在線編寫和實(shí)驗(yàn)。現(xiàn)在只需要引入一個(gè)庫a5-loader就可以了。

下圖是庫的構(gòu)成示意，其中的藍(lán)色部件均打包在庫中：

a5-loader

你可能注意到Angular框架并不是藍(lán)色的。的確，我們沒有把它打包在a5-loader中，而是讓模塊加載器（SystemJS）根據(jù)應(yīng)用的需要自動加載。這么做的目的，是為了讓應(yīng)用代碼，和后續(xù)課程中采用的后端構(gòu)建方法保持一致。

如果你對這個(gè)庫有興趣，可以訪問github上的 http://github.com/hubwiz/a5-loader 倉庫。

三、創(chuàng)建Angular組件

Angular是面向組件的前端開發(fā)框架。如果你從事過C/S圖形化應(yīng)用的開發(fā)，應(yīng)該知道組件這個(gè)詞的含義。基本上，組件代表著一些具有圖形界面，并且具有內(nèi)在邏輯能力的程序單元。下圖列出了三種用于實(shí)現(xiàn)乒乓切換的組件：

component sample

組件提供了很好的復(fù)用性，在一堆組件的基礎(chǔ)上，我們使用簡單的膠水代碼就可以實(shí)現(xiàn)相當(dāng)復(fù)雜的交互功能。

現(xiàn)在讓我們來創(chuàng)建Angular組件，代碼相當(dāng)簡單：

@Component({ selector: "ez-app", template: `<h2>Hello,angular5</h2>`})class EzComp{}

在Angular框架中，組件就是指一個(gè)應(yīng)用了Component裝飾器的類。Component裝飾器的作用，就是為被裝飾的類附加元數(shù)據(jù)信息：

annotations

Angular框架對應(yīng)用進(jìn)行編譯引導(dǎo)時(shí)，將使用這些元數(shù)據(jù)構(gòu)造視圖。其中的兩個(gè)元數(shù)據(jù)非常重要：

1. selector：組件宿主元素的CSS選擇符，聲明了組件在DOM樹中的渲染錨點(diǎn)
2. template：組件的模板，框架將以這個(gè)模板為藍(lán)圖構(gòu)建視圖

四、創(chuàng)建Angular模塊

Angular框架的核心是組件化，同時(shí)它的設(shè)計(jì)目標(biāo)是適應(yīng)大型應(yīng)用的開發(fā)。因此，在應(yīng)用開發(fā)中引入了模塊（NgModule）的概念來組織不同的組件（及服務(wù)），一個(gè)Angular應(yīng)用至少需要創(chuàng)建一個(gè)模塊。

為了區(qū)別于JavaScript語言本身的模塊概念，在本課程中將使用NG模塊來表示一個(gè)Angular模塊。

類似于組件，NG模塊就是一個(gè)應(yīng)用了NgModule裝飾器的類。例如，下面的代碼創(chuàng)建了一個(gè)NG模塊EzModule：

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ EzComp ],
 bootstrap: [ EzComp ]
})
class EzModule{}

同樣，NgModule裝飾器用來給被裝飾的類附加模塊元數(shù)據(jù)，可以查看被裝飾類的__annotations__屬性來觀察這一結(jié)果：

ngmodule annotations

NgModule裝飾器聲明了一些關(guān)鍵的元數(shù)據(jù)，來通知框架需要載入哪些NG模塊、編譯哪些組件以及啟動引導(dǎo)哪些組件：

1. imports： 需要引入的外部NG模塊
2. declarations：本模塊創(chuàng)建的組件，加入到這個(gè)元數(shù)據(jù)中的組件才會被編譯
3. bootstrap：聲明啟動引導(dǎo)哪個(gè)組件，必須是編譯過的組件

需要強(qiáng)調(diào)的是，bootstrap元數(shù)據(jù)聲明的組件必須是編譯過的組件：它要么屬于使用imports元數(shù)據(jù)引入的外部NG模塊，要么是已經(jīng)在declarations元數(shù)據(jù)中聲明的本地組件。

NG模塊BrowserModule定義于包@angular/platform-browser，它是Angular跨平臺戰(zhàn)略的重要組成部分。BrowserModule封裝了瀏覽器平臺下的核心功能實(shí)現(xiàn)，與之對應(yīng)的其他平臺實(shí)現(xiàn)還有：

1. ServerModule：服務(wù)端實(shí)現(xiàn)
2. WorkerAppModule：WebWorker實(shí)現(xiàn)

通常情況下開發(fā)Web應(yīng)用時(shí)，我們都需要引入BrowserModule這一NG模塊。

五、啟動Angular應(yīng)用

前面課程中，我們已經(jīng)創(chuàng)建了一個(gè)組件和一個(gè)NG模塊，不過似乎只是定義了一堆的元數(shù)據(jù)，幾乎沒有寫太多有價(jià)值的代碼。
但這就是Angular框架的一個(gè)特點(diǎn)：聲明式開發(fā)。這些元數(shù)據(jù)是用來向框架聲明如何引導(dǎo)啟動應(yīng)用程序的重要信息。

啟動代碼很簡單，引入platformBrowserDynamic()工廠函數(shù)、創(chuàng)建平臺實(shí)例、啟動指定模塊：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
const pref = platformBrowserDynamic()
pref.bootstrapModule(EzModule)

√ 平臺對象：PlatformRef

platformBrowserDynamic()函數(shù)返回一個(gè)PlatformRef對象（Angular對平臺的抽象），這個(gè)函數(shù)最重要的作用，在于其內(nèi)部創(chuàng)建了一個(gè)即時(shí)（__J__ust __I__n __T__ime）編譯器，可以在線實(shí)時(shí)編譯NG模塊和組件，這也是它被稱為動態(tài)（Dynamic）的原因：

dynamic bootstrap

平臺對象的bootstrapModule()方法用來啟動指定的NG模塊，啟動的絕大部分工作，在于利用JIT編譯器編譯NG模塊和組件，當(dāng)這些編譯工作都完成后，則根據(jù)啟動模塊的bootstrap元信息，渲染指定的組件。

六、為什么這么復(fù)雜？

可能你已經(jīng)感覺有點(diǎn)復(fù)雜了：只是為了寫一個(gè)Hello,World，就要寫這么多代碼。

事實(shí)上這些復(fù)雜性是隨著Angular的發(fā)展逐步引入的，從好的一方面說，是提供給開發(fā)者的可選項(xiàng)逐漸增多了，適用場景變多了。

比如，在Angular2正式版之前，都沒有NG模塊的概念，你只要寫一個(gè)組件就可以直接啟動應(yīng)用了。Angular團(tuán)隊(duì)的預(yù)期應(yīng)用場景是大規(guī)模前端應(yīng)用開發(fā)，因此顯式的NG模塊聲明要求也是容易理解的。不過即使是小型的應(yīng)用，由于可以只使用一個(gè)NG模塊，因此這一點(diǎn)的復(fù)雜性增加倒也不多，只是增加了學(xué)習(xí)和運(yùn)用這個(gè)新概念的成本。

另一個(gè)顯而易見的復(fù)雜性，在于多平臺戰(zhàn)略的引入。Angular希望讓應(yīng)用可以跨越瀏覽器、服務(wù)器等多個(gè)平臺（基本）直接運(yùn)行。因此免不了抽象一個(gè)中間層出來，我們需要在應(yīng)用中顯式地選擇相應(yīng)的平臺實(shí)現(xiàn)模塊：

multiple platform

第三個(gè)復(fù)雜性來源于對預(yù)編譯（AOT：Ahead Of Time）的支持。在早期，Angular只有即時(shí)編譯（JIT：Just In Time），也就是說應(yīng)用代碼是在運(yùn)行時(shí)編譯的。即時(shí)編譯的第一個(gè)問題是在應(yīng)用中需要打包編譯器代碼，這增加了最終發(fā)布的應(yīng)用代碼的
大?。涣硪粋€(gè)問題在于編譯需要時(shí)間，這增加了用戶打開應(yīng)用的等待時(shí)間。因此現(xiàn)在的Angular是同時(shí)支持JIT和AOT的，但啟動JIT編譯的應(yīng)用，和啟動AOT編譯的應(yīng)用，在目前需要顯式地進(jìn)行選擇：

aot vs. jit

對于Angular而言，編譯將入口NG模塊定義轉(zhuǎn)換為NG模塊工廠（NgModuleFactory）。對于JIT而言，這一步是隱含在bootstrapModule()中的。而對于AOT而言，生成模塊工廠就結(jié)束了，應(yīng)用啟動時(shí)使用bootstrapModuleFactory()調(diào)用生成的模塊工廠即可。

盡管AOT編譯通常在構(gòu)建階段運(yùn)用，我們可以在瀏覽器里模擬這個(gè)分兩步的過程。

七、理解Angular的初衷

除了框架本身的功能強(qiáng)大導(dǎo)致的復(fù)雜性，Angular的另一個(gè)復(fù)雜性來源在于其高度封裝的聲明式API，讓開發(fā)者難以揣摩、洞察框架的實(shí)現(xiàn)機(jī)制，因此使用起來就很心虛，一旦出現(xiàn)問題則難以分析排錯(cuò)：

angular error

不能把Angular當(dāng)作黑盒來使用。

一方面原因在于，Angular是以其聲明式的模板語法為核心提供API開發(fā)接口的，開發(fā)者書寫的模板，經(jīng)過框架相當(dāng)復(fù)雜的編譯處理，才渲染出最終的視圖對象。如果不嘗試了解從模板到視圖對象這個(gè)過程究竟發(fā)生了什么，我相信你始終會有一種失控的感覺。

另一方面原因在于，Angular是一個(gè)框架，它搭好了應(yīng)用程序的架子，留了一些空隙讓開發(fā)者填充。如果不盡可能地了解框架的運(yùn)行機(jī)制，很難充分地利用好框架。

開發(fā)Angular的出發(fā)點(diǎn)，是為了實(shí)現(xiàn)用HTML來編寫用戶界面，想想一個(gè)靜態(tài)網(wǎng)頁有多容易開發(fā)，你就知道這是多么好的想法：

html challenge

原生HTML的問題在于，首先它需要借助于JavaScript才能實(shí)現(xiàn)過得去的用戶交互，其次它只有那么多標(biāo)簽可用，難以擔(dān)當(dāng)開發(fā)用戶界面的大任。

既然瀏覽器不能直接解釋<ez-gauge>這樣的標(biāo)簽，Angular團(tuán)隊(duì)就引入了編譯器的概念：
在送給瀏覽器之前，先把有擴(kuò)展標(biāo)簽的HTML翻譯成瀏覽器支持的原生HTML：

html compiler

寫在文末：相信很多學(xué)習(xí)angular的同學(xué)都看過我寫的內(nèi)容，想來或多或少的應(yīng)該有些幫助。希望這個(gè)內(nèi)容能給大家?guī)砀嗟膸椭?，也希望大家多多支持億速云。