內容來源:2017年5月14日,大漠窮秋在「OSC源創會南京站」進行《Angular 4.0核心特性》演講分享。IT大咖說做爲獨家視頻合做方,經主辦方和講者審閱受權發佈。前端
閱讀字數:1354 | 8分鐘閱讀node
摘要npm
基於最新的Angular4.0版本,超級大咖大漠窮秋爲咱們講解強大的集成開發平臺Angular/cli,以及Angular最核心的3大概念:組件、模塊、路由。bootstrap
嘉賓演講視頻地址:t.cn/RKc9GNc後端
集成開發環境@Angular4.0瀏覽器
2009年,出現了node.js。它的出現標誌着前端開發正式進入了工業化的時代,前端工程師這個職位得以確立。sass
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的模塊,經過它把項目的目錄和結構生成圖表,就能夠清晰地知道本身寫的模塊位於項目的哪一個位置。
在真正開發業務系統的時候,光有UI組件是不夠的,還有服務、路由以及各類各樣的directive。
模塊是用來組織業務代碼的利器。把應用切分紅多個模塊,當用戶進入index頁面的時候,只加載其中的bundle-0.js,當用戶點到對應模塊的時候再加載其它的代碼。
切分模塊的時候,須要在業務的文件體積和請求數量之間取得一個平衡。
若是沒有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