搜索
首页web前端js教程AngularJS如何升级到Angular2+?angularjs升级的实例介绍

本篇文章主要的介绍了关于angularjs的升级,从angularjs升级到angularjs2+,现在就让我们一起来看这篇文章吧

总结一下几个月时间加班赶工升级的两个项目,一个项目使用的是UpgradeModule,另一个使用的是DowngradeModule,如下做个记录:(ng1->AngularJS; ng2+->Angular2+),具体的可以看官方文档:https://angular.io/guide/upgrade

需要用到的typescript的优缺点和使用方法就不在这里赘述了。

一、 UpgradeModule:这个是Angular最早放出来的并行升级方式,缺点是性能方面比较差,理解起来还比较简单,就是先创建一个Angular2+的app,然后把ng1的controller/service/directive之类的直接包裹一下,让他们在ng2+的环境下直接跑。

Step by step:

* 从ng2 app 启动:

** 从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 src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

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

<script>
System.import('main.js')
.then(null, console.error.bind(console));
</script>

现在,这个hybrid的app应该可以跑起来了,下面的工作就是把controller一个一个升级,一个个踩坑的过程;

简单来说,升级的时候controller->component, directive -> component/directive, service -> service, pipe/filter -> pipe;

* 例子:升级一个controller到component(想看更多就到PHP中文网AngularJS开发手册中学习)

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+的模块先downgrade:

angular.module('interestApp')

.directive('pinControls',

upgradeAdapter.downgradeNg2Component(PinControlsComponent));

更新config.js里的路由(假设使用ui-state):

