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

川长思鸟来 2021-06-26 16:06 378阅读 0赞

![这里写图片描述][20180826102441291]  
在Web应用开发领域，`Angular`被认为是最好的开源`JavaScript`框架之一。

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

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

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

## Angular2 ##

![这里写图片描述][20180826102533885]

`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 ##