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
  

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.

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

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

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

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é

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

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

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

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

à apprendre)

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

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!