angular1.x和angular2+并行，angular1.x 晋级 angular2+计划

2024年2月27日 139次阅读 来源: 西子

angular1.x 晋级 angular2+ 计划

我给人人供应的是angular1.x和angular5并行，增量式晋级计划，如许人人能够循规蹈矩晋级本身的应用，不想看笔墨直接demo入手migration-from-angular1.x-to-angular2Plus

  • 计划1:主体为angular1.x，逐步将angular1.x当中service、component、filter、controller、route、dependencies晋级为angular5
  • 计划2: 主体为angular5，将项目一切js文件先举行一次加工，采纳ES6的体式格局将每一个js文件module
    export出来，再逐步将内容向angular5接近

我发起挑选计划1增量式晋级，经由过程在同一个应用中一起运转这两个框架，而且逐个把AngularJS的组件迁移到Angular中。 能够在没必要打断别的营业的前提下，晋级应用程序，因为这项事情能够多人合作完成，在一段时候内逐步放开，下面就计划1睁开申明

Hybrid APP重要依靠Angular供应upgrade/static模块。背面你将随处可见它的身影。以下手把手教你将angular1.x迁移到angular2+

1、挪用 UpgradeModule 来指导 AngularJS

在AngularJS中，我们会把AngularJS的资本增加到angular.module属性上。 在Angular中，我们会建立一个或多个带有NgModule装潢器的类，这些装潢器用来在元数据中形貌Angular资本。在混合式应用中，我们同时运转了两个版本的Angular。 这意味着我们最少须要AngularJS和Angular各供应一个模块。要想指导混合式应用，我们在应用中必需同时指导 Angular 和 AngularJS。要先指导 Angular ，然后再挪用 UpgradeModule 来指导 AngularJS。

从HTML中移除ng-app和ng-strict-di指令, 建立一个app.module.ts文件，并增加以下NgModule类：

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

用AppModule.ngDoBootstrap要领中启动 AngularJS 应用,如今我们就能够应用 platformBrowserDynamic.bootstrapModule 要领来启动 AppModule 了。

main.ts：

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

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

我们就要最先运转AngularJS+5的混合式应用程序了！一切现存的AngularJS代码会像之前一样一般事情，然则我们如今也一样能够运转Angular代码了

2、将项目中的services逐步晋级为angular5

我们将username-service.js内里的内容晋级为username-service.ts：

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

要在angular1.x中应用UsernameService，先建立一个downgrade-services.ts文件，这里将会寄存一切angular5效劳降级后在angular1.x中应用的效劳

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

完成这两步以后UsernameService就能够在angular1.x controller component service等注入应用了，在angular5中的应用要领这里就不举例了，根据angular5的应用要领来就行

3、项目中的filter逐步晋级为angular5的pipe，同时angular1.x的filter依旧保存

因为filter的机能题目angular2中已将filter改成pipe，angular团队没有供应filter晋级为pipe，或许pipe降级为filter的module，所以angular1.x中应用filter，angular中应用pipe，filter的晋级放在component之前，因为component的template能够会用到

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、将项目中的component逐步晋级为angular5的component

我们将hero-detail.js内里的内容晋级为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()
  }
}

要在angular1.x中应用hero-detail component，先建立一个downgrade-components.ts文件，这里将会寄存一切angular5组件降级后在angular1.x中应用的组件

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)

如今你能够在angular1.x中的template中应用hero-detail组件了，组件之间通信的题目根据angular5的接口写

5、将angular1.x controller改成angular5 component

如今就剩下controller了，angular2已取消了controller，controller能够把它当做一个大的component，所以我们根据component的要领重构controller，而且对新的component降级，controller重构以后我们须要修正路由，我们如今应用的照样angular1.x的路由，基础上一个路由对应的是一个controller，这个时刻路由能够如许修正：

假设有个TestContentCtrl，对应的路由是test

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

在TestContentCtrl改成test-content component后

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

6、第三方插件或许库解决计划

关于项目中援用基于angular1.x的插件或许库，基础都能找到angular2+的版本，能够将angular2+的版本引入举行降级处置惩罚就能够在angular1.x中应用了，然则~~~， angular2+的版本许多API都改了，angular1.x中的对应应用要领能够不存在了，这里有两种解决计划

  • 引入angular2+的版本，删除angular1.x版本，降级后在angular1.x应用中用到该插件的都搜检一次，应用angular2+的版本的API应用该插件
  • 引入angular2+的版本，保存angular1.x版本，angular1.x应用应用angular1.x版本插件，
    angular5应用应用angular2+版本插件，

    计划2增加了项目的体积，雷同的插件援用了两个版本。在不影响首屏加载时候的情况下计划2是不错的挑选，因为一次性将一切插件或许库的API悉数过一遍，事情量比较大轻易失足，也不符合我们增量式晋级的初志

如今项目中一切的内容基础都晋级为angular5了，我们能够删除downgrade-services.ts和downgrade-components.ts这两个文件了，同时将路由晋级为angular5，删除angular1.x相干的库和插件，一个完全的angular5应用就诞生了

假如不是很邃晓直接看demo：migration-from-angular1.x-to-angular2Plus，喜好点个赞哟~~~

分享个题目：

假如import angular保错了，你能够斟酌引入@types/angular

    原文作者：西子
    原文地址: https://segmentfault.com/a/1190000013118395
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