将JavaScript\Ionic\Angular 1应用程序迁移到Typescript\Ionic 2\Angular 2应用程序

我正在将一个应用程序从JavaScript\Ionic\Angular1迁移到Typescript\Ionic2\Angular2，每次一个文件。我已经讨论了几十个如何从一个迁移到另一个，完成了Angular 2快速入门和教程，了解了如何从.js到.ts，以及安装了我需要的所有npm软件包。假设我拥有启动迁移过程所需的一切，那么我真的需要实际启动的帮助。我有几十个文件要转换，如果能用注释掉的旧代码正确地转换一个文件，并将其用作转换其他文件的参考，这将大大有助于我

这是一个示例文件。如果你能为我转换这个，或者带我完成转换，我将非常感激

angular.module('myApp.app', ['ionic'])
    .controller('myApp.app', function($rootScope, $scope, AService, BService, CService){
        $scope.setUserName = function (user){
            $scope.user = user;
        };
        document.addEventListener('deviceready', function() {
            $rootScope.$on('$cordovaNetwork:online', function (e, nState) {
                BService.setOnline(true);
            })
        })
    })

---

谢谢。

下面的代码不完整，但可以告诉您应该朝哪个方向走。它是样板代码的修改版本，每当您使用

ionic cli

生成新应用程序时，都会为您创建样板代码

您可以在名为

services

的

app/

文件夹的子文件夹中的单独文件中定义每个服务。例如，您的

a服务将在
app/services/a-service.ts
中定义。您可以在
app.ts
文件的顶部导入应用程序级服务，然后将它们包含在数组中，作为文件最底部的
ionicBootstrap（）
函数的第二个组件。您还必须将它们作为私有变量注入
MyApp
组件的
constructor（）

不再有任何类似于
$scope
或
$rootScope
的东西可以存储应用程序范围内的变量。相反，您可以创建一个提供者（例如，
UserData
），用于存储需要跨页面或会话持久化的数据

我建议您通读，它是由开发人员使用Ionic 2框架开发的示例应用程序。它向您展示了如何处理诸如用户登录和在应用程序中持久化数据之类的事情

import { Component } from "@angular/core";
import { ionicBootstrap, Platform, Nav } from "ionic-angular";
import { AService } from "./services/a-service";
import { BService } from "./services/b-service";
import { CService } from "./services/c-service";
import { UserData } from "./providers/user-data";
import { HomePage } from "./pages/home/home";

@Component({
    templateUrl: "build/app.html"
})
export class MyApp {
    // the root nav is a child of the root app component
    // @ViewChild(Nav) gets a reference to the app's root nav
    @ViewChild(Nav) nav: Nav;

    rootPage: any = HomePage;
    pages: Array<{ title: string, component: any }>;

    constructor(
        private platform: Platform,
        private aSvc: AService,
        private bSvc: BService,
        private cSvc: CService,
        private userData: UserData
    ) {
        this.initializeApp();

        // array of pages in your navigation
        this.pages = [
            { title: "Home Page", component: HomePage }
        ];
    }

    initializeApp() {
        this.platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            bSvc.setOnline(true);
        });
    }

    openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.setRoot(page.component);
    }
}

// Pass the main app component as the first argument
// Pass any providers for your app in the second argument
// Set any config for your app as the third argument:
// http://ionicframework.com/docs/v2/api/config/Config/

ionicBootstrap(MyApp, [AService, BService, CService, UserData]);

从“@angular/core”导入{Component}；
从“离子角度”导入{ionicBootstrap，Platform，Nav}；
从“/services/a-service”导入{AService}；
从“/services/b-service”导入{BService}”；
从“/services/c-service”导入{CService}”；
从“/providers/user data”导入{UserData}”；
从“/pages/home/home”导入{HomePage}”；
@组成部分({
templateUrl:“build/app.html”
})
导出类MyApp{
//根nav是根应用程序组件的子级
//@ViewChild（Nav）获取对应用程序根Nav的引用
@ViewChild（导航）导航：导航；
rootPage:any=主页；
页面：数组；
建造师(
私有平台：平台，
私人aSvc:AService，
私人bSvc:BService，
私人cSvc:CSSERVICE，
私有用户数据：用户数据
) {
这是.initializeApp（）；
//导航中的页面数组
此页=[
{标题：“主页”，组成部分：主页}
];
}
初始化EAPP（）{
this.platform.ready（）。然后（（）=>{
//好了，平台准备好了，我们的插件也可以使用了。
//在这里，您可以做任何您可能需要的更高级别的本地操作。
bSvc.setOnline（真）；
});
}
openPage（第页）{
//将内容导航重置为仅包含此页面
//我们不希望在这种情况下显示“后退”按钮
this.nav.setRoot（page.component）；
}
}
//将主应用程序组件作为第一个参数传递
//在第二个参数中传递应用程序的所有提供程序
//将应用程序的任何配置设置为第三个参数：
// http://ionicframework.com/docs/v2/api/config/Config/
ionicBootstrap（MyApp，[AService，BService，CService，UserData]）；
您能否向我展示一下实现UpgradeAdapter后相同的代码是什么样子的？谢谢。不幸的是，我对Angular1不太在行，也从未升级过应用程序，但对过程有非常透彻的描述，并且有很好的链接到描述概念和术语的外部内容。