mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
test(ngmodule): update to ngmodule
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
import { Component, Injectable } from '@angular/core';
|
||||
import { Component, Injectable, NgModule } from '@angular/core';
|
||||
|
||||
import { ActionSheetController, App, Config, ionicBootstrap, ModalController, NavController, NavParams, PageTransition, Platform, TransitionOptions, ViewController } from '../../../../../src';
|
||||
import { ActionSheetController, App, Config,
|
||||
IonicApp, IonicModule, ModalController, NavController,
|
||||
NavParams, Platform, ViewController } from '../../../..';
|
||||
|
||||
|
||||
@Injectable()
|
||||
class SomeComponentProvider {
|
||||
export class SomeComponentProvider {
|
||||
constructor(public config: Config) {
|
||||
console.log('SomeComponentProvider constructor');
|
||||
}
|
||||
@@ -15,7 +17,7 @@ class SomeComponentProvider {
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
class SomeAppProvider {
|
||||
export class SomeAppProvider {
|
||||
constructor(public config: Config) {
|
||||
console.log('SomeAppProvider constructor');
|
||||
}
|
||||
@@ -29,7 +31,7 @@ class SomeAppProvider {
|
||||
@Component({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EPage {
|
||||
export class E2EPage {
|
||||
platforms: string[];
|
||||
|
||||
constructor(public navCtrl: NavController, public modalCtrl: ModalController, config: Config, platform: Platform) {
|
||||
@@ -77,10 +79,6 @@ class E2EPage {
|
||||
presentToolbarModal() {
|
||||
let modal = this.modalCtrl.create(ToolbarModal);
|
||||
modal.present();
|
||||
|
||||
modal.subscribe((data: any) => {
|
||||
console.log('modal data', data);
|
||||
});
|
||||
}
|
||||
|
||||
presentModalWithInputs() {
|
||||
@@ -91,19 +89,12 @@ class E2EPage {
|
||||
modal.present();
|
||||
}
|
||||
|
||||
presentModalCustomAnimation() {
|
||||
let modal = this.modalCtrl.create(ContactUs);
|
||||
modal.present({
|
||||
animation: 'my-fade-in'
|
||||
});
|
||||
}
|
||||
|
||||
presentNavigableModal() {
|
||||
this.modalCtrl.create(NavigableModal).present();
|
||||
}
|
||||
|
||||
ionViewLoaded() {
|
||||
console.log('E2EPage ionViewLoaded fired');
|
||||
ionViewDidLoad() {
|
||||
console.log('E2EPage ionViewDidLoad fired');
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
@@ -127,22 +118,32 @@ class E2EPage {
|
||||
template: `
|
||||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-buttons>
|
||||
<button ion-button (click)="dismiss()">Close</button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page One</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div padding>
|
||||
NavigableModal
|
||||
</div>
|
||||
<button ion-button full (click)="submit()">Submit</button>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
class NavigableModal {
|
||||
export class NavigableModal {
|
||||
|
||||
constructor(public navCtrl: NavController) {}
|
||||
constructor(public navCtrl: NavController, public viewCtrl: ViewController) {}
|
||||
|
||||
submit() {
|
||||
this.navCtrl.push(NavigableModal2);
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
this.viewCtrl.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
@@ -158,7 +159,7 @@ class NavigableModal {
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
class NavigableModal2 {
|
||||
export class NavigableModal2 {
|
||||
|
||||
constructor(public navCtrl: NavController) {}
|
||||
|
||||
@@ -192,7 +193,7 @@ class NavigableModal2 {
|
||||
`,
|
||||
providers: [SomeComponentProvider]
|
||||
})
|
||||
class ModalPassData {
|
||||
export class ModalPassData {
|
||||
data: any;
|
||||
|
||||
constructor(params: NavParams, public viewCtrl: ViewController, someComponentProvider: SomeComponentProvider, someAppProvider: SomeAppProvider) {
|
||||
@@ -208,8 +209,8 @@ class ModalPassData {
|
||||
this.viewCtrl.dismiss(this.data);
|
||||
}
|
||||
|
||||
ionViewLoaded() {
|
||||
console.log('ModalPassData ionViewLoaded fired');
|
||||
ionViewDidLoad() {
|
||||
console.log('ModalPassData ionViewDidLoad fired');
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
@@ -257,20 +258,17 @@ class ModalPassData {
|
||||
|
||||
<div>Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div>
|
||||
|
||||
<button ion-button block color="danger" (click)="dismiss()" class="e2eCloseToolbarModal">
|
||||
<button ion-button block color="danger" (click)="dismiss()">
|
||||
Dismission Modal
|
||||
</button>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
class ToolbarModal {
|
||||
export class ToolbarModal {
|
||||
|
||||
constructor(public viewCtrl: ViewController) {}
|
||||
|
||||
dismiss() {
|
||||
this.viewCtrl.emit({
|
||||
toolbar: 'data'
|
||||
});
|
||||
this.viewCtrl.dismiss();
|
||||
}
|
||||
|
||||
@@ -292,16 +290,16 @@ class ToolbarModal {
|
||||
<form #addForm="ngForm" (submit)="save($event)" novalidate>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label floating>Title <span [hidden]="title.valid">(Required)</span></ion-label>
|
||||
<ion-input formControlName="title" type="text" [(ngModel)]="data.title" #title="ngForm" required autofocus></ion-input>
|
||||
<ion-label floating>Title <span [hidden]="data.title.valid">(Required)</span></ion-label>
|
||||
<ion-input formControlName="title" type="text" [(ngModel)]="data.title" required autofocus></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label floating>Note <span [hidden]="note.valid">(Required)</span></ion-label>
|
||||
<ion-input formControlName="note" type="text" [(ngModel)]="data.note" #note="ngForm" required></ion-input>
|
||||
<ion-label floating>Note <span [hidden]="data.note.valid">(Required)</span></ion-label>
|
||||
<ion-input formControlName="note" type="text" [(ngModel)]="data.note" required></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label floating>Icon</ion-label>
|
||||
<ion-input formControlName="icon" type="text" [(ngModel)]="data.icon" #icon="ngForm" autocomplete="on" autocorrect="on"></ion-input>
|
||||
<ion-input formControlName="icon" type="text" [(ngModel)]="data.icon" autocomplete="on" autocorrect="on"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<div padding>
|
||||
@@ -311,7 +309,7 @@ class ToolbarModal {
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
class ModalWithInputs {
|
||||
export class ModalWithInputs {
|
||||
data: any;
|
||||
|
||||
constructor(public viewCtrl: ViewController) {
|
||||
@@ -335,14 +333,14 @@ class ModalWithInputs {
|
||||
@Component({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
class ContactUs {
|
||||
export class ContactUs {
|
||||
root = ModalFirstPage;
|
||||
|
||||
constructor() {
|
||||
console.log('ContactUs constructor');
|
||||
}
|
||||
ionViewLoaded() {
|
||||
console.log('ContactUs ionViewLoaded');
|
||||
ionViewDidLoad() {
|
||||
console.log('ContactUs ionViewDidLoad');
|
||||
}
|
||||
ionViewWillEnter() {
|
||||
console.log('ContactUs ionViewWillEnter');
|
||||
@@ -359,9 +357,6 @@ class ContactUs {
|
||||
ionViewWillUnload() {
|
||||
console.log('ContactUs ionViewWillUnload');
|
||||
}
|
||||
ionViewDidUnload() {
|
||||
console.log('ContactUs ionViewDidUnload');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -383,8 +378,8 @@ class ContactUs {
|
||||
<p>
|
||||
<button ion-button (click)="openActionSheet()">Open Action Sheet</button>
|
||||
</p>
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
<div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
|
||||
<div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let item of items">
|
||||
Item Number: {{item.value}}
|
||||
@@ -393,7 +388,7 @@ class ContactUs {
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
class ModalFirstPage {
|
||||
export class ModalFirstPage {
|
||||
items: any[] = [];
|
||||
|
||||
constructor(public navCtrl: NavController, public app: App, public actionSheetCtrl: ActionSheetController) {
|
||||
@@ -415,8 +410,8 @@ class ModalFirstPage {
|
||||
this.navCtrl.parent.pop();
|
||||
}
|
||||
|
||||
ionViewLoaded() {
|
||||
console.log('ModalFirstPage ionViewLoaded fired');
|
||||
ionViewDidLoad() {
|
||||
console.log('ModalFirstPage ionViewDidLoad fired');
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
@@ -446,11 +441,8 @@ class ModalFirstPage {
|
||||
{
|
||||
text: 'Go To Root',
|
||||
handler: () => {
|
||||
// overlays are added and removed from the root navigation
|
||||
// find the root navigation, and pop this alert
|
||||
// when the alert is done animating out, then pop off the modal
|
||||
this.app.getRootNav().pop().then(() => {
|
||||
this.app.getRootNav().pop();
|
||||
actionSheet.dismiss().then(() => {
|
||||
this.navCtrl.parent.pop();
|
||||
});
|
||||
|
||||
// by default an alert will dismiss itself
|
||||
@@ -486,18 +478,18 @@ class ModalFirstPage {
|
||||
<p>
|
||||
<button ion-button (click)="navCtrl.pop()">Pop (Go back to 1st)</button>
|
||||
</p>
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
<div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
|
||||
<div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
class ModalSecondPage {
|
||||
export class ModalSecondPage {
|
||||
constructor(public navCtrl: NavController, params: NavParams) {
|
||||
console.log('Second page params:', params);
|
||||
}
|
||||
|
||||
ionViewLoaded() {
|
||||
console.log('ModalSecondPage ionViewLoaded');
|
||||
ionViewDidLoad() {
|
||||
console.log('ModalSecondPage ionViewDidLoad');
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
@@ -513,36 +505,40 @@ class ModalSecondPage {
|
||||
@Component({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
class E2EApp {
|
||||
export class E2EApp {
|
||||
root = E2EPage;
|
||||
}
|
||||
|
||||
ionicBootstrap(E2EApp, [SomeAppProvider]);
|
||||
@NgModule({
|
||||
declarations: [
|
||||
E2EApp,
|
||||
E2EPage,
|
||||
ModalFirstPage,
|
||||
ModalSecondPage,
|
||||
ModalWithInputs,
|
||||
ContactUs,
|
||||
NavigableModal,
|
||||
NavigableModal2,
|
||||
ModalPassData,
|
||||
ToolbarModal
|
||||
],
|
||||
imports: [
|
||||
IonicModule.forRoot(E2EApp)
|
||||
],
|
||||
bootstrap: [IonicApp],
|
||||
providers: [SomeAppProvider],
|
||||
entryComponents: [
|
||||
E2EApp,
|
||||
E2EPage,
|
||||
ModalFirstPage,
|
||||
ModalSecondPage,
|
||||
ModalWithInputs,
|
||||
ContactUs,
|
||||
NavigableModal,
|
||||
NavigableModal2,
|
||||
ModalPassData,
|
||||
ToolbarModal
|
||||
]
|
||||
})
|
||||
export class AppModule {}
|
||||
|
||||
|
||||
class FadeIn extends PageTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
this
|
||||
.element(enteringView.pageRef())
|
||||
.easing('ease')
|
||||
.duration(1000)
|
||||
.fromTo('translateY', '0%', '0%')
|
||||
.fromTo('opacity', 0, 1, true)
|
||||
.before.addClass('show-page');
|
||||
}
|
||||
}
|
||||
PageTransition.register('my-fade-in', FadeIn);
|
||||
|
||||
class FadeOut extends PageTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
this
|
||||
.element(leavingView.pageRef())
|
||||
.easing('ease')
|
||||
.duration(500)
|
||||
.fromTo('opacity', 1, 0)
|
||||
.before.addClass('show-page');
|
||||
}
|
||||
}
|
||||
PageTransition.register('my-fade-out', FadeOut);
|
||||
@@ -24,9 +24,6 @@
|
||||
<p>
|
||||
<button ion-button (click)="presentModalWithInputs()">Present modal w/ inputs</button>
|
||||
</p>
|
||||
<p>
|
||||
<button ion-button (click)="presentModalCustomAnimation()">Modal: Custom Animation</button>
|
||||
</p>
|
||||
<p>
|
||||
{{platforms | json}}
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user