.state('add', {

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

url: '/add'

* 同样的问题,一些controller升级了以后需要依赖一些以前的service,这时候需要暂时将ng1的service升级到ng2+,以供ng2+的component使用,我在升级过程中只遇到ui-route需要这么做,这时候需要用types,可以到这里找对应的库的定义http://definitelytyped.org/docs/angular-ui--angular-ui-router/modules/ng.html

* 升级后,最别扭的就是$scope和$rootscope,在ng1里头,全局的rootscope用的爽的不得了,在ng2+里头取消了,需要自己定义一个service来替代以前的rootscope,现在的component不能直接使用scope用= , >这样来绑定值了,要用@input和@output把值传入和传出来,对应于以前的=,>传值过程;

* 使用ng2+的Router定义路由:当然也可以继续使用ui-route的升级版@ui-route;

const AppRouting: Routes = [
    { path: 'app', component: DashboardComponent, canLoad: [AuthGuard], canActivate: [AuthGuard], data: { pageTitle: 'Dashboard' }];

* 经过痛苦的斗争(新方法的使用,习惯的改变,原来一些ng1的库没人维护也没人升级到ng2+,找替代品或者自己写一个大哭),终于把ng1的东西都升级完了,这时候该删除ng1的遗留和支持程序了,变成一个完全的ng2+程序了。

** 删除upgrademodule:

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

** 删除全部的upgrade 模块、downgrade模块;

** 加一个appcomponent用来加载初始的路由:(这里假设你用ng2+默认的route, 如果继续使用ui-route,继续使用ui-view即可)

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-root',
    template: `
    <p class="main-page">
    <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']);
        }
    }
}

* 马上就成功了,最后使用angular-cli来管理编译过程和模块加载,这东西是个好玩意(虽然也有一些不如人意的地方,比如release不支持JIT等等的问题敲打


  • 现在只需要npm就好了(有人用yarn),bower可以下岗了.

  • Systemjs也就可以谢幕了;

  • Gulp 或者grunt这时候需要具体情况具体分析,如果服务端比较复杂,建议还是保留,用来启动服务端,使用concurrent就可以在npm run dev时候angular-cli管客户端代码,gulp/grunt管服务端;

现在,全部的升级就完成了,当然实际过程肯定会遇到种种不如意,具体情况具体对待吧,这种方式如果项目小的话可以采用,比较好理解,网上的例子也多,很快升级完。如果项目比较大,需要几个月时间升级的话,那就要使用下面的downgrade的方式了。

二、downgrade:官方的介绍惜墨如金,给第一次弄这玩意的人挺难理解的。

原理: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 src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></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和解耦的过程中。那里如果有什么问题可以在下面留言,能帮上的话尽量帮大家省省时间。微笑



备注一:替换规则。


  • 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冲突:定义的名字最好分开,ng1里叫

本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。

以上是AngularJS如何升级到Angular2+?angularjs升级的实例介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Vue3+TS+Vite开发技巧:如何进行SEO优化Vue3+TS+Vite开发技巧:如何进行SEO优化Sep 10, 2023 pm 07:33 PM

Vue3+TS+Vite开发技巧:如何进行SEO优化SEO(SearchEngineOptimization)是指通过优化网站的结构、内容和关键词等方面,使其在搜索引擎的排名更靠前,从而增加网站的流量和曝光度。在Vue3+TS+Vite等现代前端技术的开发中,如何进行SEO优化是一个很重要的问题。本文将介绍一些Vue3+TS+Vite开发的技巧和方法,帮

聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

Vue3之getCurrentInstance与ts怎么结合使用Vue3之getCurrentInstance与ts怎么结合使用May 15, 2023 pm 10:37 PM

getCurrentInstance与ts结合使用vue3项目中,如果不用ts这样使用是没问题的const{proxy}=getCurrentInstance()在ts中使用会报错:报错:...类型“ComponentInternalInstance|null”我们在项目中一般会用到很多getCurrentInstance()方法,直接封装一下创建useCurrentInstance.ts文件:import{ComponentInternalInstance,getCurrentInstance

Vue3+TS+Vite开发技巧:如何进行数据加密和存储Vue3+TS+Vite开发技巧:如何进行数据加密和存储Sep 10, 2023 pm 04:51 PM

Vue3+TS+Vite开发技巧:如何进行数据加密和存储随着互联网技术的快速发展,数据的安全性和隐私保护变得越来越重要。在Vue3+TS+Vite开发环境下,如何进行数据加密和存储,是每个开发人员都需要面对的问题。本文将介绍一些常用的数据加密和存储的技巧,帮助开发人员提升应用的安全性和用户体验。一、数据加密前端数据加密前端加密是保护数据安全性的重要一环。常用

Vue3+TS+Vite开发技巧:如何进行跨域请求和网络请求优化Vue3+TS+Vite开发技巧:如何进行跨域请求和网络请求优化Sep 09, 2023 pm 04:40 PM

Vue3+TS+Vite开发技巧:如何进行跨域请求和网络请求优化引言:在前端开发中,网络请求是非常常见的操作。如何优化网络请求以提高页面加载速度和用户体验是我们开发者需要思考的问题之一。同时,对于一些需要向不同域名发送请求的场景,我们需要解决跨域问题。本文将介绍如何在Vue3+TS+Vite开发环境下进行跨域请求以及网络请求的优化技巧。一、跨域请求解决方案使

Vue3+TS+Vite开发技巧:如何进行前端安全防护Vue3+TS+Vite开发技巧:如何进行前端安全防护Sep 09, 2023 pm 04:19 PM

Vue3+TS+Vite开发技巧:如何进行前端安全防护随着前端技术的不断发展,越来越多的企业和个人开始使用Vue3+TS+Vite进行前端开发。然而,随之而来的安全风险也引起了人们的关注。在本文中,我们将探讨一些常见的前端安全问题,并分享一些在Vue3+TS+Vite开发过程中如何进行前端安全防护的技巧。输入验证用户的输入往往是前端安全漏洞的主要来源之一。在

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

vue3获取ref实例结合ts的InstanceType问题怎么解决vue3获取ref实例结合ts的InstanceType问题怎么解决May 20, 2023 pm 10:59 PM

vue3获取ref实例结合ts的InstanceType有时候我们模板引用,但是在使用的时候,ts提示却不行,没有提示组件通过defineExpose暴露的方法名称,虽然这不是很影响,但是可以解决还是可以解决下~import{ref}from&#39;vue&#39;constsayHello=()=>(console.log(&#39;我会说hello&#39;))defineExpose({sayHello})然后我们在父级使用,输入完成MyModalR

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境