大漠窮秋：全面解讀Angular 4.0核心特性

內容來源：2017年5月14日，大漠窮秋在“OSC源創會南京站”進行《Angular 4.0核心特性》演講分享。IT大咖說作為獨家視訊合作方，經主辦方和講者審閱授權釋出。

閱讀字數：1354 | 8分鐘閱讀

2009年，出現了node.js。它的出現標誌著前端開發正式進入了工業化的時代，前端工程師這個職位得以確立。

Node.js出現後，才有了完整的工具鏈。

@Angular/cli

我們需要有一個統一的node.js模組把所有node工具整合在一起，Angular/cli就是這樣一個平臺。命令列工具可以建立出裡面所有的元件或概念，在生成目錄結構的過程中，還會生成程式碼的模版。

但是Angular/cli也有一些“坑”。

在Windows下面，node-jyp這個包依賴於Visual Studio，node-sass這個node模組也被牆掉了。所以強烈推薦使用cnpm安裝。

Angular/cli把打包、壓縮等工作全部分裝在命令列裡面，並整合了test的所有功能。

Angular中的3個核心的概念分別是“component”、“module”和“route”，“元件化”是Angular最核心的概念。

Component

在新版本Angular裡採用了不可變資料型別，幫助執行髒檢查機制。

Angular2-dependencies-graph是一個node.js的模組，通過它把專案的目錄和結構生成圖表，就可以清晰地知道自己寫的模組位於專案的哪個位置。

NgModule

在真正開發業務系統的時候，光有UI元件是不夠的，還有服務、路由以及各種各樣的directive。

模組是用來組織業務程式碼的利器。把應用切分成多個模組，當使用者進入index頁面的時候，只載入其中的bundle-0.js，當使用者點到對應模組的時候再載入其它的程式碼。

切分模組的時候，需要在業務的檔案體積和請求數量之間取得一個平衡。

Router

如果沒有router，瀏覽器的前進後退按鈕就不能用，也無法把URL拷貝並分享給你的朋友。

Angular新版本中靜態路由只要寫component屬性，說明這個路由需要交給哪個component來處理，Angular就會自動建立這個component並渲染出來。

做非同步路由時要注意的是，寫的是loadchildren，載入的物件是module而不是component。由此可見，NgModule是用來配合Angular/cli做模組的打包和載入。在Angular新版本里，module是最小的打包和載入單位。

路由守衛用來防止未授權的訪問。在前端需要對路由做一定的防護，但目前的防護還遠遠不夠，最重頭的還是在server端，Angular就提供了這樣一些特性。

Angular是第一個把依賴注入這個思想帶入到前端開發裡來的。

在Angular裡，依賴注入只有構造器注入這一種方式。只要在建構函式裡寫需要應用到怎樣的屬性，Angular會自動建立它的例項並注入class。

注射器也是一個樹型結構，在每個標籤上都有injector的例項。

Angular還有一個最重要的設計特色就是資料繫結，它實現了雙向資料繫結。雙向資料繫結最低層有一個髒檢查機制，要做這件事非常的難，所以在Angular之前沒有人去做雙向繫結。新版本的Angular重寫了髒檢查機制，不會再出現效率問題。

在Angular裡面已經有一些比較成熟的元件庫可以用了。例如ng2-bootstrap、PrimeNG和官方提供的Angular-Material2，在移動端也有Ionic支援。

ng2-admin：這個專案做得比較龐大，它裡面的圖表、地圖外掛、list和UI形態等都已經整合好了，可以把它拉下來再自己去做改動。

JHipster：它的後端基於SpringMVC。前端使用者Angular做它的前端框架，它實現了Angular1和Angular2兩個版本，選擇範圍比較廣。可以利用它快速搭建應用框架。

今天的分享到此結束，謝謝大家！

原文地址：t.cn/Ros8b2x