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

Question

我正在将应用程序从 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);
            })
        })
    })

谢谢。

Answer 1

下面的代码并不完整，但可以让您大致了解您应该前进的方向。它是您使用 ionic-cli 生成新应用时为您创建的样板代码的修改版本。

您可以在名为services 的app/ 文件夹的子文件夹中的单独文件中定义每个服务。例如，您的AService 将在app/services/a-service.ts 中定义。您在 app.ts 文件的顶部导入应用程序级服务，然后将它们包含在一个数组中，作为文件最底部 ionicBootstrap() 函数的第二个组件。您还必须将它们作为私有变量注入到您的 MyApp 组件的 constructor() 中。

不再有像 $scope 或 $rootScope 这样的东西，您可以在其中存储应用程序范围的变量。相反，您将创建一个提供程序（例如UserData），用于存储需要跨页面或会话持久保存的数据。

我建议通读 Ionic 2 Conference Application，它是由开发人员使用 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]);