Angular2与Angular4的对比分析

最新推荐文章于 2024-08-10 08:00:00 发布

爱上彗星的尾巴

最新推荐文章于 2024-08-10 08:00:00 发布

阅读量851

点赞数

分类专栏：计算机文章标签：计算机

计算机专栏收录该内容

52 篇文章 3 订阅

订阅专栏

Angular 2 特性和性能

1.改进后的依赖注入（DI）

依赖注入（是一种程序设计模式，一个元素通过它自己的依赖项进行传递，而不是相反的单独处理），是 Angular 和其他的竞争项目上有着本质区别。依赖注入在模块化开发和元素隔离方面非常有用，然而在 Angular 1.x 中，它的实现一直有各种困扰， Angular 2 解决了这些问题，添加了一些缺失的特性，比如子注入器，以及生命周期/作用域控制。

2.注解（Annotation）

AtScript 提供了工具，用于连接元数据和函数。通过向 DI 库中提供必要的信息（调用函数或者创建类的实例时，检测相关元数据），简化了对象实例的构建。由于提供了注入注解，覆盖参数信息也很简单。

3.子注入

子注入继承了父亲的所有特性服务，同时可以进行重写。根据需求，在各种作用域内，有几种对象类型可以被调用，重写。

4.实例作用域

改进过的依赖注入库，有各种作用域控制器组成。使用子注入到当前作用域标识中时，会变得更强壮。

5.动态加载

这是 Angular 以前几个版本中都没有的功能。在 Angular 2 中添加了，允许开发人员随手添加新的指令（directive）或者控制器（controller）。

6.模板化

在 Angular 2 中，模板编译处理是异步的。由于代码依赖于 ES6 模块系统，通过部分组件的引用，模块加载器很容易加载依赖项。

7.指令

Angular 2 中有三类可用的指令：

· 组件指令：通过封装逻辑到 HTML、CSS、JavaScript 中，使得组件可以重用。

· 装饰指令：用来装饰元素（例如，通过 ng-hide/ng-show 来隐藏/显示元素，或者添加提示）。

· 模板指令：把 HTML 转换成可重用的模板。完全可以通过写指令来控制模板实例化并插入到文档对象中。比如 ng-repeat 和 ng-if。

8.子路由

子路由器通过它自己提供的路由器，将程序的每个部分转换成更紧凑的应用程序。它有助于封装程序的整体特性集合。

9.屏幕激活器

在 Angular 2 中, 在导航的生命周期上，通过一套 can* 回调，开发人员可以做到更好地控制。

· canActivate：允许或阻止导航到新的控制器。

· activate：响应成功导航到新的控制器。

· canDeactivate: 允许或阻止导航到旧的控制器。

· deactivate: 响应成功导航到就的控制器。

Angular 4 特性和性能

相比 Angular 2，Angular 4添加了很多新内容。不仅有新特性，也有调整，改进旧的功能，让我们一起了解。

1.更小的体积更快的运行速度

使用 Angular 4，程序将消耗更少的空间，运行速度比以前更快。工作的重点是持续的地进行额外的优化。

2.视图引擎

改进了 AOT（Ahead-of-time，动态编译）。这些修改使生成的代码减少改进了约 60％。如果模板越复杂，那么优化的代码也会越多。（译者注：当然，这对于用户来说，完全是透明的，public api 没有发生变化）

3.动画包

从 Angular 核心包中提取出动画模块。这意味着，在不使用动画的情况下，多余的代码不会出现在最终打包程序中。此功能还使您更够轻松地找到文档，并利用自动完成的优势。你可以从 @angular/platform-browser/animations 导入浏览器动画模块，添加动画到主模块（NgModule）。

4.改进的 ngIf 和 ngFor

模板绑定语法目前支持一些有用的变更。现在你可以使用 if/else 设计语法来分配局部变量，就像 if 来展开一个可观测对象。

5.Angular 服务端渲染

可以使10S加载完成的单页应用1S加载完成，还可以针对每一个人视图去做SEO优化。这个版本现在包含了服务端渲染团队在过去几个月中的外部和内部工作的结果。主要代码都在 @angular/platform-server。（译者注：原先的 Angular 服务端渲染是社区人员维护的，后被 Angular 官方采用，了解更多 Angular 服务端渲染，让我们来看看新的 renderModuleFactory 方法，它在 @angular/platform-server，或者 Rob Wormald 演示代码（译者：https://github.com/robwormald/ng-universal-demo）。