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

內容來源：2017年5月14日，大漠窮秋在「OSC源創會南京站」進行《Angular 4.0核心特性》演講分享。IT大咖說做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。

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

摘要

基於最新的Angular4.0版本，超級大咖大漠窮秋爲咱們講解強大的集成開發平臺Angular/cli，以及Angular最核心的3大概念：組件、模塊、路由。

嘉賓演講視頻地址：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兩個版本，選擇範圍比較廣。能夠利用它快速搭建應用框架。

今天的分享到此結束，謝謝你們！

推薦文章

• 阿里巴巴前端專家渚薰：H5互動的正確打開方式
  

• 百度外賣如何作到前端開發配置化
  

近期活動

• 直播 | 攜手GAIR大會，思必馳DUI開放平臺首秀

原文地址：t.cn/Ros8b2x