>웹 프론트엔드 >JS 튜토리얼 >AngularJS를 Angular2+로 업그레이드하는 방법은 무엇입니까? Anglejs 업그레이드 소개 예

AngularJS를 Angular2+로 업그레이드하는 방법은 무엇입니까? Anglejs 업그레이드 소개 예

寻∝梦
寻∝梦원래의
2018-09-08 15:53:532032검색

이 글은 주로 angularjs의 Angularjs에서 Anglejs2+로의 업그레이드를 소개합니다. 이제 이 글을 함께 읽어보겠습니다.

우리가 몇 달 만에 업그레이드하기 위해 초과 작업한 두 프로젝트를 요약하면, UpgradeModule이 사용됩니다. 다른 하나는 DowngradeModule입니다. (ng1->AngularJS; ng2+->Angular2+) 자세한 내용은 공식 문서(https://angular.io/guide/upgrade

)를 참조하세요. 사용해야 하는 TypeScript의 장점과 단점, 사용법은 여기서는 설명하지 않겠습니다.


1. UpgradeModule: 이것은 Angular에서 출시된 최초의 병렬 업그레이드 방법입니다. 단점은 상대적으로 이해하기가 쉽다는 것입니다. 먼저 Angular2+ 앱을 만든 다음 컨트롤러/서비스/를 추가하면 됩니다. ng1의 지시문을 직접 래핑하고 ng2+ 환경에서 직접 실행되도록 합니다.

단계별:

* ng2 앱에서 시작:

** index.html에서 ng-app 삭제;

** main.ts 추가:

import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
import { AppModule } from './app/app.module';
 
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['carepilot'], { strictDi: true });
});
** app.module.ts 추가: 모든 모듈 모두 여기에 정의되어 있습니다


import { NgModule, forwardRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
 
@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ],
    bootstrap: []
})
 
export class AppModule {
    ngDoBootstrap() {}
}
** tsconfig.json 추가: ts->js

{
    "compileOnSave": false,
    "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2015",
            "dom"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}
** systemjs.config.js: systemjs를 사용하여 종속 모듈을 로드합니다. 병렬 변환 중 일반적인 예 SystemJS는 다음과 같습니다.

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            app: 'app',
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            'rxjs': 'npm:rxjs'
        },
        packages: {
            app: {
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js',
                format: 'cjs'
            }
        }
    });
})(this);
** index.html 변경: ng2에 필요한 일부 라이브러리를 로드해야 합니다(참고: 다음 zone.js 등은 gulp와 같은 도구를 사용하여 복사해야 합니다). 디렉터리)

<script></script>
<script></script>
<script></script>
<script></script>

<!-- inject:js -->
<!-- endinject -->

<script>
System.import(&#39;main.js&#39;)
.then(null, console.error.bind(console));
</script>
이제 이 하이브리드 앱을 실행할 수 있어야 합니다. 다음 단계는 컨트롤러를 하나씩 업그레이드하고 함정을 하나씩 밟아가는 것입니다. 지시문 -> 구성요소/지시문, 서비스 -> 서비스, 파이프/필터 -> 파이프;

* 예: 컨트롤러를 구성요소로 업그레이드(자세한 내용을 보려면 PHP 중국어 웹사이트
AngularJS 개발로 이동) Manual

학습)

import {
    Component,
    Inject
} from '@angular/core';
import { Broadcaster } from '../../services/broadcaster';
 
@Component({
    selector: 'about',
    templateUrl: './about.component.html'
})
export class AboutComponent {
 
    constructor(private broadcaster: Broadcaster) {
    }
 
    print(): void {
        this.broadcaster.broadcast('printContents', 'printable');
    }
}
* 대부분의 프로그램은 여전히 ​​ng1 코드이므로 ng1 및 ng2+ 항목이 통신할 수 있도록 하려면 먼저 ng2+ 모듈을 다운그레이드해야 합니다.
angular.module('interestApp')

.directive('pinControls',

upgradeAdapter.downgradeNg2Component(PinControlsComponent));
config.js에서 라우팅을 업데이트합니다(가정) ui- state):

