angular1.x和angular2+并行，angular1.x升級angular2+方案

本篇文章介紹的是關(guān)于angularjs1.x升級angularjs2+方案，還有介紹了angularjs1.x和angularjs2+的并行，現(xiàn)在我們就一起來看這篇文章吧

angular1.x 升級 angular2+ 方案

我給大家提供的是angular1.x和angular5并行，增量式升級方案，這樣大家可以循序漸進升級自己的應(yīng)用，不想看文字直接demo入手migration-from-angular1.x-to-angular2Plus

我建議選擇方案1增量式升級，通過在同一個應(yīng)用中一起運行這兩個框架，并且逐個把AngularJS的組件遷移到Angular中。 可以在不必打斷其它業(yè)務(wù)的前提下，升級應(yīng)用程序，因為這項工作可以多人協(xié)作完成，在一段時間內(nèi)逐漸鋪開，下面就方案1展開說明

Hybrid APP主要依賴Angular提供upgrade/static模塊。后面你將隨處可見它的身影。以下手把手教你將angular1.x遷移到angular2+

1、調(diào)用 UpgradeModule 來引導(dǎo) AngularJS

在AngularJS中，我們會把AngularJS的資源添加到angular.module屬性上。 在Angular中，我們會創(chuàng)建一個或多個帶有NgModule裝飾器的類，這些裝飾器用來在元數(shù)據(jù)中描述Angular資源。在混合式應(yīng)用中，我們同時運行了兩個版本的Angular。 這意味著我們至少需要AngularJS和Angular各提供一個模塊。要想引導(dǎo)混合式應(yīng)用，我們在應(yīng)用中必須同時引導(dǎo) Angular 和 AngularJS。要先引導(dǎo) Angular ，然后再調(diào)用 UpgradeModule 來引導(dǎo) AngularJS。

從HTML中移除ng-app和ng-strict-di指令, 創(chuàng)建一個app.module.ts文件，并添加下列NgModule類：

import { UpgradeModule } from '@angular/upgrade/static';
@NgModule({ 
 imports: [ 
 UpgradeModule
 ]
})
export class AppModule {
 constructor(private upgrade: UpgradeModule) { } 
 ngDoBootstrap() {
 this.upgrade.bootstrap(document.body, ['yourAngularJsAppName'], { strictDi: true });
 }
}

用AppModule.ngDoBootstrap方法中啟動 AngularJS 應(yīng)用,現(xiàn)在我們就可以使用 platformBrowserDynamic.bootstrapModule 方法來啟動 AppModule 了。

main.ts：

import {AppModule} from './app/app.module';
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err => console.log(err));

我們就要開始運行AngularJS+5的混合式應(yīng)用程序了！所有現(xiàn)存的AngularJS代碼會像以前一樣正常工作，但是我們現(xiàn)在也同樣可以運行Angular代碼了

2、將項目中的services逐步升級為angular5

我們將username-service.js里面的內(nèi)容升級為username-service.ts：

import { Injectable } from '@angular/core';
@Injectable() 
export class UsernameService {
 get() {
 return 'nina'
 }
}

要在angular1.x中使用UsernameService，先創(chuàng)建一個downgrade-services.ts文件，這里將會存放所有angular5服務(wù)降級后在angular1.x中使用的服務(wù)

downgrade-services.ts：

import * as angular from 'angular';
import { downgradeInjectable } from '@angular/upgrade/static';
import { UsernameService } from './services/ username-service '; 
angular.module('yourAngularJsAppName')
 .factory('UsernameService', downgradeInjectable(UsernameService));

完成這兩步之后UsernameService就可以在angular1.x controller component service等注入使用了，在angular5中的使用方法這里就不舉例了，按照angular5的使用方法來就行

3、項目中的filter逐步升級為angular5的pipe，同時angular1.x的filter依然保留

由于filter的性能問題angular2中已經(jīng)將filter改為pipe，angular團隊沒有提供filter升級為pipe，或者pipe降級為filter的module，所以angular1.x中使用filter，angular中使用pipe，filter的升級放在component之前，因為component的template可能會用到

username-pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
Pipe({
 name: 'username'
})
export class usernamePipe implements PipeTransform { 
 transform(value: string): string {
 return value === 'nina' ? '張三' : value;
 }
}

4、將項目中的component逐步升級為angular5的component

我們將hero-detail.js里面的內(nèi)容升級為hero-detail.ts：

import { Component, EventEmitter, Input, Output, ViewContainerRef } from '@angular/core';
import { UsernameService } from '../../service/username-service';
@Component({
 selector: 'hero-detail',
 templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent {
 Public hero: string;
 
 constructor(private usernameService: UsernameService) {
 this.hero = usernameService.get()
 }
}

要在angular1.x中使用hero-detail component，先創(chuàng)建一個downgrade-components.ts文件，這里將會存放所有angular5組件降級后在angular1.x中使用的組件

downgrade-components.ts：

import * as angular from 'angular';
import { downgradeComponent } from '@angular/upgrade/static';
import { HeroDetailComponent } from './app/components/hero-detail/hero-detail.component';
angular.module('yourAngularJsAppName')
 .directive('heroDetail', downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory)

現(xiàn)在你可以在angular1.x中的template中使用hero-detail組件了，組件之間通訊的問題按照angular5的接口寫

5、將angular1.x controller改成angular5 component

現(xiàn)在就剩下controller了，angular2已經(jīng)取消了controller，controller可以把它當(dāng)成一個大的component，所以我們按照component的方法重構(gòu)controller，并且對新的component降級，controller重構(gòu)之后我們需要修改路由，我們現(xiàn)在使用的還是angular1.x的路由，基本上一個路由對應(yīng)的是一個controller，這個時候路由可以這樣修改：

假設(shè)有個TestContentCtrl，對應(yīng)的路由是test（想看更多就到PHP中文網(wǎng)AngularJS開發(fā)手冊中學(xué)習(xí)）

.state('test', {
 url: '/test',
 controller: 'TestContentCtrl',
 controllerAs: 'vm',
 templateUrl: './src/controllers/test-content-ctrl.html'
 })

在TestContentCtrl改成test-content component后

.state('test', {
 url: '/test',
 template: '<test-content></test-content>'
 })

6、第三方插件或者庫解決方案

關(guān)于項目中引用基于angular1.x的插件或者庫，基本都能找到angular2+的版本，可以將angular2+的版本引入進行降級處理就可以在angular1.x中使用了，但是~~~， angular2+的版本很多API都改了，angular1.x中的對應(yīng)使用方法可能不存在了，這里有兩種解決方案

現(xiàn)在項目中所有的內(nèi)容基本都升級為angular5了，我們可以刪除downgrade-services.ts和downgrade-components.ts這兩個文件了，同時將路由升級為angular5，刪除angular1.x相關(guān)的庫和插件，一個完整的angular5應(yīng)用就誕生了

好了，本篇文章到這就結(jié)束了（想看更多就到PHP中文網(wǎng)AngularJS使用手冊中學(xué)習(xí)），有問題的可以在下方留言提問。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com