import {ViewChild} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {Location} from 'angular2/platform/common';
import {App, Page, NavController, NavParams, Modal, ViewController, Tabs} from '../../../../../ionic';
@Page({
template: `
Sign In
Username:
Password:
`
})
class SignIn {
constructor(private nav: NavController) {}
push() {
this.nav.push(TabsPage, {
userId: 8675309
});
}
}
@Page({
template: `
Chat Modal
`
})
class ChatPage {
constructor(private viewCtrl: ViewController) {}
onPageDidLoad() {
console.log('ChatPage, onPageDidLoad');
}
onPageDidUnload() {
console.log('ChatPage, onPageDidUnload');
}
}
@Page({
templateUrl: './tabs.html'
})
class TabsPage {
tab1Root = Tab1Page1;
tab2Root = Tab2Page1;
tab3Root = Tab3Page1;
@ViewChild(Tabs) tabs: Tabs;
constructor(private nav: NavController, private params: NavParams) {}
ngAfterViewInit() {
this.tabs.change.subscribe(tab => {
console.log('tabs.change.subscribe', tab.index);
});
}
onTabChange() {
// wired up through the template
//
console.log('onTabChange');
}
chat() {
console.log('Chat clicked!');
let modal = Modal.create(ChatPage);
this.nav.present(modal);
}
onPageWillEnter() {
console.log('TabsPage, onPageWillEnter');
}
onPageDidEnter() {
console.log('TabsPage, onPageDidEnter');
}
onPageWillLeave() {
console.log('TabsPage, onPageWillLeave');
}
onPageDidLeave() {
console.log('TabsPage, onPageDidLeave');
}
onPageDidUnload() {
console.log('TabsPage, onPageDidUnload');
}
}
//
// tab 1
//
@Page({
template: '' +
'' +
'Tabs 1 Page 1' +
'' +
'' +
'' +
'' +
'' +
'' +
'UserId: {{userId}}
' +
'' +
'' +
''
})
class Tab1Page1 {
userId: string;
constructor(private nav: NavController, private tabs: Tabs, private params: NavParams) {
this.userId = params.get('userId');
}
push() {
this.nav.push(Tab1Page2)
}
goBack() {
console.log('go back begin');
this.nav.pop().then((val) => {
console.log('go back completed', val);
});;
}
favoritesTab() {
this.tabs.select(1);
}
logout() {
this.nav.rootNav.setRoot(SignIn, null, { animate: true, direction: 'back' });
}
onPageWillEnter() {
console.log('Tab1Page1, onPageWillEnter');
}
onPageDidEnter() {
console.log('Tab1Page1, onPageDidEnter');
}
onPageWillLeave() {
console.log('Tab1Page1, onPageWillLeave');
}
onPageDidLeave() {
console.log('Tab1Page1, onPageDidLeave');
}
onPageDidUnload() {
console.log('Tab1Page1, onPageDidUnload');
}
}
@Page({
template: '' +
'' +
'Tabs 1 Page 2' +
'' +
'' +
'' +
'' +
'' +
'' +
''
})
class Tab1Page2 {
constructor(private nav: NavController) {}
push() {
this.nav.push(Tab1Page3)
}
onPageWillEnter() {
console.log('Tab1Page2, onPageWillEnter');
}
onPageDidEnter() {
console.log('Tab1Page2, onPageDidEnter');
}
onPageWillLeave() {
console.log('Tab1Page2, onPageWillLeave');
}
onPageDidLeave() {
console.log('Tab1Page2, onPageDidLeave');
}
onPageDidUnload() {
console.log('Tab1Page2, onPageDidUnload');
}
}
@Page({
template: '' +
'' +
'Tabs 1 Page 3' +
'' +
'' +
'' +
'' +
'' +
''
})
class Tab1Page3 {
constructor(private nav: NavController) {}
onPageWillEnter() {
console.log('Tab1Page3, onPageWillEnter');
}
onPageDidEnter() {
console.log('Tab1Page3, onPageDidEnter');
}
onPageWillLeave() {
console.log('Tab1Page3, onPageWillLeave');
}
onPageDidLeave() {
console.log('Tab1Page3, onPageDidLeave');
}
onPageDidUnload() {
console.log('Tab1Page3, onPageDidUnload');
}
}
//
// tab 2
//
@Page({
template: '' +
'' +
'Tabs 2 Page 1' +
'' +
'' +
'' +
'' +
'' +
''
})
class Tab2Page1 {
constructor(private nav: NavController) {}
push() {
this.nav.push(Tab2Page2)
}
onPageWillEnter() {
console.log('Tab2Page1, onPageWillEnter');
}
onPageDidEnter() {
console.log('Tab2Page1, onPageDidEnter');
}
onPageWillLeave() {
console.log('Tab2Page1, onPageWillLeave');
}
onPageDidLeave() {
console.log('Tab2Page1, onPageDidLeave');
}
onPageDidUnload() {
console.log('Tab2Page1, onPageDidUnload');
}
}
@Page({
template: '' +
'' +
'Tabs 2 Page 2' +
'' +
'' +
'' +
'' +
'' +
'' +
''
})
class Tab2Page2 {
constructor(private nav: NavController) {}
push() {
this.nav.push(Tab2Page3)
}
onPageWillEnter() {
console.log('Tab2Page2, onPageWillEnter');
}
onPageDidEnter() {
console.log('Tab2Page2, onPageDidEnter');
}
onPageWillLeave() {
console.log('Tab2Page2, onPageWillLeave');
}
onPageDidLeave() {
console.log('Tab2Page2, onPageDidLeave');
}
onPageDidUnload() {
console.log('Tab2Page2, onPageDidUnload');
}
}
@Page({
template: '' +
'' +
'Tabs 2 Page 3' +
'' +
'' +
'' +
'' +
'' +
''
})
class Tab2Page3 {
constructor(private nav: NavController) {}
onPageWillEnter() {
console.log('Tab2Page3, onPageWillEnter');
}
onPageDidEnter() {
console.log('Tab2Page3, onPageDidEnter');
}
onPageWillLeave() {
console.log('Tab2Page3, onPageWillLeave');
}
onPageDidLeave() {
console.log('Tab2Page3, onPageDidLeave');
}
onPageDidUnload() {
console.log('Tab2Page3, onPageDidUnload');
}
}
//
// tab 3
//
@Page({
template: '' +
'' +
'Tabs 3' +
'' +
'Tabs 3
'
})
class Tab3Page1 {
onPageWillEnter() {
console.log('Tab3Page1, onPageWillEnter');
}
onPageDidEnter() {
console.log('Tab3Page1, onPageDidEnter');
}
onPageWillLeave() {
console.log('Tab3Page1, onPageWillLeave');
}
onPageDidLeave() {
console.log('Tab3Page1, onPageDidLeave');
}
onPageDidUnload() {
console.log('Tab3Page1, onPageDidUnload');
}
}
@App()
@RouteConfig([
{ path: '/', component: SignIn, as: 'Signin' },
{ path: '/tabs', component: TabsPage, as: 'Tabs' },
])
class E2EApp {}