Angular2 VS Angular4 深度對比：特性、效能

阿新 • • 發佈：2019-01-01

在Web應用開發領域，Angular被認為是最好的開源JavaScript框架之一。

Google的Angular團隊已於3月23日釋出了Angular4，而期待已久的Angular2版本則是之前版本的完全重構。

對於成熟的開發人員來說，有以上兩種選擇是一件很棒的事情；但是，對於處於學習階段的新晉開發人員來說，可能有點不知如何選擇。

那麼，本文將會對Angular2和Angular4進行深度對比，以便幫助大家更好的瞭解這兩個版本。

Angular2

Angular2是在2015年底釋出的。接下來一起了解Angular2這個版本釋出的原因以及如何將其新增到Web開發中。

這個Angular版本更加註重於開發移動應用程式，開發人員可以使用它建立跨平臺的應用程式，在解決了移動應用程式（功能，載入時間等）的挑戰後，Angular2可以更容易的處理桌面元件。

許多模組被淘汰出了Angular核心，這也促使Angular2具備更好的效能。Angular走向了不斷增長的模組生態系統，這意味著開發者可以自由的選擇所需的元件。

Angular 2.0基於ES6標準和“evergreen”現代瀏覽器（可自動更新到最新版本的瀏覽器）。在這些瀏覽器上構建應用，意味著可以更容易的使用Angular進行開發和優化，從而允許開發人員更專注於公司業務實現的程式碼。

Angular2 的特性和效能

AtScript是ES6的超集，用於幫助Angular2的開發。它由Traceur編譯器（結合ES6）進行處理，然後生成ES5程式碼，並使用TypeScript語法建立執行時型別斷言。但是，AtScript不是強制性的，開發人員仍然可以選擇只使用純JavaScript / ES5程式碼來構建Angular應用程式。

提升依賴注入（DI）：

依賴注入（一種程式設計模式，可以通過依賴關係實現呼叫，而不需要生成）是一種Angular顯著區別於其競爭對手的特性。依賴注入在模組化開發和元素隔離方面非常有幫助，但它的實現一直受到Angular 1.x的困擾。Angular2解決了這個問題，另外還添加了一些缺少的功能，如子注入以及生命週期/範圍控制。

註解：

AtScript提供了連線元資料和功能的工具。通過在DI庫中提供基本資訊（可以呼叫函式或建立類的例項來檢查相關元資料），從而簡化了物件例項的構建。通過提供注入註釋，使得引數資訊重寫也變得簡單。

子注入：

子注入繼承了其父級注入所有的專業服務，以及在子層次重寫的能力。根據需要，在一定範圍內，一些型別的物件可以被呼叫和機械的重寫。

例項範圍：

增強的DI庫是由例項範圍控制器組成的，當與子注入器連同範圍識別符號一起使用時，會更加強大。

動態載入：

這是之前的Angular版本均不具備的功能，Angular2包含了這個功能，即使在開發人員忙碌時，也能夠新增新的指令或控制元件。

模板：

在Angular2中，模板編譯過程是非同步的。由於程式碼依賴於ES6模組，因此模組載入程式將通過在部分元件上引用它們，來載入依賴關係。

指令：

Angular2提供了三種指令：

元件指令：通過將邏輯封裝在HTML，CSS和JavaScript中，從而使得元件可複用。
裝飾器指令：可用於裝飾元素（例如，通過隱藏/顯示元素ng-hide/ng-show或新增工具提示）。
模板指令：可以將HTML轉換為可複用的模板。該模板的例項化以及插入到DOM過程可以完全由指令建立者控制。例如ng-repeat和ng-if。

子路由

子路由將通過提供自身的路由功能，將程式的每個部分轉換為更緊密的應用程式，這有助於整個程式功能集合的封裝。

Screen Activator：

通過Angular 2，開發人員可以通過一系列can *回撥對導航生命週期進行更好的控制。

canActivate：它允許或阻止導航到新的控制元件。
啟用：它會響應導航到新控制元件的成功事件。
canDeactivate：它將防止或允許跳出舊控制器的導航。
停用：它會響應跳出舊控制器的成功事件。

設計：

所有這些邏輯都是使用管道架構建立的，這使得將自己的操作新增到管道中或刪除預設操作變得非常簡單。此外，它的非同步字元允許開發人員在管道中，實現對使用者進行身份驗證或載入控制元件資訊的伺服器請求。

記錄：

Angular 2.0包括一個名為diary.js的日誌記錄服務，這是一個非常有用的屬性，用於測量開發人員的編碼投入時間（從而允許開發人員識別程式碼中的瓶頸）。

scope：

$scope 從Angular2中刪除了。

Angular4

Angular4 的特性和效能

相比於Angular 2，Angular4的功能列表中添加了許多新功能，同時還有一些舊功能的改進。

更小更快：

使用Angular4，程式將會消耗更少的空間，並比以前的版本執行地更快。工作主要用於不斷進行改進。

檢視引擎：

Angular4的開發人員修改了檢視引擎的程式碼，例如AOT建立的程式碼。這些修改促使檢視部分生成的程式碼大小減少了大約60％。模板越是複雜，節省的就越多。

動畫包：

Angular4的開發人員將動畫從Angular的核心部分提取出來，並將它們放在獨立的包中。這意味著如果開發人員不需要使用動畫，就可以不建立這些額外的程式碼。

這個功能還能夠幫助更方便的查詢docs檔案和使用自動完成功能。開發人員可以通過為@angular/platform-browser/animations引入瀏覽器動畫模組，從而實現為主要的NgModule新增動畫功能。

改進 ngIf 和 ngFor：

模板繫結語法目前支援一些少量有幫助的更改。現在，開發人員已經可以使用if/else設計語法，並分配區域性變量了。

Angular Universal：

此版本是Universal團隊幾個月的工作成果。這個Universal版本的程式碼的絕大多數目前位於@angular/platform-server。

TypeScript 2.1和2.2相容性：

Angular4開發組將Angular升級為更新版本的TypeScript。這將提高ngc的速度，方便開發人員將在編碼過程中更好的進行型別檢查。

模板的源對映：

每當模板中的某些內容出現錯誤時，都將建立源對映，為原始模板提供有意義的說明內容。

結論：

對於仍處於學習階段的人來說，Angular會有點混亂。但對於具有Angular2知識的有經驗的開發人員來說，會覺得Angular很容易使用，並且使用Angular對專案非常有幫助。

原文連結：https://dzone.com/articles/angular-2-vs-angular-4-features-performance

轉載請註明出自：葡萄城控制元件