이 글에서는 angularjs1.x에서angularjs2+를 업그레이드하는 솔루션을 소개하고, 또한angularjs1.x와angularjs2+사이의 병렬성을 소개합니다.이제 이 글을 함께 살펴보겠습니다

angular1.xAngular2+ 솔루션 업그레이드

제가 제공하는 것은Angular1에 대한 병렬 및 증분 업그레이드 솔루션입니다.

옵션 1: 본체는Angular1.x이며,Angular1.x의 서비스, 구성 요소, 필터, 컨트롤러, 경로 및 종속 항목을 점진적으로 업그레이드합니다. toangular5
옵션 2: 본체는angular5이고 프로젝트의 모든 js 파일이 먼저 업그레이드됩니다. 일회성 처리, ES6 방법을 사용하여 각 js 파일 모듈
을 내보낸 다음 점차적으로 콘텐츠를 각도5에 더 가깝게 이동합니다. angular5

옵션 1을 사용하여 동일한 애플리케이션에서 이 두 프레임워크를 함께 실행하여 점진적으로 업그레이드하고 AngularJS 구성 요소를 하나씩 Angular로 마이그레이션하는 것이 좋습니다. 이 작업은 여러 사람이 완료하고 일정 기간에 걸쳐 점진적으로 출시될 수 있으므로 다른 비즈니스를 방해하지 않고 애플리케이션을 업그레이드할 수 있습니다. 다음은 옵션 1

Hybrid APP에 대한 설명입니다. 정적 모듈. 앞으로는 어디에서나 볼 수 있을 것입니다. 다음은 angle1을 마이그레이션하는 방법을 단계별로 알려줍니다. Angular에서는 메타데이터에서 Angular 리소스를 설명하는 데 사용되는 NgModule 데코레이터를 사용하여 하나 이상의 클래스를 만듭니다. 하이브리드 애플리케이션에서는 두 가지 버전의 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. 프로젝트의 서비스를 점차적으로 angle5로 업그레이드하세요

username-service.js의 콘텐츠를 업그레이드하겠습니다. ... 이 두 단계를 완료하면 UsernameService가 angle1에 주입될 수 있으며, 프로젝트의 필터는 angle5의 파이프로 점진적으로 업그레이드되고, 필터의 모듈은 angle1에서 사용됩니다. Angular5의 구성 요소

hero-detail.js의 콘텐츠를 Hero-detail.ts로 업그레이드합니다.

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

로그인 후 복사

Angular1.x에서 Hero-detail 구성 요소를 사용하려면 먼저 downgrade-comComponents .ts 파일을 생성하고, 여기에는angular5 구성 요소를 다운그레이드한 후angular1.x에서 사용된 모든 구성 요소가 저장됩니다. downgrade-comComponents.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));

로그인 후 복사

이제 각도 1.x의 템플릿에서 Hero-detail 구성 요소를 사용할 수 있습니다. 구성 요소 간의 통신 문제는 다음과 같습니다. Angular5

5의 인터페이스에 따라 작성되었으므로 구성 요소 방법에 따라 컨트롤러를 재구성하고 새 구성 요소를 다운그레이드해야 합니다. 기본적으로 경로는 컨트롤러에 해당합니다. 경로는 다음과 같이 수정할 수 있습니다.

TestContentCtrl이 있고 해당 경로가 테스트라고 가정합니다. PHP 중국어 웹사이트

AngularJS 개발 매뉴얼

을 참조하세요)

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

로그인 후 복사

TestContentCtrl을 테스트 콘텐츠 구성 요소로 변경한 후

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

로그인 후 복사

6. 타사 플러그인 또는 라이브러리 솔루션

Angular1 기반의 플러그인 또는 라이브러리 관련하여 API가 변경되었으며,Angular1의 해당 사용 방법은 모든 플러그인을 확인하고 플러그인을 사용하려면Angular2+ 버전을 사용하세요

Angular2+ 버전을 도입하고 Angular1.x 버전을 유지합니다.
옵션 2는 프로젝트 크기를 늘리며 동일한 플러그인은 두 가지 버전을 참조합니다. 옵션 2는 첫 번째 화면의 로딩 시간에 영향을 주지 않는 좋은 선택입니다. 왜냐하면 모든 플러그인이나 라이브러리의 모든 API를 한 번에 처리하는 것은 상대적으로 작업량이 많고 오류가 발생하기 쉽고 원본과 일치하지 않기 때문입니다. 점진적 업그레이드 의도
이제 기본적으로 프로젝트의 모든 콘텐츠가 각도5로 업그레이드되었으므로 downgrade-services.ts 및 downgrade-comComponents.ts 두 파일을 삭제하고 라우팅을 각도5로 업그레이드한 다음 angular1.x 관련 라이브러리와 플러그인을 사용하면 완전한 angle5 애플리케이션이 탄생합니다

자, 이 글은 끝났습니다. 질문이 있으시면 아래에 메시지를 남겨주세요.

위 내용은 angular1.x 및angular2+는 병렬로 실행되며,angular1.x는Angular2+ 솔루션을 업그레이드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!