Перенос JavaScript \ Ionic \ Угловое 1 приложение в Typcript \ Ionic 2 \ Angular 2 App

Question

Я работаю над переносом приложения из JavaScript \ Ionic \ Angular1 в Typcript \ Ionic2 \ Angular2 по одному файлу за раз. Я выложил несколько десятков практических советов и таких вопросов о переходе от одного к другому, сделал быстрый запуск и урок Angular 2 и увидел, как перейти от .js к .ts, а также установить все пакеты npm I необходимость. Предполагая, что у меня есть все необходимое для начала процесса миграции, мне действительно нужна помощь, которая действительно начинается. У меня есть десятки файлов для конвертирования, и это очень помогло бы мне просто получить один файл, преобразованный правильно, когда старый код закомментирован, чтобы использовать его в качестве ссылки для преобразования других.

Образец файла. Если бы вы могли преобразовать это для меня или пройти меня через его преобразование, я был бы очень благодарен.

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 для создания нового приложения.

Вы определяете свои услуги в отдельном файле в подпапке своей папки 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'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]);