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

Question

I'm working on migrating an App from JavaScript\\Ionic\\Angular1 to Typescript\\Ionic2\\Angular2 one file at a time. I've poured over dozens of how-to's and such about migrating from one to the other, done the Angular 2 quick start and tutorial, and seen how to go from .js to .ts as well as installed all of the npm packages I need. Assuming I have everything I need to start the migration process, I really need help actually starting. I have dozens of files to convert, and it would help me greatly to just get one file converted correctly with the old code commented out to use as a reference to convert the others.

Here is a sample file. If you could convert this for me, or walk me through converting it, I would be very appreciative.

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);
            })
        })
    })

Thank you.

Answer 1

The code below is not complete, but gives you an idea of the direction you should be heading. It is a modified version of the boilerplate code that is created for you whenever you use the ionic-cli to generate a new app.

You would define your services each in a separate file in a subfolder of your app/ folder called services . For example, your AService would be defined in app/services/a-service.ts . You import app level services at the top of your app.ts file and then include them in an array as the second component to the ionicBootstrap() function at the very bottom of the file. You also have to inject them as private variables in the constructor() of your MyApp component.

There is no longer anything like a $scope or $rootScope where you can store app-wide variables. Instead, you would create a provider (eg UserData ) that you would use to store data that needs to be persisted across pages or sessions.

I recommend reading through the Ionic 2 Conference Application , which has been developed as a sample app using the Ionic 2 framework by its developers. It shows you how to handle things like user login, and persisting data across the app.

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