Geek Answers Handbook

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

I am working on porting an application from JavaScript \ Ionic \ Angular1 to Typescript \ Ionic2 \ Angular2 one file at a time. I laid out several dozens of practical and other ways to switch from one to another, made a quick start and an Angular 2 tutorial, and saw how to switch from .js to .ts, as well as installing all of npm, I need packages. Assuming that I have everything I need to start the migration process, I really need help that really begins. I have dozens of files to convert, and it would help me a lot just to get one file converted correctly when the old code is commented out, to use it as a link to convert others.

Here is an example file. If you could convert it for me or go through my conversion, I would be very grateful.

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.

+4
source share
1 answer

The code below is not complete, but gives you an idea of ​​the direction in which you should move. This is a modified version of the template code created for you whenever you use ionic-clito create a new application.

app/ services. , AService app/services/a-service.ts. app.ts, ionicBootstrap() . constructor() MyApp.

$scope $rootScope, app-wide. (, 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 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]);
+1

More articles:


All Articles