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-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
转载请注明出自：葡萄城控件
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
