教你如何让angular 5的花朵绽放在angular 1这棵老树上（上）--思路篇

写在前面

本文适读人群

你手头有正在维护的基于angular1.x开发的老项目
这个老项目很臃肿
这个老项目还在为公司盈利，还时不时有新的需求要加进来
你是个对技术有追求的人，渴望实践新技术
你想使用新技术（ng2+，vue，react等）把这个老项目推倒重来，无奈这样做risk和workload都很高，项目计划不允许你这么做。

如果你满足以上5个条件，那么我要和你握把手，你和我面临着同样的困境，但你比我幸运的是，能读到我的这篇文章。

最终目标

闭上眼睛，想象下这样一幅画面：一辆正在行驶的列车，车头后面挂着几十节车厢，这些车厢的车皮都是用5年前的制造工艺打造出来的。诶！就在这个这个时候，火车进站，列车员给它最后挂上一个全新的车厢，这个车厢可厉害了，制造工艺使用的是全球最新的技术！唉！又过了一站，我们把一节运煤的老车箱卸掉，换上一节新的运煤车厢......

正文开始

准备工作

首先你要对ng2+有一定了解，至少要跑过官网的那个DEMO-HERO。

几个场景

大方向上的，ng2+提供了2种混合升级模式，你可以理解为：

第一种是火车头用ng1的技术，车厢用ng1和ng2+混合技术。（这也是本文重点介绍的方式）
~~第二种是火车头用ng2+的技术，车厢用ng1和ng2+混合的技术。（本文不涉及）~~

针对第一种场景，记住它是以ng1为核心，那你面临以下3个子场景：

把ng2+写的component，降级为ng1可以用的directive，那ng1就可以随心所欲的使用ng2+版的directive了。
那你ng2+写component的时候，需要用到原来ng1里已经存在的一些directive啊，service啊，factory啊，provider啊，filter啊，怎么办？当然把他们升级啦。我们把上面黑红绿的方块放大。
ng1的controller想使用ng2+写的service？当然是把ng2+的service降级成provider啦！
这个场景其实跟第一点是差不多的，我就不画图了。

所以混合式应用的本质就升级降级，从而使他们能兼容在一起愉快的工作。

思路篇就写到这里，欢迎大家素质三连，点赞，评论，收藏。我会尽快放出第二篇--代码篇

教你如何让angular 5的花朵绽放在angular 1这棵老树上（上）--思路篇相关推荐

angular过滤字符_如何使用Angular和Azure计算机视觉创建光学字符读取器
angular过滤字符介绍 (Introduction) In this article, we will create an optical character recognition (OCR) ...
@angular/core里的 NgZone -使得Angular不跟踪变化
前言: 在模板中实时获取一个变量,模板中就频繁的更新显示,频繁的变动将造成性能损耗. 或者在双向绑定时,异步事件的发生会导致组件中的数据变化,但是你想要适当时机再改变模板显示. 一.NgZone An ...
Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
Angular 5.0 学习2：Angular 5.0 开发环境的搭建和新建第一个ng5项目
1.安装Node.js 在开始工作之前,我们必须设置好开发环境. 如果你的机器上还没有Node.js®和npm,请先安装它们. 去Node.js的官网,https://nodejs.org/en/,点 ...
angular示例_用示例解释Angular动画
angular示例为什么要使用动画? (Why use Animations?) Modern web components frequently use animations. Cascading ...
angular 自定义组件_如何创建Angular 6自定义元素和Web组件
angular 自定义组件 by Prateek Mishra 通过Prateek Mishra 如何创建Angular 6自定义元素和Web组件 (How to create Angular 6 C ...
【Angular专题】——（1）Angular，孤傲的变革者
目录一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
【Angular专题】——【译】Angular中的ForwardRef
原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html 作者:Christoph ...
Angular项目构建指南 - 不再为angular构建而犹豫不决
摘要: 洋洋洒洒写了一大堆都是最近构建项目的一些经验,对于angular项目的构建确实不大同于以往的前端框架,所以特此记录分享给大家,希望有所帮助. 前言接触Angular也有小半个月了,虽然没有使 ...