• 1. Angular （Angular2）v.s. AngularJS

• 2. 檢查本地環(huán)境的版本

• 3. TypeScript

• 4. Angular CLI

• 5. Angular 的版本

• 6. Angular 版本如何升級

• 7. 依賴注入（dependency injection）

• 8. 編譯-AOT和JIT的區(qū)別

環(huán)境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: VSCode

1. Angular （Angular2）v.s. AngularJS

Angular最早期的版本，也叫AnugularJS，使用javascript開發(fā)；新的版本，才叫Angular，也稱為Angular2，使用typescript開發(fā)，Angular和AngularJS是不兼容的（當然，官方也有2個版本的集成方案）。

2. 檢查本地環(huán)境的版本

檢查npm, node 版本:

• npm 版本：npm -v

• node版本： node -v

• angular、angular CLI全局、本地版本 ng --version

3. TypeScript

Angular要求開發(fā)語言必須為TypeScript。TypeScript有很多好處，比如引入了類、接口的概念，比如強類型，可以在寫代碼時（編譯時）就能檢查到一些錯誤，避免只有代碼在執(zhí)行時才發(fā)現(xiàn)異常。

如果沒用過TypeScript，不要害怕TypeScript這個新的概念，只要你有javascript經(jīng)驗，直接入手，沒有任何難度。只需要用到class、interface等東西時，參考一下別人如何使用，或者查一下typescript文檔即可。

4. Angular CLI

angular-cli又稱 Angular腳手架，是angular開發(fā)團隊自行維護的一個開發(fā)工具，用于快速生成項目或者組件的框架以提高效率?？梢苑奖愕纳蒩ngular app、component、service 等等， 并且可以通過參數(shù)，按照自己的需求去創(chuàng)建。可以說是angular開發(fā)必不可少的利器。
參考：https://cli.angular.io/

ng generate: 新建component、service、pipe, class 等
ng new: 新建angular app
ng update: 升級angular自身，以及依賴
ng version： 顯示anuglar cli全局版本、以及本地的angular cli、angular code等的版本
ng add: 新增第三方庫。會做2件事，1）基于npm安裝node_modules, 2）自動更改配置文件，保證新的依賴正常工作

總結(jié)一下，Angular的開放，離不開AngularCLI。

5. Angular 的版本

不同于Angular2+Angular的不兼容， Angular 2.0 之后會保證向下兼容。官方的版本發(fā)布計劃是：

• 每 6 個月發(fā)布一個主版本（第一位版本號，主版本）

• 每個主版本發(fā)布 1 ~ 3 個小版本（第二位版本號，F(xiàn)eature 版本號）

• 每周發(fā)布一個補丁版本（第三位版本號，Hotfix 版本號）

6. Angular 版本如何升級

Angular CLI提供了升級命令(ng update)，同時，官網(wǎng)（https://update.angular.io/）也有升級指南。選擇從哪個版本升級到哪個版本后，會給出一步一步的升級命令，直接執(zhí)行就好。

7. 依賴注入（dependency injection）

依賴注入是Angular實現(xiàn)的一種應(yīng)用程序設(shè)計模式， 是Angular的核心概念之一。

依賴就是具有一系列功能的服務(wù)(service)， 應(yīng)用程序中的各種組件和指令（derictives）可能需要服務(wù)的功能。 Angular提供了一種平滑的機制，通過它我們可以將這些依賴項注入我們的組件和指令中。因此，我們只是在構(gòu)建依賴關(guān)系，這些依賴關(guān)系可以在應(yīng)用程序的所有組件之間注入。

使用依賴注入還有以下好處，

1. 不需要實例化，（new 實例）。不需要關(guān)心class的構(gòu)造函數(shù)里需要什么參數(shù)

2. 一次注入（app module通過Providers注入），所有組件都可以使用。而且是用同一個service實例（Singleton），也就是說一個service里的數(shù)據(jù)是共分享的，可以用于組件間數(shù)據(jù)傳遞。

8. 編譯-AOT和JIT的區(qū)別

每個Angular應(yīng)用程序都包含瀏覽器無法理解的組件和模板。 因此，在瀏覽器內(nèi)部運行之前，需要先編譯所有Angular應(yīng)用程序。

Angular提供兩種編譯類型：

1. JIT(Just-in-Time) compilation

2. AOT(Ahead-of-Time) compilation

區(qū)別在于，在JIT編譯中，應(yīng)用程序在運行時在瀏覽器內(nèi)部進行編譯；而在AOT編譯中，應(yīng)用程序在構(gòu)建期間進行編譯。
顯而易見，AOT編譯好處多多，因而是Angular的默認編譯方式。主要優(yōu)點

由于應(yīng)用程序是在瀏覽器內(nèi)部運行之前進行編譯的，因此瀏覽器會加載可執(zhí)行代碼并立即呈現(xiàn)應(yīng)用程序，從而加快了呈現(xiàn)速度。

在AOT編譯中，編譯器將與應(yīng)用程序一起發(fā)送外部HTML和CSS文件，從而消除了對那些源文件的單獨AJAX請求，從而減少了ajax請求。

開發(fā)人員可以在構(gòu)建階段檢測并處理錯誤，這有助于最大程度地減少錯誤。
AOT編譯器將HTML和模板添加到JS文件中，然后再在瀏覽器中運行。 因此，沒有多余的HTML文件可讀取，從而為應(yīng)用程序提供了更好的安全性。

本文由博客群發(fā)一文多發(fā)等運營工具平臺 OpenWrite 發(fā)布