.state('add', {

template: "<add-pin></add-pin>",

url: '/add'
* 같은 문제는 일부 컨트롤러가 업그레이드된 후 일부 이전 서비스에 의존해야 한다는 것입니다. 이때 구성 요소에서 사용하려면 ng1의 서비스를 ng2+로 일시적으로 업그레이드해야 합니다. ng2+. ui-route가 이 작업을 수행해야 하는 경우에만 이 문제가 발생했습니다. 여기서 해당 라이브러리의 정의를 찾을 수 있습니다. -ui--angular-ui-router/modules/ng.html

* 업그레이드 후 가장 어색한 점은 $scope와 $rootscope입니다. ng1에서는 전역 루트스코프가 사용하기 매우 편했는데 2019년에는 취소되었습니다. ng2+. 기존 루트스코프를 대체하려면 서비스를 정의해야 합니다. 현재 구성요소는 직접 사용할 수 없습니다. 값을 바인딩하려면 범위를 사용하세요. 이전 =, > 값 전달 프로세스

* ng2+ 라우터를 사용하여 경로 정의: 물론, ui-route @ui-route의 업그레이드 버전을 계속 사용할 수도 있습니다.

const AppRouting: Routes = [
    { path: 'app', component: DashboardComponent, canLoad: [AuthGuard], canActivate: [AuthGuard], data: { pageTitle: 'Dashboard' }];
* 새로운 방법의 사용, 습관의 변화, 일부 ng1 라이브러리가 유지되지 않거나 ng2+로 업그레이드되지 않은 것으로 밝혀졌습니다. 대체품을 찾거나 직접 작성하십시오

), 마침내 ng1의 레거시 및 지원 프로그램을 삭제할 때입니다. ng1을 만들고 이를 완전한 ng2+ 프로그램으로 변환합니다.

AngularJS를 Angular2+로 업그레이드하는 방법은 무엇입니까? Anglejs 업그레이드 소개 예** 업그레이드 모듈 삭제:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
 
platformBrowserDynamic().bootstrapModule(AppModule);
** 모든 업그레이드 모듈 및 다운그레이드 모듈 삭제

** 초기 경로를 로드하기 위한 앱 구성요소 추가: (계속 진행하는 경우 ng2+ 기본 경로를 사용한다고 가정합니다. ui -route를 사용하고 계속해서 ui-view를 사용하세요)

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-root',
    template: `
    <p>
    <router-outlet></router-outlet>
    </p>
  `
})
export class AppComponent {
  constructor(private route: Router) {
        let loc = window.location.pathname.toString();
        if (loc == '/login' || loc == '/') {
            this.route.navigate(['login']);
        }
    }
}

* 즉시 성공했습니다. 마지막으로 각도-cli를 사용하여 컴파일 프로세스와 모듈 로딩을 관리했습니다. 릴리스 등 만족스럽지 못한 점 JIT를 지원하지 않는 등의 문제
)

AngularJS를 Angular2+로 업그레이드하는 방법은 무엇입니까? Anglejs 업그레이드 소개 예


이제는 npm(어떤 사람은 Yarn을 사용함)만 있으면 Bower를 해고할 수 있습니다.
  • Systemjs도 가능합니다. 전화를 받아보세요
  • Gulp나 grunt는 이때 구체적인 상황을 분석해야 합니다. 서버가 더 복잡하다면 서버를 시작하기 위해 유지하는 것이 좋습니다. npm이 dev를 실행할 때 서버를 관리하기 위한 gulp/grunt
  • 이제 모든 업그레이드가 완료되었습니다. 물론 실제 프로세스에서는 다양한 불만 사항이 있을 것입니다. 프로젝트 규모가 작은 경우 이 방법을 사용할 수 있습니다. 업그레이드가 거의 완료되었습니다. 프로젝트 규모가 상대적으로 크고 업그레이드하는 데 수개월이 소요되는 경우 다음과 같은 다운그레이드 방법을 사용해야 합니다.
2. 다운그레이드: 공식 소개는 금만큼 귀중한 것이므로 처음 시도하는 사람들에게는 이해하기 어렵습니다.

原理:downgrade是不改变原来的ng1程序,新建一个ng2+程序,然后把这个程序做成一个模块,直接注入到ng1里头,这样会避免一些额外的change事件,从而避免了不必要的消息循环,这样来提升性能。

用下面的5步升级到ng2+:

第一步:写一个新的ng2+程序,然后注入到ng1里头:

main.ts: (XXXXXX替换成你的ng1的app的名字就行了)

import { NgModule, forwardRef, StaticProvider } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { downgradeModule, downgradeComponent, setAngularLib } from '@angular/upgrade/static';
 
declare const angular: any;
declare const window: any;
const bootstrapFn = (extraProviders: StaticProvider[]) => {
    const platformRef = platformBrowserDynamic(extraProviders);
    return platformRef.bootstrapModule(AppModule);
};
 
const downgradedModule = downgradeModule(bootstrapFn);
 
angular.module('XXXXXX.ng2', [
    downgradedModule
]);
angular.module('XXXXXX.ng2').directive('template', downgradeComponent({ component: template}));

