import {Component} from 'angular2/angular2'; import {IonicView, NavController} from 'ionic/ionic'; @Component({selector: 'ion-view'}) @IonicView({ template: '' + '' + 'Sign In' + '' + '' + '

' + '' + '' + '
' }) class SignIn { constructor(nav: NavController) { this.nav = nav; } push() { this.nav.push(TabsPage); } } @Component({ selector: 'ion-tabs-view' }) @IonicView({ templateUrl: './tabs.html' }) class TabsPage { constructor(nav: NavController) { this.tab1Root = Tab1Page1 this.tab2Root = Tab2Page1 } } // // tab 1 // @Component({selector: 'ion-view'}) @IonicView({ template: '' + '' + 'Tabs 1 Page 1' + '' + '' + '

' + '' + '' + '
' }) class Tab1Page1 { constructor(nav: NavController) { this.nav = nav; } push() { this.nav.push(Tab1Page2) } } @Component({selector: 'ion-view'}) @IonicView({ template: '' + '' + 'Tabs 1 Page 2' + '' + '' + '

' + '

' + '' + '' + '
' }) class Tab1Page2 { constructor(nav: NavController) { this.nav = nav; } push() { this.nav.push(Tab1Page3) } } @Component({selector: 'ion-view'}) @IonicView({ template: '' + '' + 'Tabs 1 Page 3' + '' + '' + '

' + '' + '' + '
' }) class Tab1Page3 { constructor(nav: NavController) { this.nav = nav; } } // // tab 2 // @Component({selector: 'ion-view'}) @IonicView({ template: '' + '' + 'Tabs 2 Page 1' + '' + '' + '

' + '' + '' + '
' }) class Tab2Page1 { constructor(nav: NavController) { this.nav = nav; } push() { this.nav.push(Tab2Page2) } } @Component({selector: 'ion-view'}) @IonicView({ template: '' + '' + 'Tabs 2 Page 2' + '' + '' + '

' + '

' + '' + '' + '
' }) class Tab2Page2 { constructor(nav: NavController) { this.nav = nav; } push() { this.nav.push(Tab2Page3) } } @Component({selector: 'ion-view'}) @IonicView({ template: '' + '' + 'Tabs 2 Page 3' + '' + '' + '

' + '' + '' + '
' }) class Tab2Page3 { constructor(nav: NavController) { this.nav = nav; } } @Component({ selector: 'ion-app' }) @IonicView({ template: '' }) class IonicApp { constructor() { this.rootView = SignIn; } } export function main(ionicBootstrap) { ionicBootstrap(IonicApp); }