【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

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