开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
Angular 1 和 Angular 2 集成:无缝升级的方法 - 技术翻译 - 开源中国社区

Angular 1 和 Angular 2 集成:无缝升级的方法 【已翻译100%】

oschina 推荐于 2年前 (共 14 段, 翻译完成于 09-07) 评论 13
收藏  
52
推荐标签: AngularJS 待读

已经有了 Angular 1 应用程序,正在想着怎么把它升级到 Angular 2?看看我们是怎么样支持递增升级的。

摘要

好消息。

  • 我们计划在同一应用程序上允许 Angular 1 和 Angular 2 混合使用

  • 你可以在同一个视图中混用 Angular 1 和 Angular 2 组件

  • Angular 1 和 Angular 2可以跨框架注入服务

  • 数据绑定可以跨框架运行

为什么要升级?

Angular 2 相对于 Angular 1 有很多优势,其中包括:性能有了极大提高,更强大的模板化,延迟加载,更简单的 API。 调试更加简单,测试前所未有地容易,等等。以下是几个突出亮点:

babybright123
 翻译得不错哦!

更好的性能

我们通过关注大量的场景来让你的应用变得轻快,初次渲染和再次渲染会快 3x 到 5x。

  • 通过单形态的 JS 调用进行更快的变化检测

  • 模板预编译和重用

  • 页面缓存

  • 更低的内存使用 / VM 压力

  • 线性可伸缩,可观察或者不可变数据结构

  • 依赖注入支持增量加载

更多强大的模板

  • 不再需要大量的指令

  • 静态分析 —— 未来工具和 IDEs 在开发的过程发现错误,而不是运行过程

  • 允许模板编写工具来决定绑定的使用,而不是在指令定义硬连接

叶秀兰
 翻译得不错哦!

未来计划

我们正在从 DOM 解耦 Angular 2 的渲染。我们正在积极支持下面的其他功能,从这个解耦我们可以:

  • 服务端渲染:允许超快的初次渲染和 web-crawler 支持。

  • Web Workers:把你的应用和大部分 Angular 转移到一个 Web Worker 线程,保持任何时候的 UI 的流畅和响应式。

  • 原生移动 UI:我们热衷于在移动应用中支持 Web 平台。同时,一些团队想要在他们的 iOS 和 Android 移动应用中展示完全原生的 UIs。

  • 编译作为构建的步骤之一。Angular 应用解析和编译他们的 HTML 模板。我们在把编译步骤转移到你的构建过程,以此来加快初次渲染速度。

叶秀兰
 翻译得不错哦!

Angular 1 和 2 共同运行

Angular 2 比 Angular 1 提供了更吸引人的优势,表现在性能,简易性和灵活性。我们正在努力令你容易地从现有 Angular 1应用中就能获得这种优势的好处,而这种 Angular 1 应用无缝混合了 Angular 2的组件和服务从而形成单独的应用。通过这样的混合,你能够在多次小规模的提交中升级一个应用中的一个服务或组件。

例如,你可能有一个如下图类似的应用。为了感受 Angular 2 的新特性,又决定升级组件 left nav 成为 Angular 2 组件。一旦你对 Angular 2 的应用更有把握,你决定为了你的主体区域中的滚动区使用 Angular 2 的渲染速度。

海涛
 翻译得不错哦!

为了让两者集成工作,在 Anglar 1 和 Angular 2 之间有四样要素需要相互协作:

  • 依赖注入

  • 组件嵌套

  • 内容嵌入

  • 变化检测

为了实现以上功能,我们会建立一个名为 ng-upgrade 的库。你能在已存在的 Angular 1 应用里包含 ng-upgrade 和 Angular 2,并能很好地与之混合并搭配使用。

你可以在原始的改进设计文档中找到全部细节和伪代码,并阅读细节的概述以了解其工作原理。在未来的官方公告中,我们将会粗略介绍从 Angular 1 代码升级到 Angular 2 的特例。

海涛
 翻译得不错哦!

依赖注入

首先,我们需要解决应用程序中各部分的通信问题。在 Angular 中,用于与其他类或函数通信的的最普遍方式是依赖注入。Angular 1 具有单一的根注入器,而 Angular 2 则具有分层注入器。每次升级服务都暗示着这两种注入需要互相提供实例。

ng-upgrade 库会自动地把 Angular 1 中的所有可注入的元素在 Angular 2 中变得可用。这意味着 Angular 2 的组件或服务能够在你的 Angular 1 应用服务中各处注入。

Angular 2 支持把 Angular 2 服务暴露在 Angular 1 注入器之下的行为,但你需要提供简单的映射设置。

