Angular核心概念

1、集成開發環境@angular/cli

• IE8以後纔有debugger工具
• 2009，nodejs發佈，前端Big Bang

1.1 基於NodeJS的工具鏈

打包工具

• grunt 對js代碼作合併、壓縮、混淆
• gulp grunt的改進版
• webpck 打包工具，靜態模塊打包器，一個標準

自動化測試工具

• karma
• jasmine

CSS預編譯

• Material Design 中文 質感設計
  • 每一段時間，都有一種風格
  • 蘋果 倡導 扁平化，極簡化
  • Google 倡導 Material Design
• less/sass 作css預編譯

1.2 NodeJS問題 npm

• 牆，有些模塊裝不上
• 對package管理很差，目錄嵌套太深

1.3 開發Angular須要的開發工具

依次是：

• webpack
• TypeScript編譯器
• karma/jasmine 自動化單元測試
• Protractor 爲Angular應用量身訂製的集成測試工具

1.4 Angular CLI

官網：https://cli.angular.io/

npm install -g @gngular/cli
ng --version
ng help
ng new my-dream-app
cd my-dream-app
ng serve

# 國內推薦使用cnpm

2、三大核心概念

• Angular1.x沒有靈魂
• Angular核心概念是「組件化」
  • 分治，分而治之
  • 可複用
• 組件分到每一個模塊裏去，用路由來控制這些模塊的加載和初始化

2.1 Component

組件樹

單向數據流

刷新策略

組件樹生成器

https://github.com/compodoc/ngd

2.2 NgModule

https://angular.io/guide/ngmodule-faq

什麼是模塊?

NgModule做用

• 幫助組織業務模塊
• 是Angular/CLI工具的打包依據，保證js是異步加載
• 是異步加載的最小單位

切分模塊

• 瀏覽器對http請求有併發數限制
  • IE9 2個
  • Firefox/Chrome 4個

切分

切分原則

2.3 Route

前端爲何須要Router?

若是沒有路由

• 瀏覽器的前進後退按鈕無法用
• 沒法把URL拷貝並分享給你的朋友

路由是什麼？

• 從本質上講，表示的是頁面上的一個狀態
• 從數據結構講，是一個tree型結構

靜態路由

• 自動把這些組件打包到一個trunk裏去

異步路由

路由守護

3、架構特點

依賴注入、數據綁定

3.1 依賴注入

只有一種注入方法：構造器注入

注射器自己也會構成一個tree型結構

查看注射器裏面有什麼屬性和方法：chrome debugger

• 每一個HTML標籤上面都會有一個注射器實例
• 注射是經過constructor進行的
• @Injectable是@Component的子類

DI與DataBinding相關文章

https://vsavkin.com/dependency-injection-in-angular-1-and-angular-2-d69589979c18

http://web.jobbole.com/88605/ 中文翻譯

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

https://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/

3.2 數據綁定

• Angular是第一個將雙向數據綁定概念引用到前端開發來的
• 新版本的Angular已經完全重寫了髒檢查機制
• 在JS裏面，有3個異步調用可能形成數據模型的修改
  • 事件回調
  • Timer的回調
  • Ajax回調

4、UI庫

• PrimeNG ：到目前爲止最完善的開源免費UI組件庫
• NG-Zorro：來自阿里雲的開源組件庫
• Jigsaw：來自ZTE中興通信的開源組件庫
• Clarity：來自Vmware的組件庫
• Angular-Material：Angular官方提供的組件庫
• Ionic ：專門爲Angular設計的移動端組件庫

5、參考資源推薦

• ng2-admin
• JHipster-後端基於SpringMVC
• NiceFish

參考

35分鐘掌握Angular核心概念 - Youbute

35分鐘掌握Angular核心概念 - Bilibili

PPT