この記事では、angularjs2+ を angularjs1.x からアップグレードするためのソリューションを紹介し、angularjs1.x と angularjs2+ の間の並列性についても紹介します

angular1.x の angular2+ のアップグレードソリューション

私が提供するのは、angular1 の並列増分アップグレードソリューションです。

オプション 1: 本体は angular1.x で、angular1.x のサービス、コンポーネント、フィルター、コントローラー、ルート、依存関係を段階的にアップグレードします。 angular5 へ
オプション 2: 本体は angular5 で、プロジェクトのすべての js ファイルが最初にアップグレードされます 1 回限りの処理で、ES6 メソッドを使用して各 js ファイルモジュールをエクスポート
し、その後内容を徐々に angular5 に近づけますangular5

同じアプリケーション内でこれら 2 つのフレームワークを一緒に実行し、AngularJS コンポーネントを 1 つずつ Angular に移行することで段階的にアップグレードするオプション 1 をお勧めします。この作業は複数人で完了し、時間をかけて段階的に展開できるため、他のビジネスを中断することなくアプリケーションをアップグレードできます。以下はオプション 1 の説明です

ハイブリッド APP は主に Angular に依存してアップグレードを提供します。静的モジュール。今後、あらゆる場所で見かけることになるでしょう。以下では、angular1 を移行する方法を段階的に説明します。 Angular では、メタデータ内の Angular リソースを記述するために使用される NgModule デコレータを使用して 1 つ以上のクラスを作成します。ハイブリッドアプリケーションでは、2 つのバージョンの Angular を同時に実行します。これは、AngularJS と Angular からそれぞれ少なくとも 1 つのモジュールが必要であることを意味します。ハイブリッドアプリケーションをブートストラップするには、アプリケーションで 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. プロジェクト内のサービスを段階的に angular5 にアップグレードします

username-service.js のコンテンツをアップグレードします。 .ts:

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

ログイン後にコピー

angular1.x で UsernameService を使用するには、まず downgrade-services.ts ファイルを作成します。このファイルには、angular5 services をダウングレードした後に 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));

ログイン後にコピー

Afterこれらの 2 つの手順を完了すると、 UsernameService を angular1 に挿入でき、プロジェクト内のフィルターは angular5 のパイプに徐々にアップグレードされ、フィルターのモジュールは angular1 で使用されます。 angular5 のコンポーネントに

hero-detail.js のコンテンツを hero-detail.ts にアップグレードします:

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

ログイン後にコピー

angular1.x で hero-detail コンポーネントを使用するには、まず downgrade-components .ts ファイルを作成します。ここには、angular5 コンポーネントをダウングレードした後に angular1.x で使用されるすべてのコンポーネントが保存されます

downgrade-components.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 コンポーネントを使用できるようになります。コンポーネント間の通信の問題は、 angular5

5のインターフェースに従って書かれています。そのため、コンポーネントメソッドに従ってコントローラーを再構築し、コントローラーを再構築した後、ルーティングを変更する必要があります。 angular1.x のルーティングを使用します。基本的に、ルートはコントローラーに対応します。このルートは次のように変更できます:

TestContentCtrl があり、対応するルートが test であるとします (詳細を確認したい場合は、 PHP 中国語 Web サイト

AngularJS 開発マニュアル

を参照してください)

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)

ログイン後にコピー

TestContentCtrl を test-content コンポーネントに変更した後

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

ログイン後にコピー

6. サードパーティのプラグインまたはライブラリソリューション

angular1 ベースのプラグインまたはライブラリに関して、angular1 での対応する使用方法が変更されました。プラグインを使用するには、すべてのプラグインを確認し、angular2+ バージョンの API を使用してください。 angular2+ バージョンを導入し、angular1 を維持します。

オプション 2 では、プロジェクトのサイズが増加し、同じプラグインが 2 つのバージョンを参照します。オプション 2 は、最初の画面の読み込み時間に影響を与えることなく、適切な選択です。これは、すべてのプラグインまたはライブラリのすべての API を一度に実行することは比較的大きなワークロードであり、エラーが発生しやすく、元の方法とは一致しないためです。増分アップグレードの目的

基本的にプロジェクト内のすべてのコンテンツが angular5 にアップグレードされたので、2 つのファイル downgrade-services.ts と downgrade-components.ts を削除し、ルーティングを angular5 にアップグレードし、 angular1.x 関連のライブラリとプラグインを使用すると、完全な angular5 アプリケーションが誕生します
さて、この記事は終わりです (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
AngularJS ユーザーマニュアル
にアクセスして学習してください)。ご質問がございましたら、以下にメッセージを残してください。

以上がAngular1.x と angular2+ は並行して実行され、angular1.x は angular2+ ソリューションをアップグレードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。