Angular1.x und Angular2+ laufen parallel, Angular1.x aktualisiert die Angular2+-Lösung

Dieser Artikel stellt den Plan für das Upgrade von AngularJS2+ von AngularJS1.x vor und stellt auch die Parallelität zwischen AngularJS1.x und AngularJS2+ vor. Jetzt lesen wir gemeinsam diesen Artikel

Angular1.x-Upgrade-Angular2+-Lösung

Ich stelle Ihnen eine parallele und inkrementelle Upgrade-Lösung für Angular1 zur Verfügung. Für Ihre eigene Anwendung, wenn Sie den Text nicht lesen möchten. Starten Sie einfach die Demo-Migration von Angular1.x zu Angular2Plus

• Option 1: Der Hauptteil ist Angular1.x und fügt nach und nach Dienst, Komponente, Filter, Controller und Route hinzu , und Abhängigkeiten werden auf Angular5 aktualisiert

• Option 2: Der Hauptteil ist Angular5 und jede JS-Datei wird mit dem ES6-Modul verarbeitet > Exportieren und dann den Inhalt schrittweise näher an Angular5 verschieben
  

Ich empfehle, Option 1 für ein inkrementelles Upgrade zu wählen, indem diese beiden Frameworks zusammen in derselben Anwendung ausgeführt werden, und AngularJS-Komponenten nach Angular zu migrieren eins nach dem anderen. Sie können die Anwendung aktualisieren, ohne andere Unternehmen zu unterbrechen, da diese Arbeit von mehreren Personen durchgeführt und über einen bestimmten Zeitraum hinweg schrittweise eingeführt werden kann. Im Folgenden finden Sie eine Erläuterung von Option 1

Hybrid APP hauptsächlich auf Angular, um Upgrade-/statische Module bereitzustellen. Sie werden es in Zukunft überall sehen. Im Folgenden erfahren Sie Schritt für Schritt, wie Sie angle1 zur Eigenschaft angle.module migrieren. In Angular erstellen wir eine oder mehrere Klassen mit NgModule-Dekoratoren, die zur Beschreibung von Angular-Ressourcen in Metadaten verwendet werden. In einer Hybridanwendung führen wir zwei Versionen von Angular gleichzeitig aus. Das heißt, wir benötigen jeweils mindestens ein Modul von AngularJS und Angular. Um eine Hybridanwendung zu booten, müssen wir sowohl Angular als auch AngularJS in der Anwendung booten. Sie müssen zuerst Angular booten und dann UpgradeModule aufrufen, um AngularJS zu booten. Entfernen Sie die ng-app- und ng-strict-di-Anweisungen aus HTML, erstellen Sie eine app.module.ts-Datei und fügen Sie die folgende NgModule-Klasse hinzu:

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 });
  }
}

Verwenden Sie die AppModule.ngDoBootstrap-Methode. Starten Sie AngularJS Anwendung Jetzt können wir die Methode platformBrowserDynamic.bootstrapModule verwenden, um das AppModule zu starten. main.ts:

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

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

Wir sind dabei, AngularJS+5-Hybridanwendungen auszuführen! Der gesamte vorhandene AngularJS-Code funktioniert normal wie zuvor, aber wir können jetzt auch Angular-Code ausführen

2. Aktualisieren Sie die Dienste im Projekt schrittweise auf Angular5

Wir aktualisieren die Inhalt in username-service.js zu username-service.ts:

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

Um UsernameService in angle1.x zu verwenden, erstellen Sie zunächst eine downgrade-services.ts-Datei, in der alle in angle1.x verwendeten Dienste nach dem Downgrade enthalten sind Angular5-Dienst

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));

Nach Abschluss dieser beiden Schritte kann UsernameService in den Angular1.x-Controller-Komponentendienst usw. eingefügt werden. Die Verwendungsmethode in Angular5 ist nicht angegeben Folgen Sie einfach der Verwendungsmethode von angle5

3. Die Filter im Projekt werden nach und nach auf die Angular5-Pipe aktualisiert, während der Angular1.x-Filter weiterhin beibehalten wird

Aufgrund des Leistungsproblems des Filters wurde der Filter in Angular2 in Pipe geändert. Das Angular-Team stellt kein Modul zum Upgraden von Filter auf Pipe oder Downgrade von Pipe auf Filter bereit, sodass Filter in Angular1.x verwendet wird , das Filter-Upgrade wird vor der Komponente platziert, da die Komponentenvorlage möglicherweise

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;
  }
}

verwendet. 4. Aktualisieren Sie schrittweise die Komponenten im Projekt Für die Komponente

von Angular5 aktualisieren wir den Inhalt in hero-detail.js auf 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()
  }
}

Um die Hero-Detail-Komponente in Angular1.x zu verwenden, erstellen Sie zuerst eine downgrade-components.ts-Datei, die alle in angle1.x verwendeten Komponenten nach dem Downgrade von angle5-Komponenten speichert

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)

Jetzt können Sie die hero-detail-Komponente verwenden wird in der Vorlage in Angular1.x verwendet. Das Kommunikationsproblem zwischen Komponenten wird gemäß der Schnittstelle von Angular5

5 geschrieben. Ändern Sie den Angular1.x-Controller in Angular5 Componenten

t

Jetzt ist nur noch der Controller übrig, der den Controller als große Komponente behandeln kann, also rekonstruieren wir den Controller gemäß der Komponentenmethode und stufen die neue Komponente herunter Das Routing muss geändert werden. Wir verwenden immer noch das Routing von Angular1. Weitere Informationen finden Sie auf der chinesischen PHP-Website

AngularJS Development Manual

)

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

Nachdem Sie TestContentCtrl in die Testinhaltskomponente geändert haben

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

6. Plug-in oder Bibliothekslösung von Drittanbietern

In Bezug auf Plug-Ins oder Bibliotheken, die auf Angular1.x basieren und auf die im Projekt verwiesen wird, können Sie grundsätzlich die Angular2+-Version für die Downgrade-Verarbeitung einführen und sie dann in Angular1.x verwenden ~~~, Angular2+ Viele APIs wurden in der Version und den entsprechenden Verwendungsmethoden in Angular1 geändert. Wenn das Plug-In in der Angular1 x-Anwendung verwendet wird, wird Angular1 verwendet. Option 2 ist eine gute Wahl, ohne die Ladezeit des ersten Bildschirms zu beeinträchtigen, da das gleichzeitige Durchlaufen aller APIs aller Plug-Ins oder Bibliotheken relativ arbeitsintensiv und fehleranfällig ist und nicht unserem Original entspricht Absicht eines inkrementellen Upgrades

• Da nun im Grunde der gesamte Inhalt des Projekts auf Angular5 aktualisiert wurde, können wir die beiden Dateien downgrade-services.ts und downgrade-components.ts löschen und Aktualisieren Sie das Routing auf Angular5. Löschen Sie die Bibliotheken und Plug-Ins im Zusammenhang mit Angular1 (Studie im Handbuch

  ). Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

• 
  

Das obige ist der detaillierte Inhalt vonAngular1.x und Angular2+ laufen parallel, Angular1.x aktualisiert die Angular2+-Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!