JavaScript \ Ionic \ Angular 1 App을 Typescript로 마이그레이션 \ Ionic 2 \ Angular 2 App

Question

JavaScript \ Ionic \ Angular1에서 Typescript \ Ionic2 \ Angular2로 한 번에 하나씩 파일을 마이그레이션하는 중입니다. 나는 수십개의 how-to와 같은 것들을 하나에서 다른 것으로 옮기고, 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 프레임 워크를 사용하여 샘플 앱으로 개발 한 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]);