文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

在 Web 应用程序开发的世界中,Angular 被认为是最好的开源 JavaScript 框架之一。

Google 的 Angular 团队宣布,Angular 4 将于 3 月 23 日发布。实际上,他们跳过 3.x 版本。大家都知道,期待已久的 Angular 2 发行版是对以前版本(译者注:AngularJS 1.x 名字中包含 JS 字符,之后的版本已经去掉 JS 字符)的彻底改造。

对于原有的开发人员来说,这只是惊喜。然而,对于仍处于学习阶段的新开发人员来说,可能会有些混乱和棘手。无论如何,本文将提供 Angular 2 和 Angular 4 的特性比较。

第 1 段(可获 1.19 积分)

Angular 2

Angular 2 在 2015 年底发布。让我们来看看为什么这个版本发布,以及它为网页开发添加了什么。 

该版本的 Angular 更侧重于移动应用程序开发,它允许开发人员创建跨平台应用程序。原因就是,处理相关移动应用程序(功能、加载时间等)后,处理桌面组件更容易。

许多模块从 Angular 的核心移除,从而有更好的性能。这使得日益丰富的 Angular 的生态系统越来越模块化,这意味着你有能力选择和使用你想要的组件。

第 2 段(可获 1.49 积分)

Angular 2 针对 ES6(ECMAScript 2015)和“常青”浏览器(译者注:evergreen browsers,意为特定浏览器的当前和此前的若干版本,他们会自动更新到最新版本)。基于这些浏览器的构建,消除了 Angular 开发中的各种补丁和替代方案,允许开发者专注于他们的业务代码。

Angular 2 特性和性能

AtScript 是一个 ES6 超集,它用来帮助开发 Angular 2。它被 Traceur 编译器进行处理(结合 ES6),生成ES5 代码,利用 TypeScript 的语法来创建运行时类型检查,而不是编译时判断。但是,AtScript 不是强制性的,你仍然可以使用纯 JavaScript / ES5 代码,不用 AtScript 来书写 Angular 应用。

译者注:AtScript 是 Angule2 早期的解决方案,官方同时考虑过 CoffeeScript,后来已经采用了 TypeScript ,相关新闻:http://www.infoq.com/cn/news/2015/03/typescript-angular-cooperation

第 3 段(可获 1.5 积分)

改进后的依赖注入(DI):

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

注解(Annotation):

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

第 4 段(可获 1.7 积分)

子注入:

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

实例作用域:

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

动态加载:

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

第 5 段(可获 1.33 积分)

模板化:

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

指令:

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

  • 组件指令:通过封装逻辑到 HTML、CSS、JavaScript 中,使得组件可以重用
  • 装饰指令:用来装饰元素(例如,通过 ng-hide/ng-show 来隐藏/显示元素,或者添加提示)。
  • 模板指令:把 HTML 转换成可重用的模板。完全可以通过写指令来控制模板实例化并插入到文档对象中。比如 ng-repeat 和 ng-if。
第 6 段(可获 1.4 积分)

子路由:

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

屏幕激活器:

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

  • canActivate:允许或阻止导航到新的 控制器。
  • activate:响应成功导航到新的控制器。
  • canDeactivate: 允许或阻止导航到旧的控制器。
  • deactivate: 响应成功导航到就的控制器。
第 7 段(可获 1.3 积分)

设计:

所有这些逻辑都是使用管道体系结构构建的,这使得在管道中添加自己的操作或删除默认的操作变得非常简单。此外,它的异步特性允许开发人员让一些服务器请求对用户进行身份验证,或者为控件提供负载信息,同时仍在管道中。

日志系统:

Angular 2.0 包括一个日志系统,称为 diary.js,一个非常有用的属性。它会记录你程序中的时间消耗(从而允许你识别代码中的瓶颈)。

作用域:

Angular 2 移除了作用域($scope)。

第 8 段(可获 1.18 积分)

Angular 4 特性和性能

相比 Angular 2,添加了很多新内容。不仅有新特性,也有调整,改进旧的功能,让我们继续往下看。

更小更快:

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

试图引擎:

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

第 9 段(可获 1.39 积分)

动画包:

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

改进的 *ngIf 和 *ngFor:

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

第 10 段(可获 1.33 积分)

Angular 服务端渲染

这个版本现在包含了服务端渲染团队在过去几个月中的外部和内部工作的结果。主要代码都在 @angular/platform-server。(译者注:原先的 Angular 服务端渲染是社区人员维护的,后被 Angular 官方采用,https://github.com/angular/universal

了解更多 Angular 服务端渲染,让我们来看看新的 renderModuleFactory 方法,它在 @angular/platform-server,或者 Rob Wormald 演示代码(译者注:https://github.com/robwormald/ng-universal-demo)。更多文档和代码实例随后提供。

TypeScript 2.1 和 2.2 兼容性:

项目组已升级 Angular 到较新版本的 TypeScript。这将提高 NGC 的速率,在程序中将会有更好的类型检查。

第 11 段(可获 1.3 积分)

模板映射源:

现在,每当其中一个模板中出现某个错误时,就会创建源映射,以提供与原始模板相关的有意义的上下文。

结论:

正如我前面所说,对于那些仍处于学习阶段的人来说,Angular 会有点混乱。但是对于有 Angular 2 知识的经验丰富的开发人员来说,他们将很容易使用,他们会发现它非常有用。

第 12 段(可获 0.98 积分)

文章评论

pauli
翻译完了,要审核多久呢?
济南访客
我就想问问 atScript 是啥? typescript 我知道
pauli
AtScript 是 ng2 早期的解决方案,后来已经采用 TypeScript 了。

知乎上有人回答:
如何看待 Angular 2.0 使用的 AtScript 是 TypeScript 的超集?
https://www.zhihu.com/question/28310183
访客
我Angular2的应用直接升级Angular4,没有任何的问题。
pauli
是的 ng4 改动不大,马上就 ng5 了
武汉访客
哇。终于到4了,好开心。我又可以继续使用vue写项目了