AngularJS與Angular 2 的主要區(qū)別

本文對比了初代AngularJS和Angular 2 的主要差異。如果您目前正在使用AngularJS項目，並且不確定是否應(yīng)該遷移，本文將幫助您入門。近年來，Angular作為開發(fā)單頁面應(yīng)用程序(SPA)和漸進式Web應(yīng)用程序(PWA)的框架和平臺，發(fā)展迅速。

AngularJS基於聲明式編程構(gòu)建視圖的理念。這需要將DOM操作與應(yīng)用程序的業(yè)務(wù)邏輯解耦，這種方法本身有很多好處。然而，AngularJS在性能和底層工作方式方面存在許多不足。因此，開發(fā)團隊花費一年時間從頭重寫代碼，並於2016年末發(fā)布了Angular 2。大多數(shù)開發(fā)者認(rèn)為Angular 2是一個與原始AngularJS幾乎沒有相似之處的不同平臺。讓我們比較和對比一下AngularJS和Angular 2 。

框架架構(gòu)

AngularJS遵循傳統(tǒng)的MVC(模型-視圖-控制器)架構(gòu)，包括模型、視圖和控制器：

• 控制器: 處理用戶交互，綁定模型和視圖。
• 視圖: 表示表示層和實際UI。
• 模型: 數(shù)據(jù)的抽象表示。

一些開發(fā)者認(rèn)為AngularJS遵循MVVM模式，用視圖模型代替控制器。視圖模型是一個類似於控制器的JavaScript函數(shù)。它的特殊之處在於它同步視圖和模型之間的數(shù)據(jù)。對UI元素所做的更改會自動傳播到模型，反之亦然。下圖顯示了各種AngularJS組件如何連接在一起。

Angular則採用基於組件的架構(gòu)。每個Angular應(yīng)用程序至少有一個稱為根組件的組件。每個組件都有一個相關(guān)的類，負(fù)責(zé)處理業(yè)務(wù)邏輯，以及一個表示視圖層的模板。多個密切相關(guān)的組件可以堆疊在一起創(chuàng)建模塊，每個模塊本身形成一個功能單元。

如您在圖中所見，組件綁定到模板。組件使用TypeScript類組成，並使用@Component註解將模板附加到它們。可以使用Angular的依賴注入子系統(tǒng)將服務(wù)注入到組件中。 Angular中的模塊概念與AngularJS模塊大相徑庭。 NgModule是定義功能單元的容器。 NgModule可以包含組件、服務(wù)和其他函數(shù)。然後可以導(dǎo)入和使用模塊單元與其他模塊。

模板

在AngularJS中，模板使用HTML編寫。為了使其動態(tài)化，您可以添加AngularJS特定的代碼，例如屬性、標(biāo)記、過濾器和表單控件。此外，它還支持前面提到的雙向數(shù)據(jù)綁定技術(shù)。以下代碼片段演示了在模板中使用指令和雙大括號：

<div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar"></input>
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  <??>
</div>

在Angular中，AngularJS的模板結(jié)構(gòu)經(jīng)過了改進，並在模板中添加了許多新功能。主要區(qū)別在於每個組件都附加了一個模板。除了<script>、<style>、<base>和<title>之外，所有HTML元素都在模板中工作。除此之外，還有模板綁定、模板插值、模板語句、屬性綁定、事件綁定和雙向綁定等功能。內(nèi)置屬性指令（如NgClass、NgStyle和NgModel）和內(nèi)置結(jié)構(gòu)指令（如NgIf、NgForOf、NgSwitch）也是模板的一部分。

依賴注入

依賴注入是一種設(shè)計模式，負(fù)責(zé)滿足依賴項並在需要時將它們注入到組件中。這避免了將依賴項硬編碼到組件中的需要。 AngularJS有一個注入器子系統(tǒng)，負(fù)責(zé)創(chuàng)建組件、注入依賴項和解析所有依賴項列表。以下組件可以按需注入：

• value
• factory
• service
• provider
• constant

可以使用工廠方法注入服務(wù)、指令和過濾器。這是一個工廠方法的示例。工廠方法向名為myModule的模塊註冊：

angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);

儘管方法保持不變，但Angular擁有一個比舊的DI模式不同的新型依賴注入系統(tǒng)。 Angular的依賴注入通過包含提供程序和聲明的@NgModule數(shù)組進行管理。 declarations數(shù)組是聲明組件和指令的空間。依賴項和服務(wù)通過providers數(shù)組註冊。

假設(shè)您有一個檢索名為ContactlistService的聯(lián)繫人列表的服務(wù)，並將其提供給ContactList組件。您首先需要在app.module.ts中的providers數(shù)組中註冊ContactlistService。接下來，您需要將服務(wù)注入到組件中，如下所示：