通过独立的提交和混合环境中的通信,这种服务结果能够简便地一次一次地从 Angular 2  转移到 Angular 1。

海涛
 翻译得不错哦!

组件嵌套和嵌入

在所有版本的 Angular 中,我们将组件定义为拥有其模板的指令。为了进行增量迁移, 你需要能够一次次迁移组件。这意味着 ng-upgrade 要允许来自每一个框架中的组件相互嵌套。

为了解决这个问题,ng-upgrade 允许你在外观设计模式中包含 Angular 1 的组件,这样就能够在 Angular 2 的组件中使用。相反地,你可以在 Angular 1 中包含 Angular 2 的组件来使用。伴随着 Angular 1 的嵌入和 Angular 2 的内容保护的模拟,这能够发挥全部作用。

在嵌套组件中,每个模板,包括其语法和语义,完全从属与 Angular 1 或者 Angular 2 两者之一。这不是一种仿真模式,而是每个框架中基于组件种类的实实在在的执行。这意味着升级到 Angular 2 的组件将会受益于 Angular 2 的所有特性,而不仅仅是更好的语法。

海涛
 翻译得不错哦!

这也意味着Angular 1的组件通常会使用Angular 1的依赖注入。即使在使用Angular 2的模板时,Angular 2组件也会使用Angular 2的依赖注入,即使它是使用Angular 1的模板。


变化检测

把Angular 1的组件和Angular 2的组件混合起来意味着Angular 1的作用范围和Angular 2的组件是交错的。因此,ng-upgrade会确认变化检测(Angular 1的作用范围摘要和Angular 2的变化检测)在相同通道中是否交错,以维持表达式的可预测性的评估命令。

ng-upgrade把这些特点纳入账户,并通过创造一种单独的结合性摘录循环的方法来实现跨平台,以便在Angular 1的作用范围摘要和Angular 2的变化检测建立联系。

海涛
 翻译得不错哦!

典型的应用升级过程

这里有一个Angular 1项目升级为 Angular 2 的例子:

1. 在现有的应用中包含 Angular 2 和 ng-upgrade 的库。

2. 选择你想迁移的组件。

a. 编辑 Angular 1 的指令控制器去顺应 Angular 2 的语法。

b. 改变指令控制器/连接函数改变令其符合 Angular 2 的语法和语义。

c. 利用 ng-upgrade 去输出指令(现在是组件)作为 Angular 1 的组件(如果需要你可以称之为从Angular 1 模板衍生的 Angular 2 的组件)。

3. 选择你想迁移的服务。

a. 大多数的服务要求最低限度的修改。

b. 在 Angular 2 环境下配置服务。

c.(可选的)不使用 ng-upgrade 再输出服务到使用 ng-upgrade 的 Angular 1,如果它还继续被其他 Angular 1 代码使用。

4. 重复第2步骤和第3步骤以便于应用开发

5. 一旦没有多余的服务/组件被用来变更,把高层次的 Angular 1 引导程序降下,更换为 Angular 2的引导程序。

注意每个独立的变更会分别地被检查。并且,应用会持续地工作,让你随心所欲地继续发布升级。

海涛
 翻译得不错哦!

我们不打算因为允许非组件的指令能够在两边被使用而提供支持。因为我们想到,大多数的非组件的指令在 Angular 2 中是不必要的,但在新的模板语法中是被直接支持的。

Q&A

我听说 Angular 2 不支持双方法连接。我应当怎样替换它?

事实上,Angular 2 是支持双方发连接和 ng-model,虽然这需要一点不同的语法。

当我们打算建立起 Angular 时,我们就想修复好与 Angular 摘录循环的发出。为了解决这个问题,我们选择创建一个非直接的数据流用作于变化检测。一开始,我们还不清楚怎样用双方法在 Angular 1 中来构建起 ng-model 的数据绑定。但我们总是认为我们必须令 Angular 2 中构建如同 Angular 1 的一样简单。

海涛
 翻译得不错哦!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
评论(13)
Ctrl/CMD+Enter

期待Angularjs2.0发布
AngularJS 2 还保留 Directive 概念,又试图使用 React, polymer类似的 Components, 为什么不直接使用 WebComponents (http://webcomponents.org/)呢?
react或者ember吧 component
渣渣光看不说..
我学1好还是2好呢,纠结
direcitve最要命的就是依赖问题
ajs2 啥时候发啊、。
赞 撒子时候来个 Ng3?
前端技术变化太快了
不看好.
因为2和1相比,完全变了,所以我现在一直没有好好深入的学习1。
。 , 。能无缝集成 ,干脆版本兼容多好。。
我学1好还是2好呢,纠结
顶部