Angular 5 快速入門開發非視頻教程，告別Angular.js , Angular 2 , Anuglar 4吧。

1、概述

儘管被稱爲Angular5，實際上它只是這個誕生於2012年的前端框架的的第四個版本：

看起來差很少半年就發佈一個新版本，不過實際上從重寫的版本2開始，開發接口與核心思想就穩定下來了，並基本保持着與前序版本的兼容性。

在5這個新的版本中，Angular團隊將改進重點放在如下特性方面：

• 更易於構建漸進式Web應用 —— __P__rogressive __W__eb __A__pp
• 使用構建優化器剔除無用代碼，以得到更小的應用、更快的網絡加載時間
• 使物化設計組件兼容服務端渲染

PWA是Google提出的一個標準，旨在讓Web應用在移動終端上得到媲美原生應用的用戶體驗。一個PWA應用主要利用Service Worker和瀏覽器緩存來提省交互體驗，它不只能夠直接部署在手機桌面，並且能夠離線應用：

2、引入angular環境

Angular推薦使用TypeScript來開發應用，這要求使用一個在線編譯器（JIT）實時編譯代碼，或者在開發期採用預編譯器(AOT)提早編譯代碼。

爲了不這個繁瑣的過程影響對Angular框架本質的思考，咱們將這些必需品進行了必要的配置和打包，以便適應在線編寫和實驗。如今只須要引入一個庫a5-loader就能夠了。

下圖是庫的構成示意，其中的藍色部件均打包在庫中：

你可能注意到Angular框架並非藍色的。的確，咱們沒有把它打包在a5-loader中，而是讓模塊加載器（SystemJS）根據應用的須要自動加載。這麼作的目的，是爲了讓應用代碼，和後續課程中採用的後端構建方法保持一致。

若是你對這個庫有興趣，能夠訪問github上的 http://github.com/hubwiz/a5-l... 倉庫。

3、建立Angular組件

Angular是面向組件的前端開發框架。若是你從事過C/S圖形化應用的開發，應該知道組件這個詞的含義。基本上，組件表明着一些具備圖形界面，而且具備內在邏輯能力的程序單元。下圖列出了三種用於實現乒乓切換的組件：

組件提供了很好的複用性，在一堆組件的基礎上，咱們使用簡單的膠水代碼就能夠實現至關複雜的交互功能。

如今讓咱們來建立Angular組件，代碼至關簡單：

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

在Angular框架中，__組件__就是指一個應用了Component裝飾器的類。Component裝飾器的做用，就是爲被裝飾的類附加元數據信息：

Angular框架對應用進行編譯引導時，將使用這些元數據構造視圖。其中的兩個元數據很是重要：

• __selector__：組件宿主元素的CSS選擇符，聲明瞭組件在DOM樹中的渲染錨點
• __template__：組件的模板，框架將以這個模板爲藍圖構建視圖

4、建立Angular模塊

Angular框架的核心是組件化，同時它的設計目標是適應大型應用的開發。所以，在應用開發中引入了模塊（NgModule）的概念來組織不一樣的組件（及服務），一個Angular應用至少須要建立一個模塊。

爲了區別於JavaScript語言自己的模塊概念，在本課程中將使用__NG模塊__來表示一個Angular模塊。

相似於組件，NG模塊就是一個應用了NgModule裝飾器的類。例如，下面的代碼建立了一個NG模塊EzModule：

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

一樣，NgModule裝飾器用來給被裝飾的類附加模塊元數據，能夠查看被裝飾類的__annotations__屬性來觀察這一結果：

NgModule裝飾器聲明瞭一些關鍵的元數據，來通知框架須要載入哪些NG模塊、編譯哪些組件以及啓動引導哪些組件：

• __imports__： 須要引入的外部NG模塊
• __declarations__：本模塊建立的組件，加入到這個元數據中的組件纔會被編譯
• __bootstrap__：聲明啓動引導哪一個組件，必須是編譯過的組件

須要強調的是，bootstrap元數據聲明的組件必須是編譯過的組件：它要麼屬於使用imports元數據引入的外部NG模塊，要麼是已經在declarations元數據中聲明的本地組件。

NG模塊BrowserModule定義於包@angular/platform-browser，它是Angular跨平臺戰略的重要組成部分。BrowserModule封裝了瀏覽器平臺下的核心功能實現，與之對應的其餘平臺實現還有：

• ServerModule：服務端實現
• WorkerAppModule：WebWorker實現

一般狀況下開發Web應用時，咱們都須要引入BrowserModule這一NG模塊。

5、啓動Angular應用

