개발 환경

목표

절차①: Tabs 만들기

^CUserNames-Mac-Pro:sample UserName$ ionic g tabs
? What should the name be? customTabs
? How many tabs? 5
? Name of this tab: tabA
? Name of this tab: tabB
? Name of this tab: tabC
? Name of this tab: tabD
? Name of this tab: tabE
[OK] Generated a tabs page named customTabs!

절차②: Tabs의 Component 설정

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//2. Importing the CustomTabsPage
import { CustomTabsPage } from '../pages/custom-tabs/custom-tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  //3. Setting the rootPage to CustomTabsPage
  rootPage:any = CustomTabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

절차③: Tabs를 Module에 추가

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//Added Provider
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { CustomTabsPage } from '../pages/custom-tabs/custom-tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    CustomTabsPage // 1. Add CustomTabsPage here
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    CustomTabsPage // 2. Add CustomTabsPage here 
  ],
  providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

참고 URL