[ionic2] 앱페이지 추가하기

src>app>app.compoment.ts

 

import { Component, ViewChild } from '@angular/core';

import { Nav, Platform } from 'ionic-angular';

import { StatusBar, Splashscreen } from 'ionic-native';

 

import { Page1 } from '../pages/page1/page1';

import { Page2 } from '../pages/page2/page2';

import { Search } from '../pages/search/search';

import { PlayList } from '../pages/playList/playList';

 

 

@Component({

  templateUrl: 'app.html'

})

export class MyApp {

  @ViewChild(Nav) nav: Nav;

 

  rootPage: any = Search;

 

  pages: Array<{title: string, component: any}>;

 

  constructor(public platform: Platform) {

    this.initializeApp();

 

    // used for an example of ngFor and navigation

    this.pages = [

      { title: 'Page One', component: Page1 },

      { title: 'Page Two', component: Page2 },

      { title: 'Search', component: Search },

      { title: 'PlayList', component: PlayList },

    ];

 

  }

 

  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.

      StatusBar.styleDefault();

      Splashscreen.hide();

    });

  }

 

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

  }

}

 

src>app>app.module.ts

 

import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { Page1 } from '../pages/page1/page1';

import { Page2 } from '../pages/page2/page2';

import { Search } from '../pages/search/search';

import { PlayList } from '../pages/playList/playList';

 

import { IonicAudioModule } from 'ionic-audio/dist';

 

@NgModule({

  declarations: [

    MyApp,

    Page1,

    Page2,

    Search,

    PlayList,

  ],

  imports: [

    IonicModule.forRoot(MyApp),

    IonicAudioModule.forRoot()

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    Page1,

    Page2,

    Search,

    PlayList,

  ],

  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }],

  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

})

export class AppModule { }

 

src>pages> page1 폴더를 복사 후 search로 이름을 변경하고 search 폴더의  page1 를 search 로 변경한다.

 

page1.html, page1.scss, page1.ts -> search.html, search.scss, search.ts

 

src>pages>search.ts

 

import { Injectable, Component } from '@angular/core';

import { Http, Response } from '@angular/http';

import { NavController, Platform } from 'ionic-angular';

 

@Injectable()

@Component({

  selector: 'search-search',

  templateUrl: 'search.html'

})

 

export class Search

{

…

}