從官方給的升級例子https://angular.io/guide/upgrade#phonecat-upgrade-tutorial 以及結合我們的項目,總結一下目前爲止升級的一些步驟和經驗,目前可以通過angular2+的入口bootstrap,也就是說是一個hybird的application,下面按照步驟:
- js轉ts:這個參考我前面的文章 ,這2個文檔詳細介紹瞭如何切換以及一些示例,這個轉換是必要的,angular2+標準是使用typescript。
- 模塊化:angularjs的模塊化,可以參考網上的一些文章這個比較多,模塊化方便維護及管理,這個也可以說是必須的。
- 路由模塊化:這個網上的文章也比較多,每個模塊有每個模塊的路由,方便管理。
- 儘量使用component,不要使用directive,ng-controller等等,方便後面切換到angular2+的規範。
- 以上1,2,3,4個步驟可以說是前提,這4步做好了,下面就開始具體的升級。
- 按照angular2+所必須的npm package:添加完如下,然後npm install,當然可能還需要加一些devDependencies。
7.創建app.module.ts,需要從這裏bootstrap angularjs的app module:這裏目前是ngDoBootstrap,等完全升級完成,我們就可以從AppComponent bootstrap了。
8.第7步已經bootstrap了,所有index.html裏面就不需要ng-app了:
9.最後我們添加main.ts文件,然後gulp替換index.module.js爲main.ts,這樣gulp serve就可以跑了。
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。