转载

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

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

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

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

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

Angular2

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

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

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

Angular4 的特性和性能

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

更小更快：

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

视图引擎：

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

动画包：

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

这个功能还能够帮助更方便的查找docs文件和使用自动完成功能。开发人员可以通过为@angular/platform-browser/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

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

正文到此结束

所属分类：编程技术

本文标签： java 开发者设计模式开源 Features 注释开发 2015 js 时间参数 ACE https 代码 list 生命专注 ip Google 实例删除 id 编译 CSS DOM http IO 服务器 IDE HTML src ORM web 数据空间 TypeScript JavaScript
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

Angular2

Angular2 的特性和性能

提升依赖注入（DI）：

注解：

子注入：

实例范围：

动态载入：

模板：

指令：

子路由

Screen Activator：

设计：

记录：

scope：

Angular4

Angular4 的特性和性能

更小更快：

视图引擎：

动画包：

改进 ngIf 和 ngFor：

Angular Universal：

TypeScript 2.1和2.2兼容性：

模板的源映射：

结论：

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流

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

Angular2

Angular2 的特性和性能

提升依赖注入（DI）：

注解：

子注入：

实例范围：

动态载入：

模板：

指令：

子路由

Screen Activator：

设计：

记录：

scope：

Angular4

Angular4 的特性和性能

更小更快：

视图引擎：

动画包：

改进 *ngIf 和 *ngFor：

Angular Universal：

TypeScript 2.1和2.2兼容性：

模板的源映射：

结论：

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流

改进 ngIf 和 ngFor：