Angular常識回顧

一.架構對比

1.Angular8 VS AngularJS

• AngularJS
  • 開發語言為JavaScript
  • 采用不同的指令進行資料和事件綁定
  • 可擴充性差，在複雜應用上維護性差
• Angular8的優點
  • TypeScript提供類型檢查和代碼提示
  • 采用[]進行資料綁定,()事件綁定
  • 優異的可擴充性，可維護性

2.與React對比

• Angular是一個完整架構，而React是一個類庫，其對應Angular的各種特性，需要尋找各種開源社群類庫，如下表所示

  特性	Angular包	React類庫
  資料綁定、依賴注入	@angular/core	MobX
  動态屬性	rxjs	MobX
  路由	@angular/router	React Router v4
  元件庫	@angular/material	React Toolbox
  樣式綁定、樣式隔離	@angular/core	CSS modules
  表單驗證	@angular/forms	FormState
  指令行	@angular/cli	createreactapp

• Angular使用HTML+CSS+元件庫，而React是所有都是JS

3.與Vue對比

• Vue很多思想脫胎于Angular.js，和React類似是一個輕量級的，面向View層的類庫。
• Vue适合快速開發較少的工程，而Angular自帶編碼格式，使得它成為與多個開發人員合作時的好選擇。
• Vue是個人開發者維護的開源項目，而Angular是Google的開源項目。

二.入門常識

1.VSCode插件

• Material Theme：顔色主題
• Debugger for Chrome：Chrome的斷點調試工具
• Path intellisense：自己引用的類庫有對應的提示
• Angular Files：以圖形界面的形式幫我們執行CLI指令
• Angular Language Service：使得在模闆中可以有對應的Controller智能提示
• Angular 8 Snippets：提供快捷代碼塊生成方法

2.Chrome開發者工具

• Element：頁面元素，樣式調試
• Console：控制台輸出
• Sources：源碼，并可以設定斷點
• Network：網絡請求
• Performance：性能的工具
• Memory：記憶體的分析工具
• Application：存儲資訊
• Augury插件：從Angular角度檢視元件，模拟發射事件等等

3.使用Angular-Cli

• 使用

  ng new 項目名

  建立項目。當不希望提示安裝依賴、指定樣式及取消路由時可以使用

  ng new 項目名 --skip-install --style css --routing false

• 相關包作用
  • e2e目錄：測試目錄
  • .editorconfig：在不同的代碼編輯器中維持同樣的代碼風格，比如縮進都用兩個空格等等
  • .gitignore：git中忽略送出哪些檔案
  • angular.json：Angular的配置檔案，設定angular的多項目，裡面配置對應的屬性比如源碼目錄在哪，針對不同的任務要做的事兒如build将結果輸出到哪些檔案裡等等
  • package.json檔案：任何一個軟體包都會有的描述檔案，裡面有對應的配置，主要有dependencies（項目裡直接要使用的類庫，直接引用進來直接調用）

    npm i --save 軟體包名

    和devDependencies（隻在開發中需要使用的類庫如typescript隻在編譯時候使用，因為編譯之後會将Typescript打包成JavaScript，在運作時不需要）

    npm i --save-dev 軟體包名

    • 其中script裡面會定義一些腳本指令用于啟動

      ng xxx

      相關指令，這比直接使用指令行啟動的好處在于使用script執行的時候會直接使用目前依賴的@angular/cli的版本，而不是全局的。全局要安裝對應的cli版本隻能有一個，而不同項目引用的cli版本可以不同。
    • 版本

      大版本号.小版本号.更新檔版本号

    • ~

      表示大版本号和小版本号相同，當每次安裝的時候安裝的是最新的更新檔

    • ^

      表示大版本号相同，其他的最高版本
    • 什麼都不寫是嚴格要求版本
  • package-lock.json：解決依賴沖突的問題，在真正下載下傳的時候根據lock.json下載下傳真正要依賴的軟體包
  • README.md：markdown格式的介紹檔案
  • tsconfig.json：對ts進行相關配置，指定編譯成的js檔案是什麼樣的
  • tslint.json：靜态代碼掃描。不需要運作，在編譯或真正寫代碼的時候按照規則進行掃描，當規則不滿足時IDE會進行報錯，保持代碼風格的一緻，執行

    ng lint

    時也會進行相應的提示。

未完待續