0

0

AngularJS、 Angular 2、Angular4的区别详解

小云云

小云云

发布时间:2018-02-24 15:05:17

|

4849人浏览过

|

来源于php中文网

原创


字面上的区别

(1)我们常说的 angular 1 是指 angularjs; 从angular 2 开始已经改名了。不再带有js,只是单纯的 angular;  
(2)还有一个不可思议的版本变化: 从 angular 2 直接跳跃到了 angular 4 , 咋不见 angular 3 了呢?

架构上的差别

Angular 1 是一个典型的 MVC 架构 (Model - View - Controller ), 其架构如图所示:

MVC 架构示意图

相比于 Angular 1 的MVC 架构, Angular 2 是一个典型的基于组件(component) 架构。从这一点上来说,它与 React.js 结构相似。如下图所示:
Angular 2  架构

为何匆忙推出 Angular 2 ?

照理说,Angular 1. x 版本已经足够强大,为什么还匆匆忙忙推出 Angular 2 呢?这是迫于 mobile apps 的需要。按照惯性的思维: Angular 2 应该是 Angular 1.x 的升级版本,其实不然, Angular 2 与 Angular 1.x 完全不同, 最基本的语法都不一样。  Angular 1.x 是 基于 JavaScript的框架,而Angular 2 是基于 TypeScript的框架。

所以说,当你决定要学习 Angular 时,要想好是学 Angular 1 还是 Angular 2。 那么到底学哪个版本好呢? 这不好讲,还得看项目需要。 如果单纯地学习,当然是越高的版本越好,与时俱进嘛!

Angular 3 怎么不见了?

Angular 团队开发 Angular 3时,在router模块上出现了问题, 再三纠结,决定放弃 Angular 3 ,直接奔向了 Angular 4

Angular 2 有什么好?

相比  Angular 1.x,   Angular 2 的体积更小,为什么这么做,说白了,一个字——;  如果仅仅用于PC 端的WEB开发,  Angular 1.x足以应对; 如果是用于 mobile app ,在用户体验方面,略显捉襟见肘!

Angular 4 有什么好?

Angular 4 是  Angular 2 的升级版本, 也就是说,从 Angular 2之后,它们的版本一脉相承,是升级版本,而不是推到重来的版本。 Angular 4 比 Angular 2 更快。
所以说,  从 Angular 1.x 到 Angular 2 ,再发展到 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 的区别大了去了。 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 升级到 Angular 2 难度之大,可以预见!

这么看来, Angular  1 与 2 的差别,并不是什么框架上的差别,而是它们的语法完全不一样, 一个用JavaScript,一个用 TypeScript。 那为什么Angular 4 是 Angular 2 的升级版呢?  答案很简单, 因为 4和2 用的都是 TypeScript 用法!

Vondy
Vondy

下一代AI应用平台,汇集了一流的工具/应用程序

下载
代码重用方法

在 Angular 1 中,最为常用的是 $scope 在 Angular 2和4中被去掉了。在新版本中,更多推崇的是 directive  和 controller,  通过对 component 组件的split(分割),从而实现代码的复用。

对 Mobile app 的支持

Angular 1的设计初衷是为了实现响应式网页、双向数据绑定的Web应用,如果从Html5的概念来看,Angular 1 算是一个很好的支持H5的前端框架了。 如果我们对Angular  有更高的期望,那就是希望Angular 能很好地支持 mobile app,达到APP 原生的用户体验效果。 而这正是 Angular 1 的短板,鉴于词,才推出了 Angular 2 及其后来的Angular 4。

接下来,我们重点谈谈 Angular 2 的架构

Angular 2 架构

可以说, Angular 2 是面向 mobile app 的架构,为了达到APP 原生的效果, Angular 2  特有引入了 NativeScript 技术。

Angular 2 的APP 效果

如何解决APP 跨平台问题

Angular 2 解决了 mobile app 跨平台的问题, 所谓跨平台是指,用 Angular 2  编写的 Web 在 iOS 和 Android 上能达到同等原生的用户体验效果,只需要编写一套代码。

小结

如果你是刚接触  Angular 开发,建议从  Angular 2  开始,相对要简单些; 何况  Angular 4 还在持续更新中,带版本稳定后,再向  Angular 4 进发!

相关推荐:

Angular4中常用管道实例详解

编写一个完整的Angular4 FormText 组件方法

angular4实际项目搭建详解

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

49

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

196

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

41

2026.03.13

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

550

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

472

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

297

2025.12.30

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

229

2025.12.30

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

107

2025.12.30

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号