将 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]);

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

Migrating a JavaScript\Ionic\Angular 1 App to Typescript\Ionic 2\Angular 2 App

javascript

typescript

ionic-framework

ionic2

angular