angulaire1.x et angulaire2+ fonctionnent en parallèle, mise à niveau angulaire1.x de la solution angulaire2+

Cet article présente le plan de mise à niveau d'angularjs2+ à partir de angularjs1.x, et présente également le parallélisme entre angulairejs1.x et angulairejs2+. Lisons maintenant cet article ensemble

.

solution de mise à niveau angulaire1.x angulaire2+

Je vous propose une solution de mise à niveau parallèle et incrémentielle pour angulaire1 Pour votre propre application, si vous ne souhaitez pas lire le texte, démarrez simplement la démo migration-from-angular1.x-to-angular2Plus

• Option 1 : le corps principal est angulaire1.x et ajoutez progressivement un service, un composant, un filtre, un contrôleur, une route , et les dépendances sont mises à niveau vers angulaire5

• Option 2 : le corps principal est angulaire5. Tous les fichiers js du projet sont traités une fois et chaque fichier js est traité à l'aide du module ES6 exporter, puis rapprocher progressivement le contenu d'angular5
  

Je recommande de choisir l'option 1 pour une mise à niveau incrémentielle, en exécutant ces deux frameworks ensemble dans la même application, et de migrer les composants AngularJS vers Angular un par un. Vous pouvez mettre à niveau l'application sans interrompre d'autres activités, car ce travail peut être effectué par plusieurs personnes et déployé progressivement sur une période de temps. Ce qui suit est une explication de l'option 1

L'application hybride repose principalement. sur Angular pour fournir des modules de mise à niveau/statiques. Vous le verrez partout dans le futur. Ce qui suit vous apprendra étape par étape comment migrer angulaire1 vers la propriété angulaire.module. Dans Angular, nous créons une ou plusieurs classes avec des décorateurs NgModule, qui sont utilisés pour décrire les ressources Angular dans les métadonnées. Dans une application hybride, nous exécutons simultanément deux versions d'Angular. Cela signifie que nous avons besoin d'au moins un module d'AngularJS et d'Angular. Pour démarrer une application hybride, nous devons démarrer à la fois Angular et AngularJS dans l'application. Vous devez d'abord amorcer Angular, puis appeler UpgradeModule pour amorcer AngularJS. Supprimez les directives ng-app et ng-strict-di du code HTML, créez un fichier app.module.ts et ajoutez la classe NgModule suivante :

Utilisez AppModule.ngDoBootstrap Méthode pour démarrer l'application AngularJS, nous pouvons maintenant utiliser la méthode platformBrowserDynamic.bootstrapModule pour démarrer l'AppModule.

main.ts :

Nous sommes sur le point de commencer à exécuter une application hybride AngularJS+5 ! Tout le code AngularJS existant fonctionnera normalement comme avant, mais nous pouvons également exécuter du code Angular maintenant

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

2. Mettez progressivement à niveau les services du projet vers angulaire5

Nous mettons à niveau le contenu de username-service.js vers username-service.ts :

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

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

Pour utiliser UsernameService dans angulaire1.x, créez d'abord un fichier downgrade-services.ts, ici il stockera tous les services utilisés dans angulaire1. .x après la rétrogradation des services angulaires5

downgrade-services.ts :

Après avoir terminé ces deux étapes, UsernameService peut être utilisé dans le service de composant du contrôleur angulaire1.x Une fois l'injection utilisée, Je ne donnerai pas d'exemple de comment l'utiliser dans angulaire5. Suivez simplement la méthode d'utilisation de angulaire5

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

3. Le filtre du projet est progressivement mis à niveau vers le tube angulaire5, et en même temps. angulaire1.x Le filtre est toujours conservé

En raison du problème de performances du filtre, le filtre a été remplacé par pipe dans angulaire2. L'équipe angulaire ne fournit pas de module pour mettre à niveau le filtre vers pipe ou rétrograder. pipe à filtrer, il est donc utilisé dans le filtre angulaire 1.x, le tuyau est utilisé dans angulaire et la mise à niveau du filtre est placée avant le composant, car le modèle de composant peut utiliser

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

username-pipe.ts :

4. Les composants du projet sont progressivement mis à niveau vers les composants d'angular5

Nous mettons à niveau le contenu de hero-detail.js vers 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;
  }
}

doit être dans angulaire1. Pour utiliser le composant hero-detail dans x, créez d'abord un fichier downgrade-components.ts, qui stockera tous les composants utilisés dans

Vous pouvez maintenant utiliser le composant hero-detail dans le modèle dans angulaire1. Le contrôleur a été remplacé par le composant angulaire5t

Maintenant, seul le contrôleur Angular2 a annulé le contrôleur. comme un gros composant, nous reconstruisons donc le contrôleur selon la méthode des composants, et une fois le nouveau composant déclassé et le contrôleur reconstruit, nous devons modifier le routage d'angular1.x. une route correspond à un contrôleur. A ce moment, le routage peut être modifié comme ceci :

Supposons TestContentCtrl, la route correspondante est test (si vous voulez en savoir plus, rendez-vous sur le site PHP chinois

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

Manuel de développement AngularJS

à apprendre)

Après avoir modifié TestContentCtrl en composant de contenu de test

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)

6. 🎜>

Concernant les plug-ins ou bibliothèques basés sur angulaire1.x qui sont référencés dans le projet, vous pouvez essentiellement trouver la version angulaire2+. Vous pouvez introduire la version angulaire2+ pour le traitement de rétrogradation et elle peut ensuite être utilisée dans angulaire1.x, mais. ~~~, angulaire2+ De nombreuses API ont été modifiées dans la version, et les méthodes d'utilisation correspondantes dans angulaire1 Après cela, si le plug-in est utilisé dans l'application angulaire1, x utilise angulaire1. L'option 2 est un bon choix sans affecter le temps de chargement du premier écran, car parcourir toutes les API de tous les plug-ins ou bibliothèques en même temps représente une charge de travail relativement importante et sujette aux erreurs, et elle n'est pas conforme à notre version originale. intention de mise à niveau incrémentielle

• Maintenant que pratiquement tout le contenu du projet a été mis à niveau vers angulaire5, nous pouvons supprimer les deux fichiers downgrade-services.ts et downgrade-components.ts, et mettez à niveau le routage vers angulaire5. Supprimez les bibliothèques et plug-ins liés à l'étude angulaire1 dans le manuel

  ), si vous avez des questions, vous pouvez laisser un message ci-dessous.

• 
  

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!