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

发布时间:2019-07-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了教你如何让angular 5的花朵绽放在angular 1这棵老树上(上)--思路篇脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

写在前面

本文适读人群

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

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

最终目标

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

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

正文开始

准备工作

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

几个场景

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

  1. 第一种是火车头用ng1的技术,车厢用ng1和ng2+混合技术。(这也是本文重点介绍的方式)
  2. 第二种是火车头用ng2+的技术,车厢用ng1和ng2+混合的技术。(本文不涉及)

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

  1. 把ng2+写的component降级为ng1可以用的directive,那ng1就可以随心所欲的使用ng2+版的directive了。

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


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

  2. 那你ng2+写component的时候,需要用到原来ng1里已经存在的一些directive啊,service啊,factory啊,PRovider啊,filter啊,怎么办?当然把他们升级啦。我们把上面黑红绿的方块放大。

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

  3. ng1的controller想使用ng2+写的service? 当然是把ng2+的service降级成provider啦!
    这个场景其实跟第一点是差不多的,我就不画图了。

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的教你如何让angular 5的花朵绽放在angular 1这棵老树上(上)--思路篇全部内容,希望文章能够帮你解决教你如何让angular 5的花朵绽放在angular 1这棵老树上(上)--思路篇所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。