linux无缝升级的版本,Angular 1 和 Angular 2 集成:无缝升级的方法
已经有了 Angular 1 应用程序,正在想着怎么把它升级到 Angular 2?看看我们是怎么样支持递增升级的。
摘要
好消息。
我们计划在同一应用程序上允许 Angular 1 和 Angular 2 混合使用
你可以在同一个视图中混用 Angular 1 和 Angular 2 组件
Angular 1 和 Angular 2可以跨框架注入服务
数据绑定可以跨框架运行
为什么要升级?
Angular 2 相对于 Angular 1 有很多优势,其中包括:性能有了极大提高,更强大的模板化,延迟加载,更简单的 API。 调试更加简单,测试前所未有地容易,等等。以下是几个突出亮点:
更好的性能
我们通过关注大量的场景来让你的应用变得轻快,初次渲染和再次渲染会快 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 的一样简单。
经过几次循环后,我们设法修复多摘录中坏掉的地方,同时保持 Angular 1 中 ng-model 的强力和简易性。
双方法数据绑定有了一个新语法:[(property-name)]="expression"来令表达式在各方位中的界限更加明确。由于能够应用与大多数场景,这只不过是一个微小的语法更改,能够轻易地进行迁移。
如下面的例子,在 Angular 1 中,你会有:
在 Angular 2 中,你可以把上面的例子转换为这样:
我能用什么语言搭配 Angular 2 使用?
Angular 2 的 API 完全支持现在的 JavaScript(ES5标准),下一个版本的 JavaScript(ES6标准或ES2015),TypeScript 和 Dart。
继续使用现在的 JavaScript 是非常好的选择,我们强烈建议你深入研究一下 ES6 和 TypeScript(ES6的一个超级集合),这些会为你的产品带来强大的提升。
ES6 为常用库,比如协议和模组,提供了很多提升性的语法和标准。TypeScript 能为你带来更好的代码导航,IDE 中的自动重构,文件,查找错误,等等。
ES6 和 TypeScript 作为现在 ES5 的超级集合,十分简单易用。这意味着你现有的全部代码是有效的,并且能为它们添加一些新特性。
我应该利用代码库中的$watch做什么?
为了得到运行速度和可预测性,在 Angular 2 中,通过在 HTML 模板中或者组件指令中的注释中申明地指定要看的表达式。
在很多应用与性能不相适的场合下, 你可以从 ES7 标准的可见性中,比如 JavaScript 中的 Rx.js 或者Dart 中的 Streams,获得可见性的好处。
现在我能为应用的版本迁移做什么准备
模仿最好的实例,并使用 Angular 1 的组件和服务来构建你的应用,就像 AngularJS 样式指南中所描述的。
原生升级能否使用新的组件路由器?
我们在 ng-conf2015 告知的升级计划是基于某时间段中全视图的升级,和两个版本的 Angular 中的组间路由器的控制通讯。
我们得到的反馈是“好的,这具有增量性,但增量性还不够。我们又重新设计如上的计划。
有更多的细节你能够透露吗?
当然是的!在升级 Angular 1 到 Angular 2 的策略设计文档。
我们在编写一系列即将发布的公告,相关主题包括如下:
把你对于的 Angular 1 相关知识映射,类比到Angular 2中。
一组围绕 Angular 2 细节的问答。
带有代码示例的版本迁移的细致指导。
再回!
一些AngularJS相关文章链接:
希望你喜欢,并分享我的工作~带你走近AngularJS系列:
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的详细介绍:请点这里
AngularJS 的下载地址:请点这里
linux无缝升级的版本,Angular 1 和 Angular 2 集成:无缝升级的方法相关推荐
- 记一次升级node版本后,运行原vue项目报错问题解决方法
记一次升级node版本后,运行原vue项目报错问题解决方法 参考文章: (1)记一次升级node版本后,运行原vue项目报错问题解决方法 (2)https://www.cnblogs.com/happ ...
- oppoa57升级android版本,OPPO A57刷机教程_OPPO A57升级更新官方系统包
下面整理一下咱们的OPPO A57手机的刷机教程了,这个刷机教程也是针对官方的rom包的,之前有机友下载了官方的rom包,可是又不知道如何的操作,所以在这里整理了一个详细的卡刷刷机的教程供大家参考了, ...
- 荣耀升级android版本最好用,到底好在哪?华为荣耀升级安卓4.0体验
到底好在哪?华为荣耀升级安卓4.0体验 2012年01月20日 00:00作者:董晓龙编辑:董晓龙文章出处:泡泡网原创 分享 泡泡网手机频道1月20日 在这个丰富多彩的世界上,总有很多人喜欢尝鲜,对新 ...
- cisco路由器升级rom版本
有时路由器会找不到flash卡,也就加载不了IOS,只能进入rommon模式:路由器也有可能出现不定时死机的现象. 此类情况有可能是flash卡存在缺陷: The-compact-flash-(CF) ...
- 超微服务器如何升级微信,局域网升级微信版本
1世纪互联网多样传播技术的演进使得媒介生态环境发生了变革,以微信为代表的即时通信工具作为最基础的互联网应用,成为了全球第三大即时通讯应用.下面是学习啦小编收集整理的局域网升级微信版本,希望对大家有帮助 ...
- linux中更新python_linux下面升级 Python版本并修改yum属性信息
最近需要在linux下使用python,故需要升级一下python版本,上网查询了一下相关资料,更新了一下linux下面的python环境,记录如下: linux下面升级 Python版本并修改yum ...
- linux5.5内核,一条命令就可以升级到Linux 5.5内核或Linux 5.5以上版本
升级Linux内核其实很简单,本文介绍的方法只需要一条命令,至少能够升级到Linux 5.5内核版本.当然,脚本当中要是加入新的Linux内核,你就能够升级到那个新内核,也就是说可以升级到Linux ...
- 解决linux 升级高版本python3.7后yum不能使用的问题
解决linux 升级高版本python3.7后yum不能使用的问题 参考文章: (1)解决linux 升级高版本python3.7后yum不能使用的问题 (2)https://www.cnblogs. ...
- linux下载哪个python版本-Linux下升级安装Python-3.6.2版本
本文主要介绍在Linux(CentOS)下将Python的版本升级为3.6.2的方法 众所周知,在2020年python官方将不再支持2.7版本的python,所以使用3.x版本的python是必要的 ...
最新文章
- 什么是区块链智能合约?
- VAE(Variational Autoencoder)的原理
- j2ee与mysql乱码过滤_mysql 在 j2ee中配置的乱码问题处理
- 单片机上电复位电路图大全
- 2021-11-11Object类
- 【转】java string类的方法及说明
- java 查看pdf_Java中实现pdf在线查看和下载
- java中math类方法之数学运算(pow,exp,三角函数,指数)
- 13万字详细分析JDK中Stream的实现原理
- c语言结构体实验张三丰,如何成为公务员考试结构化面试里的张三丰
- JavaScript中匿名函数的困惑
- mysql text 性能_MySQL - text 性能优化--记录一
- 证明矩阵的秩=行秩=列秩
- 企业微信接入第三方应用(以服务商身份)
- feign api Ambiguous mapping
- Ubuntu论坛遭到入侵 用户数据泄露
- linux开机不运行桌面快捷方式,Android 开机自动运行和添加删除桌面快捷方式
- 【JZOJ3337】wyl8899的TLE
- 什么是智能颈部按摩仪低频脉冲电流?它会对人体有何影响?
- Tableau图表 | 3、区域图/面积图/折线图