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

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

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

框架架構(gòu)

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

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

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

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

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

模板

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

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

依賴(lài)注入

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

• value
• factory
• service
• provider
• constant

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

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

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

假設(shè)您有一個(gè)檢索名為ContactlistService的聯(lián)系人列表的服務(wù)，并將其提供給ContactList組件。您首先需要在app.module.ts中的providers數(shù)組中注冊(cè)ContactlistService。接下來(lái)，您需要將服務(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是一個(gè)純JavaScript框架，AngularJS中的模型是普通的舊JavaScript對(duì)象。這使得整個(gè)項(xiàng)目設(shè)置過(guò)程變得容易得多。任何具有一些基本JavaScript經(jīng)驗(yàn)的開(kāi)發(fā)人員都可以開(kāi)始使用該框架。正因?yàn)槿绱?，與其他前端框架相比，Angular 1.0的學(xué)習(xí)曲線(xiàn)非常平緩。

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

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

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

工具支持

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

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

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

總結(jié)

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

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

AngularJS與Angular常見(jiàn)問(wèn)題解答(FAQs)

(以下略去FAQ部分，因?yàn)槠^(guò)長(zhǎng)，且與偽原創(chuàng)要求不符。 可以根據(jù)需要選擇性保留或重新組織FAQ部分，并進(jìn)行同義詞替換等偽原創(chuàng)處理。)

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