refactor(nav): implement nav integration with external router (angular to start)

This commit is contained in:
Dan Bucholtz
2018-02-13 00:02:48 -06:00
committed by GitHub
parent 3fa8623cfe
commit edeb1324c9
91 changed files with 2387 additions and 3894 deletions

View File

@ -14,12 +14,15 @@ const routes: Routes = [
{ path: 'content', loadChildren: 'app/content/content.module#ContentModule' },
{ path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
{ path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
{ path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
{ path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' },
{ path: 'popover', loadChildren: 'app/popover/popover.module#PopoverModule' },
{ path: 'segment', loadChildren: 'app/segment/segment.module#SegmentModule' },
{ path: 'virtual-scroll', loadChildren: 'app/virtual-scroll/virtual-scroll.module#VirtualScrollModule' },
{ path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
{ path: 'simple-nav', loadChildren: 'app/simple-nav/simple-nav.module#SimpleNavModule' },
{ path: 'nested-nav', loadChildren: 'app/nested-nav/nested-nav.module#NestedNavModule' },
{ path: 'nav-then-tabs', loadChildren: 'app/nav-then-tabs/nav-then-tabs.module#NavThenTabsModule' },
];
@NgModule({

View File

@ -51,5 +51,19 @@
<div>
<h2>Nav Tests</h2>
<a href='no-routing-nav'>No Routing</a>
<ul>
<li>
<a href='no-routing-nav'>No Routing</a>
</li>
<li>
<a href='simple-nav/page-one'>Simple Nav</a>
</li>
<li>
<a href='nested-nav/nested-page-one'>Nested Nav</a>
</li>
<li>
<a href='nav-then-tabs/login'>Nav Then Tabs</a>
</li>
</ul>
</div>

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPage } from './login';
const routes: Routes = [
{ path: '', component: LoginPage}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginPage } from './login';
import { LoginRoutingModule } from './login-routing.module';
@NgModule({
imports: [
CommonModule,
LoginRoutingModule
],
declarations: [LoginPage],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class LoginModule { }

View File

@ -0,0 +1,38 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'login',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Login Page</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Login - {{ts}}
<div>
<ion-button (click)="pushPageTwoComponent()">Login to app</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class LoginPage {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
pushPageTwoComponent() {
this.navController.push('/nav-then-tabs/app/tabs/(tab-one:one)');
}
}

View File

@ -0,0 +1,21 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NavThenTabsPageComponent } from './nav-then-tabs.component';
const routes: Routes = [
{
path: '',
component: NavThenTabsPageComponent,
children: [
{ path: 'login', loadChildren: './login/login.module#LoginModule' },
{ path: 'app', loadChildren: './tabs-page/tabs-page.module#TabsPageModule' }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class NavThenTabsRoutingModule { }

View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-nav-page',
template: `
<ion-app>
<ion-nav></ion-nav>
</ion-app>
`
})
export class NavThenTabsPageComponent {
constructor() {
}
}

View File

@ -0,0 +1,21 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { NavThenTabsPageComponent } from './nav-then-tabs.component';
import { NavThenTabsRoutingModule } from './nav-then-tabs-routing.module';
import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
@NgModule({
declarations: [
NavThenTabsPageComponent,
],
imports: [
CommonModule,
IonicAngularModule,
IonicRouterModule,
NavThenTabsRoutingModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class NavThenTabsModule {}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabOnePageOne } from './tab-one-page-one';
const routes: Routes = [
{ path: '', component: TabOnePageOne}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabOnePageOneRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabOnePageOne } from './tab-one-page-one';
import { TabOnePageOneRoutingModule } from './tab-one-page-one-routing.module';
@NgModule({
imports: [
CommonModule,
TabOnePageOneRoutingModule
],
declarations: [TabOnePageOne],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabOnePageOneModule { }

View File

@ -0,0 +1,34 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-one-page-one',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab One Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab One Page One {{ts}}
<div>
<ion-button (click)="next()">Go to Page Two</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabOnePageOne {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
next() {
this.navController.push('/nav-then-tabs/app/tabs/(tab-one:two)');
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabOnePageThree } from './tab-one-page-three';
const routes: Routes = [
{ path: '', component: TabOnePageThree}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabOnePageThreeRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabOnePageThree } from './tab-one-page-three';
import { TabOnePageThreeRoutingModule } from './tab-one-page-three-routing.module';
@NgModule({
imports: [
CommonModule,
TabOnePageThreeRoutingModule
],
declarations: [TabOnePageThree],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabOnePageThreeModule { }

View File

@ -0,0 +1,34 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-one-page-three',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab One Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab One Page Three {{ts}}
<div>
<ion-button (click)="back()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabOnePageThree {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
back() {
this.navController.pop();
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabOnePageTwo } from './tab-one-page-two';
const routes: Routes = [
{ path: '', component: TabOnePageTwo}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabOnePageTwoRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabOnePageTwo } from './tab-one-page-two';
import { TabOnePageTwoRoutingModule } from './tab-one-page-two-routing.module';
@NgModule({
imports: [
CommonModule,
TabOnePageTwoRoutingModule
],
declarations: [TabOnePageTwo],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabOnePageTwoModule { }

View File

@ -0,0 +1,41 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-one-page-two',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab One Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab One Page Two {{ts}}
<div>
<ion-button (click)="next()">Go to Page Three</ion-button>
</div>
<div>
<ion-button (click)="back()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabOnePageTwo {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
next() {
this.navController.push('/nav-then-tabs/app/tabs/(tab-one:three)');
}
back() {
this.navController.pop();
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabThreePageOne } from './tab-three-page-one';
const routes: Routes = [
{ path: '', component: TabThreePageOne}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabThreePageOneRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabThreePageOne } from './tab-three-page-one';
import { TabThreePageOneRoutingModule } from './tab-three-page-one-routing.module';
@NgModule({
imports: [
CommonModule,
TabThreePageOneRoutingModule
],
declarations: [TabThreePageOne],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabThreePageOneModule { }

View File

@ -0,0 +1,34 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-three-page-one',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab Three Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab Three Page One {{ts}}
<div>
<ion-button (click)="next()">Go to Page Two</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabThreePageOne {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
next() {
this.navController.push('/nav-then-tabs/app/tabs/(tab-three:two)');
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabThreePageThree } from './tab-three-page-three';
const routes: Routes = [
{ path: '', component: TabThreePageThree}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabThreePageThreeRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabThreePageThree } from './tab-three-page-three';
import { TabThreePageThreeRoutingModule } from './tab-three-page-three-routing.module';
@NgModule({
imports: [
CommonModule,
TabThreePageThreeRoutingModule
],
declarations: [TabThreePageThree],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabThreePageThreeModule { }

View File

@ -0,0 +1,34 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-three-page-three',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab Three Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab Three Page Three {{ts}}
<div>
<ion-button (click)="back()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabThreePageThree {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
back() {
this.navController.pop();
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabThreePageTwo } from './tab-three-page-two';
const routes: Routes = [
{ path: '', component: TabThreePageTwo}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabThreePageTwoRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabThreePageTwo } from './tab-three-page-two';
import { TabThreePageTwoRoutingModule } from './tab-three-page-two-routing.module';
@NgModule({
imports: [
CommonModule,
TabThreePageTwoRoutingModule
],
declarations: [TabThreePageTwo],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabThreePageTwoModule { }

View File

@ -0,0 +1,41 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-three-page-two',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab Three Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab Three Page Two {{ts}}
<div>
<ion-button (click)="next()">Go to Page Three</ion-button>
</div>
<div>
<ion-button (click)="back()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabThreePageTwo {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
next() {
this.navController.push('/nav-then-tabs/app/tabs/(tab-three:three)');
}
back() {
this.navController.pop();
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabTwoPageOne } from './tab-two-page-one';
const routes: Routes = [
{ path: '', component: TabTwoPageOne}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabTwoPageOneRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabTwoPageOne } from './tab-two-page-one';
import { TabTwoPageOneRoutingModule } from './tab-two-page-one-routing.module';
@NgModule({
imports: [
CommonModule,
TabTwoPageOneRoutingModule
],
declarations: [TabTwoPageOne],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabTwoPageOneModule { }

View File

@ -0,0 +1,34 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-two-page-one',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab Two Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab Two Page One {{ts}}
<div>
<ion-button (click)="next()">Go to Page Two</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabTwoPageOne {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
next() {
this.navController.push('/nav-then-tabs/app/tabs/(tab-two:two)');
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabTwoPageThree } from './tab-two-page-three';
const routes: Routes = [
{ path: '', component: TabTwoPageThree}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabTwoPageThreeRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabTwoPageThree } from './tab-two-page-three';
import { TabTwoPageThreeRoutingModule } from './tab-two-page-three-routing.module';
@NgModule({
imports: [
CommonModule,
TabTwoPageThreeRoutingModule
],
declarations: [TabTwoPageThree],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabTwoPageThreeModule { }

View File

@ -0,0 +1,34 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-two-page-three',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab Two Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab Two Page Three {{ts}}
<div>
<ion-button (click)="back()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabTwoPageThree {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
back() {
this.navController.pop();
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabTwoPageTwo } from './tab-two-page-two';
const routes: Routes = [
{ path: '', component: TabTwoPageTwo}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabTwoPageTwoRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabTwoPageTwo } from './tab-two-page-two';
import { TabTwoPageTwoRoutingModule } from './tab-two-page-two-routing.module';
@NgModule({
imports: [
CommonModule,
TabTwoPageTwoRoutingModule
],
declarations: [TabTwoPageTwo],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabTwoPageTwoModule { }

View File

@ -0,0 +1,41 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tab-two-page-two',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab Two Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab Two Page Two {{ts}}
<div>
<ion-button (click)="next()">Go to Page Three</ion-button>
</div>
<div>
<ion-button (click)="back()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class TabTwoPageTwo {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
next() {
this.navController.push('/nav-then-tabs/app/tabs/(tab-two:three)');
}
back() {
this.navController.pop();
}
}

View File

@ -0,0 +1,76 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from './tabs-page';
import { TabOnePageOne } from '../tab-one-page-one/tab-one-page-one';
import { TabOnePageTwo } from '../tab-one-page-two/tab-one-page-two';
import { TabOnePageThree } from '../tab-one-page-three/tab-one-page-three';
import { TabTwoPageOne } from '../tab-two-page-one/tab-two-page-one';
import { TabTwoPageTwo } from '../tab-two-page-two/tab-two-page-two';
import { TabTwoPageThree } from '../tab-two-page-three/tab-two-page-three';
import { TabThreePageOne } from '../tab-three-page-one/tab-three-page-one';
import { TabThreePageTwo } from '../tab-three-page-two/tab-three-page-two';
import { TabThreePageThree } from '../tab-three-page-three/tab-three-page-three';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'one',
component: TabOnePageOne,
outlet: 'tab-one'
},
{
path: 'two',
component: TabOnePageTwo,
outlet: 'tab-one'
},
{
path: 'three',
component: TabOnePageThree,
outlet: 'tab-one'
},
{
path: 'one',
component: TabTwoPageOne,
outlet: 'tab-two'
},
{
path: 'two',
component: TabTwoPageTwo,
outlet: 'tab-two'
},
{
path: 'three',
component: TabTwoPageThree,
outlet: 'tab-two'
},
{
path: 'one',
component: TabThreePageOne,
outlet: 'tab-three'
},
{
path: 'two',
component: TabThreePageTwo,
outlet: 'tab-three'
},
{
path: 'three',
component: TabThreePageThree,
outlet: 'tab-three'
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }

View File

@ -0,0 +1,52 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
IonicAngularModule,
IonicRouterModule
} from '@ionic/angular';
import { TabsPage } from './tabs-page';
import { TabsPageRoutingModule } from './tabs-page-routing.module';
import { TabOnePageOneModule } from '../tab-one-page-one/tab-one-page-one.module';
import { TabOnePageTwoModule } from '../tab-one-page-two/tab-one-page-two.module';
import { TabOnePageThreeModule } from '../tab-one-page-three/tab-one-page-three.module';
import { TabTwoPageOneModule } from '../tab-two-page-one/tab-two-page-one.module';
import { TabTwoPageTwoModule } from '../tab-two-page-two/tab-two-page-two.module';
import { TabTwoPageThreeModule } from '../tab-two-page-three/tab-two-page-three.module';
import { TabThreePageOneModule } from '../tab-three-page-one/tab-three-page-one.module';
import { TabThreePageTwoModule } from '../tab-three-page-two/tab-three-page-two.module';
import { TabThreePageThreeModule } from '../tab-three-page-three/tab-three-page-three.module';
@NgModule({
imports: [
CommonModule,
TabsPageRoutingModule,
IonicAngularModule,
IonicRouterModule,
TabOnePageOneModule,
TabOnePageTwoModule,
TabOnePageThreeModule,
TabTwoPageOneModule,
TabTwoPageTwoModule,
TabTwoPageThreeModule,
TabThreePageOneModule,
TabThreePageTwoModule,
TabThreePageThreeModule
],
declarations: [
TabsPage,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class TabsPageModule { }

View File

@ -0,0 +1,38 @@
import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';
@Component({
selector: 'tabs-page',
template: `
<ion-tabs>
<ion-tab title="Tab One" icon="star" #tabOne>
<ion-nav [root]="tabOnePageOne" name="tab-one" lazy="true"></ion-nav>
</ion-tab>
<ion-tab title="Tab Two" icon="globe" #tabTwo>
<ion-nav [root]="tabTwoPageOne" name="tab-two" lazy="true"></ion-nav>
</ion-tab>
<ion-tab title="Tab Three" icon="logo-facebook" #tabThree>
<ion-nav [root]="tabThreePageOne" name="tab-three" lazy="true"></ion-nav>
</ion-tab>
</ion-tabs>
`
})
export class TabsPage {
tabOnePageOne = '/nav-then-tabs/app/tabs/(tab-one:one)';
tabTwoPageOne = '/nav-then-tabs/app/tabs/(tab-two:one)';
tabThreePageOne = '/nav-then-tabs/app/tabs/(tab-three:one)';
@ViewChild('tabOne') tabOne: ElementRef;
@ViewChild('tabTwo') tabTwo: ElementRef;
@ViewChild('tabThree') tabThree: ElementRef;
constructor(private router: Router, private location: Location) {
}
goBack() {
window.history.back();
}
}

View File

@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NestedNavPageComponent } from './nested-nav.component';
const routes: Routes = [
{
path: '',
component: NestedNavPageComponent,
children: [
{ path: 'nested-page-one', loadChildren: './nested-page-one/page-one.module#PageOneModule' },
{ path: 'nested-page-two', loadChildren: './nested-page-two/page-two.module#PageTwoModule' },
{ path: 'nested-page-three', loadChildren: './nested-page-three/page-three.module#PageThreeModule' }
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class NestedNavRoutingModule { }

View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-nav-page',
template: `
<ion-app>
<ion-nav></ion-nav>
</ion-app>
`
})
export class NestedNavPageComponent {
constructor() {
}
}

View File

@ -0,0 +1,21 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { NestedNavPageComponent } from './nested-nav.component';
import { NestedNavRoutingModule } from './nested-nav-routing.module';
import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
@NgModule({
declarations: [
NestedNavPageComponent,
],
imports: [
CommonModule,
IonicAngularModule,
IonicRouterModule,
NestedNavRoutingModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class NestedNavModule {}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageOne } from './page-one';
const routes: Routes = [
{ path: '', component: PageOne}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageOneRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageOne } from './page-one';
import { PageOneRoutingModule } from './page-one-routing.module';
@NgModule({
imports: [
CommonModule,
PageOneRoutingModule
],
declarations: [PageOne],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule { }

View File

@ -0,0 +1,36 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';
@Component({
selector: 'page-one',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Nested Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Page One - {{ts}}
<div>
<ion-button (click)="pushPageTwoComponent()">Go to Page Two</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class PageOne {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
pushPageTwoComponent() {
this.navController.push('/nested-nav/nested-page-two/section-one');
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageThree } from './page-three';
const routes: Routes = [
{ path: '', component: PageThree }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageThreeRoutingModule { }

View File

@ -0,0 +1,19 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageThree } from './page-three';
import { PageThreeRoutingModule } from './page-three-routing.module';
@NgModule({
imports: [
CommonModule,
PageThreeRoutingModule
],
declarations: [
PageThree
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageThreeModule { }

View File

@ -0,0 +1,39 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';
@Component({
selector: 'page-three',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Page Three {{ts}}
<div>
<ion-button (click)="navPop()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class PageThree {
ts: number;
constructor(private router: Router, private location: Location) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
navPop() {
window.history.back();
}
}

View File

@ -0,0 +1,29 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageTwo } from './page-two';
import { PageTwoSectionOne } from './page-two-section-one';
import { PageTwoSectionTwo } from './page-two-section-two';
const routes: Routes = [
{
path: '',
component: PageTwo,
children: [
{
path: 'section-one',
component: PageTwoSectionOne,
},
{
path: 'section-two',
component: PageTwoSectionTwo,
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageTwoRoutingModule { }

View File

@ -0,0 +1,43 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';
@Component({
selector: 'page-two-section-one',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Two Section One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Page Two Section One - TS {{ts}}
<div>
<ion-button (click)="pushPageTwoComponent()">Go to Section Two</ion-button>
</div>
<div>
<ion-button (click)="goBack()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class PageTwoSectionOne {
ts: number;
constructor(private router: Router) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
pushPageTwoComponent() {
this.router.navigateByUrl('/nested-nav/nested-page-two/section-two');
}
goBack() {
this.router.navigateByUrl('/nested-nav/nested-page-one');
}
}

View File

@ -0,0 +1,42 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';
@Component({
selector: 'page-two-section-two',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Two Section Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Page Two Section Two {{ts}}
<div>
<ion-button (click)="pushPageTwoComponent()">Go to Page Three</ion-button>
</div>
<div>
<ion-button (click)="goBack()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class PageTwoSectionTwo {
ts: number;
constructor(private router: Router) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
pushPageTwoComponent() {
this.router.navigateByUrl('/nested-nav/nested-page-three');
}
goBack() {
this.router.navigateByUrl('/nested-nav/nested-page-two/section-one');
}
}

View File

@ -0,0 +1,32 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
IonicAngularModule,
IonicRouterModule
} from '@ionic/angular';
import { PageTwo } from './page-two';
import { PageTwoSectionOne } from './page-two-section-one';
import { PageTwoSectionTwo } from './page-two-section-two';
import { PageTwoRoutingModule } from './page-two-routing.module';
@NgModule({
imports: [
CommonModule,
PageTwoRoutingModule,
IonicAngularModule,
IonicRouterModule
],
declarations: [
PageTwo,
PageTwoSectionOne,
PageTwoSectionTwo
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageTwoModule { }

View File

@ -0,0 +1,24 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'page-two',
template: `
<ion-nav></ion-nav>
<!-- <router-outlet></router-outlet> -->
`
})
export class PageTwo {
constructor(private navController: NavController) {
}
pushPageThree() {
this.navController.push('/nested-nav/nested-page-three');
}
goBack() {
window.history.back();
}
}

View File

@ -6,6 +6,9 @@ import { Component } from '@angular/core';
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>

View File

@ -8,6 +8,9 @@ import { PageThree } from './page-three';
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageOne } from './page-one';
const routes: Routes = [
{ path: '', component: PageOne}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageOneRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageOne } from './page-one';
import { PageOneRoutingModule } from './page-one-routing.module';
@NgModule({
imports: [
CommonModule,
PageOneRoutingModule
],
declarations: [PageOne],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageOneModule { }

View File

@ -0,0 +1,40 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
import { PageTwo } from '../page-two/page-two';
@Component({
selector: 'page-one',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Simple Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Page One - {{ts}}
<div>
<ion-button (click)="pushPageTwoComponent()">Go to Page Two</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class PageOne {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
pushPageTwoComponent() {
this.navController.push('/simple-nav/page-two');
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageThree } from './page-three';
const routes: Routes = [
{ path: '', component: PageThree }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageThreeRoutingModule { }

View File

@ -0,0 +1,19 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageThree } from './page-three';
import { PageThreeRoutingModule } from './page-three-routing.module';
@NgModule({
imports: [
CommonModule,
PageThreeRoutingModule
],
declarations: [
PageThree
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageThreeModule { }

View File

@ -0,0 +1,37 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'page-three',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Page Three {{ts}}
<div>
<ion-button (click)="navPop()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class PageThree {
ts: number;
constructor(private navController: NavController) {
setInterval(() => {
this.ts = Date.now();
}, 500);
}
navPop() {
this.navController.pop();
}
}

View File

@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageTwo } from './page-two';
const routes: Routes = [
{
path: '',
component: PageTwo,
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageTwoRoutingModule { }

View File

@ -0,0 +1,27 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
IonicAngularModule,
IonicRouterModule
} from '@ionic/angular';
import { PageTwo } from './page-two';
import { PageTwoRoutingModule } from './page-two-routing.module';
@NgModule({
imports: [
CommonModule,
PageTwoRoutingModule,
IonicAngularModule,
IonicRouterModule
],
declarations: [
PageTwo,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageTwoModule { }

View File

@ -0,0 +1,39 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { Location } from '@angular/common';
import { NavController } from '@ionic/angular';
@Component({
selector: 'page-two',
template: `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Page Two - {{ts}}
<div>
<ion-button (click)="pushPageThreeComponent()">Go to Page Three</ion-button>
</div>
<div>
<ion-button (click)="goBack()">Go Back</ion-button>
</div>
</ion-content>
</ion-page>
`
})
export class PageTwo {
constructor(private navController: NavController) {
}
pushPageThreeComponent() {
this.navController.push('/simple-nav/page-three');
}
goBack() {
this.navController.pop();
}
}

View File

@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SimpleNavPageComponent } from './simple-nav.component';
const routes: Routes = [
{
path: '',
component: SimpleNavPageComponent,
children: [
{ path: 'page-one', loadChildren: './page-one/page-one.module#PageOneModule' },
{ path: 'page-two', loadChildren: './page-two/page-two.module#PageTwoModule' },
{ path: 'page-three', loadChildren: './page-three/page-three.module#PageThreeModule' }
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SimpleNavRoutingModule { }

View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-nav-page',
template: `
<ion-app>
<ion-nav></ion-nav>
</ion-app>
`
})
export class SimpleNavPageComponent {
constructor() {
}
}

View File

@ -0,0 +1,21 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { SimpleNavPageComponent } from './simple-nav.component';
import { SimpleNavRoutingModule } from './simple-nav-routing.module';
import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
@NgModule({
declarations: [
SimpleNavPageComponent,
],
imports: [
CommonModule,
IonicAngularModule,
IonicRouterModule,
SimpleNavRoutingModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SimpleNavModule {}