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