您好,欢迎访问一九零五行业门户网

AngularJS、 Angular 2、Angular4的区别详解

字面上的区别
(1)我们常说的 angular 1 是指 angularjs; 从angular 2 开始已经改名了。不再带有js,只是单纯的 angular;  
(2)还有一个不可思议的版本变化: 从 angular 2 直接跳跃到了 angular 4 , 咋不见 angular 3 了呢?
架构上的差别angular 1 是一个典型的 mvc 架构 (model - view - controller ), 其架构如图所示:
相比于 angular 1 的mvc 架构, angular 2 是一个典型的基于组件(component) 架构。从这一点上来说,它与 react.js 结构相似。如下图所示:
为何匆忙推出 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 用法!
代码重用方法在 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 技术。
如何解决app 跨平台问题angular 2 解决了 mobile app 跨平台的问题, 所谓跨平台是指,用 angular 2  编写的 web 在 ios 和 android 上能达到同等原生的用户体验效果,只需要编写一套代码。
小结如果你是刚接触  angular 开发,建议从  angular 2  开始,相对要简单些; 何况  angular 4 还在持续更新中,带版本稳定后,再向  angular 4 进发!
相关推荐:
angular4中常用管道实例详解
编写一个完整的angular4 formtext 组件方法
angular4实际项目搭建详解
以上就是angularjs、 angular 2、angular4的区别详解的详细内容。
其它类似信息

推荐信息