首頁  >  文章  >  web前端  >  angular1.x和angular2+並行,angular1.x 升級 angular2+方案

angular1.x和angular2+並行,angular1.x 升級 angular2+方案

寻∝梦
寻∝梦原創
2018-09-07 17:33:581811瀏覽

本篇文章介紹的是關於angularjs1.x升級angularjs2 方案,還有介紹了angularjs1.x和angularjs2 的並行,現在我們就一起來看這篇文章吧

angular1.x 升級angular2 方案

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

  • 方案1:主體為angular1.x,逐步將angular1.x當中service、 component、filter、controller、route、dependencies升級為angular5

  • 方案2: 主體為angular5,將專案所有js檔案先進行一次加工,採用ES6的方式將每個js文件module
     export出來,再逐步將內容向angular5靠近

#我建議選擇方案1增量式升級,透過在同一個應用中一起運行這兩個框架,並且逐一把AngularJS的組件遷移到Angular。可以在不必打斷其它業務的前提下,升級應用程序,因為這項工作可以多人協作完成,在一段時間內逐漸鋪平,下面就方案1展開說明

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

1、呼叫UpgradeModule 來引導AngularJS

在AngularJS中,我們會把AngularJS的資源加入到angular.module屬性上。在Angular中,我們會創建一個或多個帶有NgModule裝飾器的類,這些裝飾器用來在元資料中描述Angular資源。在混合式應用中,我們同時運行了兩個版本的Angular。這意味著我們至少需要AngularJS和Angular各提供一個模組。要引導混合式應用,我們在應用中必須同時引導 Angular 和 AngularJS。要先引導 Angular ,然後再呼叫 UpgradeModule 來引導 AngularJS。

從HTML中移除ng-app和ng-strict-di指令, 建立一個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 應用程式,現在我們就可以使用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的混合式應用程式了!所有現存的AngularJS程式碼會像以前一樣正常運作,但是我們現在也同樣可以執行Angular程式碼了

2、將專案中的services逐步升級為angular5

#我們將username-service.js裡面的內容升級為username-service.ts:

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

要在angular1.x中使用UsernameService,先建立一個downgrade-services.ts文件,這裡將會存放所有angular5服務降級後在angular1.x中使用的服務

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中已經將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裡面的內容升級為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,先建立一個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)

現在你可以在angular1.x中的template使用hero-detail元件了,元件之間通訊的問題依照angular5的介面寫

5、將angular1.x controller改成angular5 component

現在就剩下controller了,angular2已經取消了controller,controller可以把它當成一個大的component,所以我們按照component的方法重構controller,並且對新的component降級,controller重構之後我們需要修改路由,我們現在使用的還是angular1.x的路由,基本上一個路由對應的是一個controller,這個時候路由可以這樣修改:

假設有個TestContentCtrl,對應的路由是test(想看更多就到PHP中文網AngularJS開發手冊中學習)

.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、第三方外掛程式或庫解決方案

關於專案中引用基於angular1.x的插件或函式庫,基本都能找到angular2 的版本,可以將angular2 的版本引入進行降級處理就可以在angular1.x中使用了,但是~~~, angular2 的版本很多API都改了,angular1.x中的對應使用方法可能不存在了,這裡有兩種解

  • 引入angular2 的版本,刪除angular1.x版本,降級後來在angular1.x應用程式中用到該插件的都檢查一次,運用angular2 的版本的API使用該插件

  • 引入angular2 的版本,保留angular1.x版本,angular1. x應用使用angular1.x版本插件,
     angular5應用使用angular2 版本插件,

    方案2增加了項目的體積,相同的插件引用了兩個版本。在不影響首屏載入時間的情況下方案2是不錯的選擇,因為一次將所有插件或庫的API全部過一遍,工作量比較大容易出錯,也不符合我們增量式升級的初衷

現在專案中所有的內容基本上都升級為angular5了,我們可以刪除downgrade-services.ts和downgrade-components.ts這兩個檔案了,同時將路由升級為angular5,刪除angular1.x相關的函式庫和插件,一個完整的angular5應用程式就誕生了

好了,這篇文章到這就結束了(想看更多就到PHP中文網AngularJS使用手冊中學習),有問題的可以在下方留言提問。


以上是angular1.x和angular2+並行,angular1.x 升級 angular2+方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn