app.ts

import 'es6-shim';
import {App, IonicApp, Platform, Menu} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {ViewChild} from 'angular2/core';
import {GettingStartedPage} from './pages/getting-started/getting-started';
import {ListPage} from './pages/list/list';


@App({
  template: `
    <ion-menu [content]="content" #myMenu>

      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>

      <ion-content>
        <ion-list>
          <button menuClose ion-item *ngFor="#p of pages" (click)="openPage(p)">
            {{p.title}}
          </button>
        </ion-list>
      </ion-content>

    </ion-menu>

    <ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {

  @ViewChild('myMenu') menu: Menu
  rootPage: any = GettingStartedPage;
  pages: Array<{ title: string, component: any }>
  constructor(private app: IonicApp, private platform: Platform) {
    this.initializeApp();
    this.pages = [
      { title: 'Getting Started', component: GettingStartedPage },
      { title: 'List', component: ListPage }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
      this.menu.enable(false)
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
}