【Angularjs系列】Angularjs升级到Angular 2+ (Hybrid application)

从官方给的升级例子https://angular.io/guide/upgrade#phonecat-upgrade-tutorial 以及结合我们的项目,总结一下目前为止升级的一些步骤和经验,目前可以通过angular2+的入口bootstrap,也就是说是一个hybird的application,下面按照步骤:

  1. js转ts:这个参考我前面的文章 ,这2个文档详细介绍了如何切换以及一些示例,这个转换是必要的,angular2+标准是使用typescript。
  2. 模块化:angularjs的模块化,可以参考网上的一些文章这个比较多,模块化方便维护及管理,这个也可以说是必须的。
  3. 路由模块化:这个网上的文章也比较多,每个模块有每个模块的路由,方便管理。
  4. 尽量使用component,不要使用directive,ng-controller等等,方便后面切换到angular2+的规范。
  5. 以上1,2,3,4个步骤可以说是前提,这4步做好了,下面就开始具体的升级。
  6. 按照angular2+所必须的npm package:添加完如下,然后npm install,当然可能还需要加一些devDependencies。

image.png

 

7.创建app.module.ts,需要从这里bootstrap angularjs的app module:这里目前是ngDoBootstrap,等完全升级完成,我们就可以从AppComponent bootstrap了。

image.png

8.第7步已经bootstrap了,所有index.html里面就不需要ng-app了:

9.最后我们添加main.ts文件,然后gulp替换index.module.js为main.ts,这样gulp serve就可以跑了。

image.png

image.png

10.以上1-9步只是实现了可以在angular2+的环境下面跑angualrjs的application,而且目前为止我们只能写angularjs的component,然后也只能用ui-router。下一步我们需要做的是:

a. 升级所有的angularjs的service为angular2+ 的injectable的service;

b. 去掉index.html里面的ng-controller,这就意味着我们需要把index.controller.ts里面的逻辑写到AppComponent里面去,然后bootstrap AppComponent;

c. 至此,新的feature我们可以用angular2+去写了,我们可以添加angular2+的router,这样我们又遇到一个问题,2套router共存,也就是说地址栏填写一个地址,2套router都会跳转,但是我们需要的angularjs定义的只走1的rouer,angular2+定义的router只能走2+的,这个需要考虑一些怎么做?

d. 以上a,b,c问题如果都解决并做好了,那么我们就可以真正意义上的angular2+了;

 

升级是一个长期的过程,如果觉得以上方案可行,我们可以先做到1-9步,后面的再逐步实施。

Update (2019/2/23):

router问题目前方案为ui-router/angular-hybrid,此方案能够很好的过渡hybrid项目,可以用一套路由在angularjs和angular2+之间切换,所以暂时就不需要考虑更新路由,即上面提到的c)不是一个问题,这样我们基本就没什么问题了,后面就考虑上线时机问题。

 

Update(2019/3/5):

目前在项目中添加了ngx目录结构如下,所有angular 2+的相关内容以及重写的angularjs到angular2+的东西全部放到这个文件夹下面的相关目录,后续项目逐步迁移到ngx,当项目内容全部到ngx下面了,这时就是真正意义的ng2+的application了,而不是hybrid app。


image.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章