AngularJS、Angular2、Angular4的區(qū)別詳解

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:03:18

AngularJS、Angular2、Angular4的區(qū)別詳解

AngularJS、Angular2、Angular4的區(qū)別詳解:字面上的區(qū)別（1）我們常說的 Angular 1 是指 AngularJS；從Angular 2 開始已經(jīng)改名了。不再帶有JS，只是單純的 Angular；（2）還有一個(gè)不可思議的版本變化：從 Angular 2 直接跳躍到了 Angular 4 ，咋不見 Angular 3 了呢？架構(gòu)上的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀AngularJS、Angular2、Angular4的區(qū)別詳解:字面上的區(qū)別（1）我們常說的 Angular 1 是指 AngularJS；從Angular 2 開始已經(jīng)改名了。不再帶有JS，只是單純的 Angular；（2）還有一個(gè)不可思議的版本變化：從 Angular 2 直接跳躍到了 Angular 4 ，咋不見 Angular 3 了呢？架構(gòu)上的

字面上的區(qū)別

（1）我們常說的 Angular 1 是指 AngularJS；從Angular 2 開始已經(jīng)改名了。不再帶有JS，只是單純的 Angular；
（2）還有一個(gè)不可思議的版本變化：從 Angular 2 直接跳躍到了 Angular 4 ，咋不見 Angular 3 了呢？

架構(gòu)上的差別

Angular 1 是一個(gè)典型的 MVC 架構(gòu) （Model - View - Controller ），其架構(gòu)如圖所示：

MVC 架構(gòu)示意圖

相比于 Angular 1 的MVC 架構(gòu)， Angular 2 是一個(gè)典型的基于組件（component) 架構(gòu)。從這一點(diǎn)上來說，它與 React.js 結(jié)構(gòu)相似。如下圖所示：
Angular 2 架構(gòu)

為何匆忙推出 Angular 2 ？

照理說，Angular 1. x 版本已經(jīng)足夠強(qiáng)大，為什么還匆匆忙忙推出 Angular 2 呢？這是迫于 mobile apps 的需要。按照慣性的思維： Angular 2 應(yīng)該是 Angular 1.x 的升級(jí)版本，其實(shí)不然， Angular 2 與 Angular 1.x 完全不同，最基本的語法都不一樣。 Angular 1.x 是基于 JavaScript的框架，而Angular 2 是基于 TypeScript的框架。

所以說，當(dāng)你決定要學(xué)習(xí) Angular 時(shí)，要想好是學(xué) Angular 1 還是 Angular 2。那么到底學(xué)哪個(gè)版本好呢？這不好講，還得看項(xiàng)目需要。如果單純地學(xué)習(xí)，當(dāng)然是越高的版本越好，與時(shí)俱進(jìn)嘛！

Angular 3 怎么不見了？

Angular 團(tuán)隊(duì)開發(fā) Angular 3時(shí)，在router模塊上出現(xiàn)了問題，再三糾結(jié)，決定放棄 Angular 3 ，直接奔向了 Angular 4

Angular 2 有什么好？

相比 Angular 1.x， Angular 2 的體積更小，為什么這么做，說白了，一個(gè)字——快；如果僅僅用于PC 端的WEB開發(fā)， Angular 1.x足以應(yīng)對(duì)；如果是用于 mobile app ，在用戶體驗(yàn)方面，略顯捉襟見肘！

Angular 4 有什么好？

Angular 4 是 Angular 2 的升級(jí)版本，也就是說，從 Angular 2之后，它們的版本一脈相承，是升級(jí)版本，而不是推到重來的版本。 Angular 4 比 Angular 2 更快。
所以說，從 Angular 1.x 到 Angular 2 ，再發(fā)展到 Angular 4，其路線就是為了更快一些。

Angular 1寫的代碼無法用在Angular 2上，這是為什么？

Angular 1 代碼是基于 JavaScript 寫的，代碼示例：

var angular1 = angular
 .module('uiroute', ['ui.router']);
angular1.controller('CarController', function ($scope) {
 $scope.CarList = ['Audi', 'BMW', 'Bugatti', 'Jaguar'];
});

Angular 2 代碼是基于 TypeScript 寫的。 TypeScript與JavaScript 的區(qū)別大了去了。 TypeScript 是 JavaScript的超集（superset）。看一段 Angular 2 代碼：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule); 
import { NgModule } from "@angular/core"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { AppComponent } from "../app/app.component"; 
@NgModule({ 
 imports: [BrowserModule], 
 declarations: [AppComponent], 
 bootstrap: [AppComponent] 
}) 
export class AppModule { } 
import { Component } from '@angular/core' @Component({ 
 selector: 'app-loader', 
 template: ` 
<p> 
<p> 
 <h4>Welcome to Angular with ASP.NET Core and Visual Studio 2017</h4></p></p>` 
}) 
export class AppComponent{}

如果不熟悉 TypeScript 語法，上面這段代碼不知所云！既然差異這么大，把 Angular 1 升級(jí)到 Angular 2 難度之大，可以預(yù)見！

這么看來， Angular 1 與 2 的差別，并不是什么框架上的差別，而是它們的語法完全不一樣，一個(gè)用JavaScript，一個(gè)用 TypeScript。那為什么Angular 4 是 Angular 2 的升級(jí)版呢？答案很簡(jiǎn)單，因?yàn)?4和2 用的都是 TypeScript 用法！

代碼重用方法

在 Angular 1 中，最為常用的是 $scope 在 Angular 2和4中被去掉了。在新版本中，更多推崇的是 directive 和 controller, 通過對(duì) component 組件的split（分割），從而實(shí)現(xiàn)代碼的復(fù)用。

對(duì) Mobile app 的支持

Angular 1的設(shè)計(jì)初衷是為了實(shí)現(xiàn)響應(yīng)式網(wǎng)頁、雙向數(shù)據(jù)綁定的Web應(yīng)用，如果從Html5的概念來看，Angular 1 算是一個(gè)很好的支持H5的前端框架了。如果我們對(duì)Angular 有更高的期望，那就是希望Angular 能很好地支持 mobile app，達(dá)到APP 原生的用戶體驗(yàn)效果。而這正是 Angular 1 的短板，鑒于詞，才推出了 Angular 2 及其后來的Angular 4。

接下來，我們重點(diǎn)談?wù)?Angular 2 的架構(gòu)