907
幹貨：全麵解讀Angular 4.0核心特性
內容來源：2017年5月14日，大漠窮秋在“OSC源創會南京站”進行《Angular 4.0核心特性》演講分享。IT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。
閱讀字數：1354 | 8分鍾閱讀
摘要
基於最新的Angular4.0版本，超級大咖大漠窮秋為我們講解強大的集成開發平台Angular/cli，以及Angular最核心的3大概念：組件、模塊、路由。
嘉賓演講視頻地址：https://t.cn/RKc9GNc
集成開發環境@Angular4.0
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大核心概念
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裏，依賴注入隻有構造器注入這一種方式。隻要在構造函數裏寫需要應用到怎樣的屬性，Angular會自動創建它的實例並注入class。
注射器也是一個樹型結構，在每個標簽上都有injector的實例。
Angular還有一個最重要的設計特色就是數據綁定，它實現了雙向數據綁定。雙向數據綁定最低層有一個髒檢查機製，要做這件事非常的難，所以在Angular之前沒有人去做雙向綁定。新版本的Angular重寫了髒檢查機製，不會再出現效率問題。
UI庫
在Angular裏麵已經有一些比較成熟的組件庫可以用了。例如ng2-bootstrap、PrimeNG和官方提供的Angular-Material2，在移動端也有Ionic支持。
參考資源推薦
ng2-admin：這個項目做得比較龐大，它裏麵的圖表、地圖插件、list和UI形態等都已經集成好了，可以把它拉下來再自己去做改動。
JHipster：它的後端基於SpringMVC。前端用戶Angular做它的前端框架，它實現了Angular1和Angular2兩個版本，選擇範圍比較廣。可以利用它快速搭建應用框架。
今天的分享到此結束，謝謝大家！
福利贈票！
炎炎夏日，IT大咖說贈福利，送清涼！作為GOPS全球運維大會的官方現場直播合作夥伴，特為小夥伴們爭取了免費票福利（原價￥1600）！
獲取方式：
掃碼加這位小姐姐微信（或加微信號：ITDKS666），她會告訴你咋整！（備注：GOPS）
小茉莉
名額有限，未獲得贈票的小夥伴，可訪問IT大咖說專屬通道（https://t.cn/RKQIv6q）購票，享7折優惠！
原文地址：https://t.cn/Ros8b2x
最後更新：2017-07-20 17:02:27