import { Component }   from '@angular/core';
import { Contact }        from './contact';
import { ContactListService } from './contactlist.service';

@Component({
  selector: 'app-contacts-list',
  template: `
    <div *ngFor="let contact of contacts">
      {{contact.id}} - {{contact.name}} - {{contact.number}}
    </div>
  `
})
export class ContactListComponent {
  contacts: Contact[];

  constructor(contactlistService: ContactListService) {
    this.contacts = contactlistService.getcontacts();
  }
}

在這裡，我們告訴Angular將服務(wù)注入到組件的構(gòu)造函數(shù)中。

JavaScript vs TypeScript

AngularJS是一個純JavaScript框架，AngularJS中的模型是普通的舊JavaScript對象。這使得整個項目設(shè)置過程變得容易得多。任何具有一些基本JavaScript經(jīng)驗的開發(fā)人員都可以開始使用該框架。正因為如此，與其他前端框架相比，Angular 1.0的學(xué)習(xí)曲線非常平緩。

Angular 2 引入了TypeScript作為構(gòu)建應(yīng)用程序的默認(rèn)語言。 TypeScript是JavaScript的語法超集，編譯成普通的JavaScript。 Angular團隊選擇TypeScript而不是JavaScript是因為類型註釋功能，它允許您進行可選的靜態(tài)類型檢查。類型檢查可以防止編譯時錯誤潛入您的代碼中，否則這些錯誤可能會被忽略。這使得您的JavaScript代碼更可預(yù)測。

除此之外，TypeScript還因其類、接口和裝飾器（類裝飾器、屬性裝飾器和參數(shù)裝飾器）而流行。 Angular使用TypeScript類來定義組件。 @Component是如何使用類裝飾器將元數(shù)據(jù)附加到組件的一個流行示例。通常，這包括組件配置詳細(xì)信息，例如模板選擇器標(biāo)籤、templateUrl和providers數(shù)組，以便您可以將任何相關(guān)依賴項注入到該組件中：

<div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar"></input>
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  <??>
</div>

工具支持

更好的工具支持幫助開發(fā)人員更快地構(gòu)建事物，並添加到整體開發(fā)工作流程中。例如，命令行界面(CLI)可以大大減少從頭開始創(chuàng)建應(yīng)用程序所花費的時間。同樣，還有其他工具，如IDE、文本編輯器、測試工具包等，可以幫助您使開髮變得更容易。

AngularJS沒有官方的CLI，但有很多可用的第三方生成器和工具。對於IDE，WebStorm和Aptana是開發(fā)人員中流行的選擇。如果您像我一樣，您可以自定義普通的文本編輯器，如Submlime Text編輯器，並向其中添加正確的插件。 AngularJS有一個用於調(diào)試和測試的瀏覽器擴展，稱為ng-inspector。 AngularJS的結(jié)構(gòu)允許無障礙地導(dǎo)入第三方模塊。您可以在ngmodules.org上找到所有流行的ng模塊，這是一個用於託管AngularJS模塊的開源項目。

與AngularJS相比，Angular擁有更多工具支持。有一個官方的CLI，允許您初始化新項目、為其提供服務(wù)，以及為生產(chǎn)構(gòu)建優(yōu)化的包。您可以閱讀GitHub上的Angular CLI了解更多信息。因為Angular使用TypeScript而不是JavaScript，所以支持Visual Studio作為IDE。這還不是全部。還有許多IDE插件和獨立工具可以幫助您自動化和加快開發(fā)週期的某些方面。用於調(diào)試的Augury、用於代碼分析的NgRev、用於代碼驗證的Codelyzer等都是非常有用的工具。

總結(jié)

AngularJS有很多缺陷——大多數(shù)與性能有關(guān)——但它曾經(jīng)是快速原型設(shè)計的首選。但是，現(xiàn)在返回AngularJS或維護AngularJS項目沒有任何意義。如果您還沒有遷移，您應(yīng)該考慮這樣做。

在本文中，我們介紹了AngularJS和Angular 2 之間的五大主要區(qū)別。除了模板結(jié)構(gòu)和依賴注入的方法之外，幾乎所有其他功能都進行了改進。許多流行的Angular 1.0功能，如控制器、範(fàn)圍、指令、模塊定義等，已被其他替代方案取代。此外，底層語言已更改，結(jié)構(gòu)也已修改。

AngularJS與Angular常見問題解答(FAQs)

(以下略去FAQ部分，因為篇幅過長，且與偽原創(chuàng)要求不符。 可以根據(jù)需要選擇性保留或重新組織FAQ部分，並進行同義詞替換等偽原創(chuàng)處理。)

以上是AngularJS和Angular 2：詳細(xì)的比較的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！