Angular2 VS Angular4 深度对比:特性、性能

本文来自于:葡萄城控件技术团队博客


在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。

Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。

对于成熟的开发人员来说,有以上两种选择是一件很棒的事情;但是,对于处于学习阶段的新晋开发人员来说,可能有点不知如何选择。

那么,本文将会对Angular2和Angular4进行深度对比,以便帮助大家更好的了解这两个版本。

Angular2

Angular2是在2015年底发布的。接下来一起了解Angular2这个版本发布的原因以及如何将其添加到Web开发中。

这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台的应用程序,在解决了移动应用程序(功能,加载时间等)的挑战后,Angular2可以更容易的处理桌面组件。

许多模块被淘汰出了Angular核心,这也促使Angular2具备更好的性能。Angular走向了不断增长的模块生态系统,这意味着开发者可以自由的选择所需的组件。

Angular 2.0基于ES6标准和“evergreen”现代浏览器(可自动更新到最新版本的浏览器)。在这些浏览器上构建应用,意味着可以更容易的使用Angular进行开发和优化,从而允许开发人员更专注于公司业务实现的代码。

Angular2 的特性和性能

AtScript是ES6的超集,用于帮助Angular2的开发。它由Traceur编译器(结合ES6)进行处理,然后生成ES5代码,并使用TypeScript语法创建运行时类型断言。但是,AtScript不是强制性的,开发人员仍然可以选择只使用纯JavaScript / ES5代码来构建Angular应用程序。

提升依赖注入(DI):

依赖注入(一种程序设计模式,可以通过依赖关系实现调用,而不需要生成)是一种Angular显著区别于其竞争对手的特性。依赖注入在模块化开发和元素隔离方面非常有帮助,但它的实现一直受到Angular 1.x的困扰。Angular2解决了这个问题,另外还添加了一些缺少的功能,如子注入以及生命周期/范围控制。

注解:

AtScript提供了连接元数据和功能的工具。通过在DI库中提供基本信息(可以调用函数或创建类的实例来检查相关元数据),从而简化了对象实例的构建。通过提供注入注释,使得参数信息重写也变得简单。

子注入:

子注入继承了其父级注入所有的专业服务,以及在子层次重写的能力。根据需要,在一定范围内,一些类型的对象可以被调用和机械的重写。

实例范围:

增强的DI库是由实例范围控制器组成的,当与子注入器连同范围标识符一起使用时,会更加强大。

动态载入:

这是之前的Angular版本均不具备的功能,Angular2包含了这个功能,即使在开发人员忙碌时,也能够添加新的指令或控件。

模板:

在Angular2中,模板编译过程是异步的。由于代码依赖于ES6模块,因此模块加载程序将通过在部分组件上引用它们,来加载依赖关系。

指令:

Angular2提供了三种指令:

组件指令:通过将逻辑封装在HTML,CSS和JavaScript中,从而使得组件可复用。

装饰器指令:可用于装饰元素(例如,通过隐藏/显示元素ng-hide/ng-show或添加工具提示)。

模板指令:可以将HTML转换为可复用的模板。该模板的实例化以及插入到DOM过程可以完全由指令创建者控制。例如ng-repeat和ng-if。

子路由

子路由将通过提供自身的路由功能,将程序的每个部分转换为更紧密的应用程序,这有助于整个程序功能集合的封装。

Screen Activator:

通过Angular 2,开发人员可以通过一系列can *回调对导航生命周期进行更好的控制。

canActivate:它允许或阻止导航到新的控件。

激活:它会响应导航到新控件的成功事件。

canDeactivate:它将防止或允许跳出旧控制器的导航。

停用:它会响应跳出旧控制器的成功事件。

设计:

所有这些逻辑都是使用管道架构创建的,这使得将自己的操作添加到管道中或删除默认操作变得非常简单。此外,它的异步字符允许开发人员在管道中,实现对用户进行身份验证或加载控件信息的服务器请求。

记录:

Angular 2.0包括一个名为diary.js的日志记录服务,这是一个非常有用的属性,用于测量开发人员的编码投入时间(从而允许开发人员识别代码中的瓶颈)。

scope:

$scope 从Angular2中删除了。


Angular4

Angular4 的特性和性能

相比于Angular 2,Angular4的功能列表中添加了许多新功能,同时还有一些旧功能的改进。

更小更快:

使用Angular4,程序将会消耗更少的空间,并比以前的版本运行地更快。工作主要用于不断进行改进。

视图引擎:

Angular4的开发人员修改了视图引擎的代码,例如AOT创建的代码。这些修改促使视图部分生成的代码大小减少了大约60%。模板越是复杂,节省的就越多。

动画包:

Angular4的开发人员将动画从Angular的核心部分提取出来,并将它们放在独立的包中。这意味着如果开发人员不需要使用动画,就可以不创建这些额外的代码。

这个功能还能够帮助更方便的查找docs文件和使用自动完成功能。开发人员可以通过为@angular/platform-b​​rowser/animations引入浏览器动画模块,从而实现为主要的NgModule添加动画功能。

改进 *ngIf 和 *ngFor:

模板绑定语法目前支持一些少量有帮助的更改。现在,开发人员已经可以使用if/else设计​​语法,并分配局部变量了。

Angular Universal:

此版本是Universal团队几个月的工作成果。这个Universal版本的代码的绝大多数目前位于@angular/platform-server。

TypeScript 2.1和2.2兼容性:

Angular4开发组将Angular升级为更新版本的TypeScript。这将提高ngc的速度,方便开发人员将在编码过程中更好的进行类型检查。

模板的源映射:

每当模板中的某些内容出现错误时,都将创建源映射,为原始模板提供有意义的说明内容。

结论:

对于仍处于学习阶段的人来说,Angular会有点混乱。但对于具有Angular2知识的有经验的开发人员来说,会觉得Angular很容易使用,并且使用Angular对项目非常有帮助。

原文链接:https://dzone.com/articles/angular-2-vs-angular-4-features-performance

转载请注明出自:葡萄城控件

关于葡萄城

葡萄城成立于1980年,是全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。葡萄城于1988年在中国设立研发中心,在全球化产品的研发过程中,不断适应中国市场的本地需求,并为软件企业和各行业的信息化提供优秀的软件工具和咨询服务。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 版本:Angular 5.0.0-alpha AngularDart(本文档中我们通常简称 Angular ) 是...
    soojade阅读 800评论 0 4
  • 1 是什么 2 list 中的fmap 3 maybe 中的fmap 4 either 中的fmap 5 函数 中...
    mxxxxx阅读 760评论 0 0
  • 一.土鸡 群鸡里有一只大公鸡 它模样俊俏 甚得其他母鸡的喜爱 于是 整日里调戏调戏其它同伴 无所事事 终于有一天...
    亲亲青草阅读 642评论 9 4