Angular1.x and angular2+ run in parallel, angular1.x upgrade angular2+ solution

This article introduces the solution for upgrading angularjs2 from angularjs1.x, and also introduces the parallelism between angularjs1.x and angularjs2. Now let’s take a look at this article together

angular1.x upgrade angular2 plan

I provide you with a parallel and incremental upgrade plan for angular1.x and angular5, so that you can upgrade step by step For your own application, if you don’t want to read the text, just start the demo migration-from-angular1.x-to-angular2Plus

• Option 1: The main body is angular1.x, and gradually add service, Component, filter, controller, route, and dependencies are upgraded to angular5

• Option 2: The main body is angular5. All js files in the project are processed once, and each js file is processed using ES6. module
  export, and then gradually move the content closer to angular5

I recommend choosing option 1 for incremental upgrade, by running these two frameworks together in the same application, and Migrate AngularJS components to Angular one by one. You can upgrade the application without interrupting other businesses, because this work can be completed by multiple people and gradually rolled out over a period of time. The following is an explanation of Option 1

Hybrid APP Mainly relies on Angular to provide upgrade/static modules. You will see it everywhere in the future. The following will teach you step by step how to migrate angular1. to the angular.module property. In Angular, we create one or more classes with NgModule decorators, which are used to describe Angular resources in metadata. In a hybrid application, we run two versions of Angular simultaneously. This means we need at least one module each from AngularJS and Angular. To bootstrap a hybrid application, we have to bootstrap both Angular and AngularJS in the application. You need to bootstrap Angular first, and then call UpgradeModule to bootstrap AngularJS.

Remove the ng-app and ng-strict-di directives from the HTML, create an app.module.ts file, and add the following NgModule class:

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

Use the AppModule.ngDoBootstrap method Start the AngularJS application. Now we can use the platformBrowserDynamic.bootstrapModule method to start the AppModule. main.ts:

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

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

We are about to start running a hybrid application with AngularJS 5! All existing AngularJS code will work normally as before, but we can also run Angular code now

2. Gradually upgrade the services in the project to angular5

We upgrade the content in username-service.js to username-service.ts:

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

To use UsernameService in angular1.x, first create a downgrade-services.ts file, where all Services used in angular1.x after the angular5 service is downgraded

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 completing these two steps, UsernameService can be injected into angular1.x controller component service, etc. , the usage method in angular5 is not given here. Just follow the usage method of angular5.

3. The filters in the project are gradually upgraded to the angular5 pipe, while the angular1.x filters are still retained.

Due to the performance problem of filter, filter has been changed to pipe in angular2. The angular team does not provide a module to upgrade filter to pipe, or downgrade pipe to filter, so filter is used in angular1.x. Using pipe, the filter upgrade is placed before the component, because the component template may be used

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. Gradually upgrade the components in the project For the component

of angular5, we upgrade the content in hero-detail.js to 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()
  }
}

To use the hero-detail component in angular1.x, First create a downgrade-components.ts file, which will store all the components used in angular1.x after downgrading angular5 components

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)

Now you can The hero-detail component is used in the template in angular1.x. The communication problem between components is written according to the interface of angular5

5. Change the angular1.x controller to angular5 componen

t

Now only the controller is left. Angular2 has canceled the controller. The controller can treat it as a large component, so we reconstruct the controller according to the component method and downgrade the new component. After the controller is reconstructed, we The routing needs to be modified. We are still using the routing of angular1. To learn more, go to the PHP Chinese website

AngularJS Development Manual

)

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

After changing TestContentCtrl to test-content component

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

6, third party Plug-in or library solution

Regarding plug-ins or libraries based on angular1.x that are referenced in the project, you can basically find the angular2 version. You can introduce the angular2 version for downgrade processing and then use it in angular1.x, but ~~~, angular2 Many APIs have been changed in the version, and the corresponding usage methods in angular1.x may no longer exist. Here are two solutions

• Introduce the angular2 version, delete the angular1.x version, and downgrade After that, if the plug-in is used in the angular1. The x application uses the angular1. Option 2 is a good choice without affecting the loading time of the first screen, because going through all the APIs of all plug-ins or libraries at once is a relatively large workload and is prone to errors, and it is not in line with our original intention of incremental upgrade

• Now that basically all the content in the project has been upgraded to angular5, we can delete the two files downgrade-services.ts and downgrade-components.ts, and upgrade the routing to angular5. Delete the libraries and plug-ins related to angular1. (Study in manual
  ), if you have any questions, you can leave a message below.

The above is the detailed content of Angular1.x and angular2+ run in parallel, angular1.x upgrade angular2+ solution. For more information, please follow other related articles on the PHP Chinese website!