JavaScript \ Ionic \ Angular 1 AppをTypescriptに移行する\ Ionic 2 \ Angular 2 App

Question

JavaScript/Ionic \ Angular1からTypescript \ Ionic2 \ Angular2に一度に1ファイルずつ移行する作業を進めています。私は数十種類のハウツーなどを紹介し、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を使用して新しいアプリを生成するたびに作成されるボイラープレートコードの修正版です。

という名前のapp/フォルダのサブフォルダ内の別のファイルにサービスをそれぞれ定義します。たとえば、AServiceはapp/services/a-service.tsに定義されます。 app.tsファイルの上部にあるアプリケーションレベルのサービスをインポートして、ファイルの最後の部分にあるionicBootstrap()関数の2番目のコンポーネントとして配列に含めます。また、MyAppコンポーネントのconstructor()にプライベート変数として注入する必要があります。

$scopeまたは$rootScopeのようなアプリケーション全体の変数を保存することはできません。代わりに、ページまたはセッション全体で永続化する必要のあるデータを格納するために使用するプロバイダ（たとえば、UserData）を作成します。

これは、開発者がIonic 2フレームワークを使用してサンプルアプリケーションとして開発したIonic 2 Conference Applicationで読むことをお勧めします。ユーザーログインやアプリ内のデータの永続化などを処理する方法を示します。

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