* app.js (就这里麻烦,试了一天才试出来,这么注入,然后加载)

(function() {
    angular.module('XXXXXXX', [
        // all the old modules
        'XXXXXXX.ng2'
    ]);
    // eslint-disable-next-line
    if (window.ignoreNg2ForTest) {
        // temporary not load ng2 module in karma test
        fetchData().then(bootstrapApplication);
    } else {
        // normal hybrid entrance
        loadMain().then(fetchData).then(bootstrapApplication);
    }
 
 
    function loadMain() {
        return System.import('main');   // load main.ts
    }
 
    function fetchData() {
        // old logic
    }
 
    function bootstrapApplication() {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['XXXXXXXX'], { strictDi: true }); // bootstrap app with ng1
        });
    }
 
}());

* 同样,在index.html里加入一些依赖(升级完都可以删)

<script></script>
<script></script>
<script></script>
<script></script>

* 手动拷一些依赖到dest 文件夹:(我们用的gulp)

pipes.builtAngularVendorScriptsDev = function() {
    return gulp.src([
        './node_modules/core-js/client/shim.min.js',
        ............
    ], {base: './node_modules'})
        .pipe(gulp.dest('dist.dev/node_modules'));
};

* JSPM: 不用这东西的话release 里头的客户端有近百M,会疯的,虽然这个东西也bug重重,临时用用还是可以的。用它以后release的客户端代码只有十几M,可以接受了。

gulp.task('build-jspm-prod', ['hybrid-tsbuild'], function() {
    return jspm({
            config: './client/systemjs.config.js',
            bundleOptions: {
                minify: true,
                mangle: false
            },
            bundleSfx: true,
            bundles: [
                { src: paths.tsOutput + '/*', dst: 'main.js' }
            ]
        }).pipe(gulp.dest('dist.prod'));
});


第二步:升级一个个的controller/service/pipe/directive等等,这个过程相当痛苦,原来代码的耦合,莫名其妙的event emit和不知道在哪儿的event handler。全局的rootscope遍地都是,牵一发动全身。自己解耦吧,没什么好办法。


第三步:升级路由,这个虽然没有上一步那么煎熬,也很头疼,很多地方都要改,

* 如果用route的话参见上面upgrademodule里的例子就好了;

* 如果使用@ui-route的话,state现在需要这么定义:(abstract我还没有研究出来有什么用)

export const registerState = {
    parent: 'app',
    name: 'register',
    url: '/register/{activationCode}',
    component: RegisterComponent,
    data: { pageTitle: 'Register' }
};

第四步:删除ng1的东西;

第五步:使用angular-cli管理依赖:

* 参照上面upgrademodule对应的步骤就好;

* 这时候可以删除JSPM了,这东西和SystemJS都是定时炸弹,bug重重啊,目前angular-cli比较稳定;


到这里,应该你的程序已经升级到了ng2+,目前是ng5,建议升级过程中把anglar相应的版本写死,这东西更新太快,你随着它升随时出现已有的包不兼容,很头疼,我们暂时定格在5.0。

我是升级完了站着说话不腰疼,上面的东西只能帮有需要的朋友节约一点点时间,最大的时间消耗在升级controller和解耦的过程中。那里如果有什么问题可以在下面留言,能帮上的话尽量帮大家省省时间。AngularJS를 Angular2+로 업그레이드하는 방법은 무엇입니까? Anglejs 업그레이드 소개 예



备注一:替换规则。


  • ng-bind-html       [innerHTML]

  • ng-model             [(ngModel)]                                        // 这个和ng1的双向绑定基本一个意思

  • ng-class                [ngClass]

  • ng-disabled          [disabled]

  • ng-click                 (click)

  • ng-if                     *ngIf

  • ng-repeat           *ngFor                                              // E.g. *ngFor="let task of currentChecklist.open; let i = index;"

  • ng-show               *ngIf

  • ng-src                   [src]

  • ng-hide                 *ngIf

  • ng-submit            (ngSubmit)

  • ng-style                [ngStyle]

备注二:可能遇到的问题

  • JS:

    • 消息处理:ng2+里没有了scope继承,所以自己定义全局的消息处理是必要的;

  • HTML模板:

    • directive conflict: 정의된 이름을 구분하는 것이 가장 좋습니다. ng1에서

이 글은 여기에서 끝납니다(자세한 내용을 보려면 PHP 중국어 웹사이트로 이동하세요 AngularJS 사용자 매뉴얼#🎜🎜 #中학), 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 AngularJS를 Angular2+로 업그레이드하는 방법은 무엇입니까? Anglejs 업그레이드 소개 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.