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.

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

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

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

2. Gradually upgrade the services in the project to angular5

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

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

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

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

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

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)

5. Change the angular1.x controller to angular5 componen

AngularJS Development Manual

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

.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!