前面課程中，咱們已經建立了一個組件和一個NG模塊，不過彷佛只是定義了一堆的元數據，幾乎沒有寫太多有價值的代碼。
但這就是Angular框架的一個特色：__聲明式開發__。這些元數據是用來向框架聲明如何引導啓動應用程序的重要信息。

啓動代碼很簡單，引入platformBrowserDynamic()工廠函數、建立平臺實例、啓動指定模塊：

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

√ 平臺對象：PlatformRef

platformBrowserDynamic()函數返回一個PlatformRef對象（Angular對平臺的抽象），這個函數最重要的做用，在於其內部建立了一個即時（__J__ust __I__n __T__ime）編譯器，能夠在線實時編譯NG模塊和組件，這也是它被稱爲動態（Dynamic）的緣由：

平臺對象的bootstrapModule()方法用來啓動指定的NG模塊，啓動的絕大部分工做，在於利用JIT編譯器編譯NG模塊和組件，當這些編譯工做都完成後，則根據啓動模塊的bootstrap元信息，渲染指定的組件。

6、爲何這麼複雜？

可能你已經感受有點複雜了：只是爲了寫一個Hello,World，就要寫這麼多代碼。

事實上這些複雜性是隨着Angular的發展逐步引入的，從好的一方面說，是提供給開發者的可選項逐漸增多了，適用場景變多了。

好比，在Angular2正式版以前，都沒有NG模塊的概念，你只要寫一個組件就能夠直接啓動應用了。Angular團隊的預期應用場景是大規模前端應用開發，所以顯式的NG模塊聲明要求也是容易理解的。不過即便是小型的應用，因爲能夠只使用一個NG模塊，所以這一點的複雜性增長倒也很少，只是增長了學習和運用這個新概念的成本。

另外一個顯而易見的複雜性，在於多平臺戰略的引入。Angular但願讓應用能夠跨越瀏覽器、服務器等多個平臺（基本）直接運行。所以免不了抽象一箇中間層出來，咱們須要在應用中顯式地選擇相應的平臺實現模塊：

第三個複雜性來源於對預編譯（AOT：Ahead Of Time）的支持。在早期，Angular只有即時編譯（JIT：Just In Time），也就是說應用代碼是在運行時編譯的。即時編譯的第一個問題是在應用中須要打包編譯器代碼，這增長了最終發佈的應用代碼的
大小；另外一個問題在於編譯須要時間，這增長了用戶打開應用的等待時間。所以如今的Angular是同時支持JIT和AOT的，但啓動JIT編譯的應用，和啓動AOT編譯的應用，在目前須要顯式地進行選擇：

對於Angular而言，編譯將入口NG模塊定義轉換爲NG模塊工廠（NgModuleFactory）。對於JIT而言，這一步是隱含在bootstrapModule()中的。而對於AOT而言，生成模塊工廠就結束了，應用啓動時使用bootstrapModuleFactory()調用生成的模塊工廠便可。

儘管AOT編譯一般在構建階段運用，咱們能夠在瀏覽器裏模擬這個分兩步的過程。

7、理解Angular的初衷

除了框架自己的功能強大致使的複雜性，Angular的另外一個複雜性來源在於其高度封裝的聲明式API，讓開發者難以揣摩、洞察框架的實現機制，所以使用起來就很心虛，一旦出現問題則難以分析排錯：

不能把Angular看成黑盒來使用。

一方面緣由在於，Angular是以其聲明式的模板語法爲核心提供API開發接口的，開發者書寫的模板，通過框架至關複雜的編譯處理，才渲染出最終的視圖對象。若是不嘗試瞭解從模板到視圖對象這個過程究竟發生了什麼，我相信你始終會有一種失控的感受。

另外一方面緣由在於，Angular是一個框架，它搭好了應用程序的架子，留了一些空隙讓開發者填充。若是不盡量地瞭解框架的運行機制，很難充分地利用好框架。

開發Angular的出發點，是爲了實現用HTML來編寫用戶界面，想一想一個靜態網頁有多容易開發，你就知道這是多麼好的想法：

原生HTML的問題在於，首先它須要藉助於JavaScript才能實現過得去的用戶交互，其次它只有那麼多標籤可用，難以擔當開發用戶界面的大任。

既然瀏覽器不能直接解釋<ez-gauge>這樣的標籤，Angular團隊就引入了編譯器的概念：
在送給瀏覽器以前，先把有擴展標籤的HTML翻譯成瀏覽器支持的原生HTML：

寫在文末：相信不少學習angular的同窗都看過我寫的內容，想來或多或少的應該有些幫助。但願這個內容能給你們帶來更多的幫助，讓你們可以更快的進入angular5的世界，更多精彩內容請移步：

http://xc.hubwiz.com/course/59de66862d4f22811dc6b2f7