diff --git a/demos/action-sheet/index.ts b/demos/action-sheet/index.ts index 2c8c714838..45fd568410 100644 --- a/demos/action-sheet/index.ts +++ b/demos/action-sheet/index.ts @@ -1,16 +1,16 @@ import { Component } from '@angular/core'; -import { ActionSheet, ionicBootstrap, NavController, Platform } from 'ionic-angular'; +import { ActionSheetController, ionicBootstrap, Platform } from 'ionic-angular'; @Component({ templateUrl: 'main.html' }) export class ApiDemoPage { - constructor(public nav: NavController, public platform: Platform) { } + constructor(public alertCtrl: ActionSheetController, public platform: Platform) { } present() { - let actionSheet = ActionSheet.create({ + let actionSheet = this.alertCtrl.create({ title: 'Albums', buttons: [ { @@ -53,7 +53,7 @@ export class ApiDemoPage { ] }); - this.nav.present(actionSheet); + actionSheet.present(); } } diff --git a/demos/alert/index.ts b/demos/alert/index.ts index 5c7c5e35e0..93e23346d3 100644 --- a/demos/alert/index.ts +++ b/demos/alert/index.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Alert, ionicBootstrap, NavController } from 'ionic-angular'; +import { AlertController, ionicBootstrap } from 'ionic-angular'; @Component({ @@ -12,20 +12,20 @@ export class ApiDemoPage { testCheckboxOpen = false; testCheckboxResult: any; - constructor(public nav: NavController) {} + constructor(public alertCtrl: AlertController) {} doAlert() { - let alert = Alert.create({ + let alert = this.alertCtrl.create({ title: 'New Friend!', subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!', buttons: ['Ok'] }); - this.nav.present(alert); + alert.present(); } doConfirm() { - let alert = Alert.create({ + let alert = this.alertCtrl.create({ title: 'Use this lightsaber?', body: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?', buttons: [ @@ -44,11 +44,11 @@ export class ApiDemoPage { ] }); - this.nav.present(alert); + alert.present(); } doPrompt() { - let alert = Alert.create({ + let alert = this.alertCtrl.create({ title: 'Login', body: "Enter a name for this new album you're so keen on adding", inputs: [ @@ -60,24 +60,24 @@ export class ApiDemoPage { buttons: [ { text: 'Cancel', - handler: data => { + handler: (data: any) => { console.log('Cancel clicked'); } }, { text: 'Save', - handler: data => { + handler: (data: any) => { console.log('Saved clicked'); } } ] }); - this.nav.present(alert); + alert.present(); } doRadio() { - let alert = Alert.create(); + let alert = this.alertCtrl.create(); alert.setTitle('Lightsaber color'); alert.addInput({ @@ -126,18 +126,18 @@ export class ApiDemoPage { alert.addButton('Cancel'); alert.addButton({ text: 'Ok', - handler: data => { + handler: (data: any) => { console.log('Radio data:', data); this.testRadioOpen = false; this.testRadioResult = data; } }); - this.nav.present(alert); + alert.present(); } doCheckbox() { - let alert = Alert.create(); + let alert = this.alertCtrl.create(); alert.setTitle('Which planets have you visited?'); alert.addInput({ @@ -198,14 +198,14 @@ export class ApiDemoPage { alert.addButton('Cancel'); alert.addButton({ text: 'Okay', - handler: data => { + handler: (data: any) => { console.log('Checkbox data:', data); this.testCheckboxOpen = false; this.testCheckboxResult = data; } }); - this.nav.present(alert); + alert.present(); } } diff --git a/demos/item-sliding/index.ts b/demos/item-sliding/index.ts index 65c41e1846..46b46b1012 100644 --- a/demos/item-sliding/index.ts +++ b/demos/item-sliding/index.ts @@ -1,6 +1,6 @@ import { Component, ViewEncapsulation } from '@angular/core'; -import { ionicBootstrap, ItemSliding, NavController, Toast } from 'ionic-angular'; +import { ionicBootstrap, ItemSliding, ToastController } from 'ionic-angular'; @Component({ @@ -13,7 +13,7 @@ class ApiDemoPage { editButton: string = 'Edit'; editing: boolean = false; - constructor(private nav: NavController) { + constructor(private toastCtrl: ToastController) { this.chats = [ { img: './avatar-cher.png', @@ -116,10 +116,10 @@ class ApiDemoPage { download(item: ItemSliding) { item.setClass('downloading', true); setTimeout(() => { - const toast = Toast.create({ + const toast = this.toastCtrl.create({ message: 'Item was downloaded!' }); - this.nav.present(toast); + toast.present(); item.setClass('downloading', false); item.close(); diff --git a/demos/loading/index.ts b/demos/loading/index.ts index ef0c0c8a39..22bcfa1508 100644 --- a/demos/loading/index.ts +++ b/demos/loading/index.ts @@ -1,75 +1,75 @@ import { Component, ViewEncapsulation } from '@angular/core'; -import { ionicBootstrap, Loading, NavController, Platform } from 'ionic-angular'; +import { ionicBootstrap, LoadingController, NavController } from 'ionic-angular'; @Component({ templateUrl: 'main.html' }) class Page1 { - constructor(private nav: NavController, private platform: Platform) {} + constructor(private loadingCtrl: LoadingController, private nav: NavController) {} presentLoadingIos() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ spinner: 'ios', content: 'This is the "ios" spinner. It will dismiss after 3 seconds.', duration: 3000 }); - this.nav.present(loading); + loading.present(); } presentLoadingDots() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ spinner: 'dots', content: 'This is the "dots" spinner. It will dismiss after 3 seconds.', duration: 3000 }); - this.nav.present(loading); + loading.present(); } presentLoadingBubbles() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ spinner: 'bubbles', content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.', duration: 3000 }); - this.nav.present(loading); + loading.present(); } presentLoadingCircles() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ spinner: 'circles', content: 'This is the "circles" spinner. It will dismiss after 3 seconds.', duration: 3000 }); - this.nav.present(loading); + loading.present(); } presentLoadingCrescent() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ spinner: 'crescent', content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.', duration: 3000 }); - this.nav.present(loading); + loading.present(); } presentLoadingDefault() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ content: 'This is the mode specific spinner. It will dismiss after 3 seconds.', duration: 3000 }); - this.nav.present(loading); + loading.present(); } presentLoadingCustom() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ spinner: 'hide', content: `
@@ -79,25 +79,25 @@ class Page1 { duration: 3000 }); - this.nav.present(loading); + loading.present(); } presentLoadingText() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ spinner: 'hide', content: 'This has no spinner, only text. It will dismiss after 3 seconds.', duration: 3000 }); - this.nav.present(loading); + loading.present(); } goToPage2() { - let loading = Loading.create({ + let loading = this.loadingCtrl.create({ content: 'This will navigate to the next page and then dismiss after 3 seconds.' }); - this.nav.present(loading); + loading.present(); setTimeout(() => { this.nav.push(Page2); @@ -109,6 +109,7 @@ class Page1 { } } + @Component({ template: ` @@ -119,9 +120,8 @@ class Page1 { This is another page! ` }) -class Page2 { - constructor(private nav: NavController, private platform: Platform) {} -} +class Page2 {} + @Component({ template: '', diff --git a/demos/modal/index.ts b/demos/modal/index.ts index fe81275fd8..4754d5673b 100644 --- a/demos/modal/index.ts +++ b/demos/modal/index.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Animation, Config, IonicApp, ionicBootstrap, Modal, NavController, NavParams, Platform, ViewController } from 'ionic-angular'; +import { Animation, ionicBootstrap, ModalController, NavController, NavParams, ViewController } from 'ionic-angular'; @Component({ @@ -9,21 +9,21 @@ import { Animation, Config, IonicApp, ionicBootstrap, Modal, NavController, NavP export class ModalFirstPage { myParam = ''; - constructor(public nav: NavController) {} + constructor(public modalCtrl: ModalController) {} openBasicModal() { - let myModal = Modal.create(ModalContentPage); - this.nav.present(myModal); + let myModal = this.modalCtrl.create(ModalContentPage); + myModal.present(); } openModalWithParams() { - let myModal = Modal.create(ModalContentPage, { 'myParam': this.myParam }); - this.nav.present(myModal); + let myModal = this.modalCtrl.create(ModalContentPage, { 'myParam': this.myParam }); + myModal.present(); } openCustomAnimationModal() { - let myModal = Modal.create(ModalContentPage, { + let myModal = this.modalCtrl.create(ModalContentPage, { animation: 'my-fade-in', }); - this.nav.present(myModal); + myModal.present(); } } @@ -39,7 +39,7 @@ export class ModalContentPage { public viewCtrl: ViewController, params: NavParams ) { - this.myParam = params.get('myParam'); + this.myParam = params.get('myParam'); } dismiss() { @@ -59,25 +59,25 @@ ionicBootstrap(ApiDemoApp); class FadeIn extends Animation { - constructor(enteringView, leavingView) { + constructor(enteringView: ViewController, leavingView: ViewController) { super(enteringView.pageRef()); this .easing('ease') .duration(1000) .fromTo('translateY', '0%', '0%') - .fadeIn() + .fromTo('opacity', 0, 1) .before.addClass('show-page'); } } Animation.register('my-fade-in', FadeIn); class FadeOut extends Animation { - constructor(enteringView, leavingView) { + constructor(enteringView: ViewController, leavingView: ViewController) { super(leavingView.pageRef()); this .easing('ease') .duration(500) - .fadeOut() + .fromTo('opacity', 1, 0) .before.addClass('show-page'); } } diff --git a/demos/popover/index.ts b/demos/popover/index.ts index 6137c6fa50..4adfb0c692 100644 --- a/demos/popover/index.ts +++ b/demos/popover/index.ts @@ -1,6 +1,6 @@ import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { Content, ionicBootstrap, NavController, NavParams, Popover } from 'ionic-angular'; +import { ionicBootstrap, NavParams, PopoverController } from 'ionic-angular'; @Component({ @@ -63,9 +63,9 @@ class PopoverRadioPage { background: string; contentEle: any; textEle: any; - fontFamily; + fontFamily: string; - colors = { + colors: any = { 'white': { 'bg': 'rgb(255, 255, 255)', 'fg': 'rgb(0, 0, 0)' @@ -98,7 +98,7 @@ class PopoverRadioPage { } } - getColorName(background) { + getColorName(background: any) { let colorName = 'white'; if (!background) return 'white'; @@ -118,13 +118,13 @@ class PopoverRadioPage { } } - changeBackground(color) { + changeBackground(color: any) { this.background = color; this.contentEle.style.backgroundColor = this.colors[color].bg; this.textEle.style.color = this.colors[color].fg; } - changeFontSize(direction) { + changeFontSize(direction: string) { this.textEle.style.fontSize = direction; } @@ -141,17 +141,15 @@ class ApiDemoPage { @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef; @ViewChild('popoverText', {read: ElementRef}) text: ElementRef; - constructor(private nav: NavController) { + constructor(private popoverCtrl: PopoverController) {} - } - - presentRadioPopover(ev) { - let popover = Popover.create(PopoverRadioPage, { + presentRadioPopover(ev: UIEvent) { + let popover = this.popoverCtrl.create(PopoverRadioPage, { contentEle: this.content.nativeElement, textEle: this.text.nativeElement }); - this.nav.present(popover, { + popover.present({ ev: ev }); } diff --git a/demos/toast/index.ts b/demos/toast/index.ts index ef11d01588..68882142d0 100644 --- a/demos/toast/index.ts +++ b/demos/toast/index.ts @@ -1,55 +1,55 @@ import { Component } from '@angular/core'; -import { ionicBootstrap, NavController, Toast } from 'ionic-angular'; +import { ionicBootstrap, ToastController } from 'ionic-angular'; @Component({ templateUrl: 'main.html' }) class ApiDemoPage { - constructor(private nav: NavController) { } + constructor(private toastCtrl: ToastController) { } showToast(position: string) { - const toast = Toast.create({ + const toast = this.toastCtrl.create({ message: 'User was created successfully', position: position, duration: 3000 }); toast.onDismiss(this.dismissHandler); - this.nav.present(toast); + toast.present(); } showLongToast() { - const toast = Toast.create({ + const toast = this.toastCtrl.create({ message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 3000 }); toast.onDismiss(this.dismissHandler); - this.nav.present(toast); + toast.present(); } showDismissDurationToast() { - const toast = Toast.create({ + const toast = this.toastCtrl.create({ message: 'I am dismissed after 1.5 seconds', duration: 1500 }); toast.onDismiss(this.dismissHandler); - this.nav.present(toast); + toast.present(); } showToastWithCloseButton() { - const toast = Toast.create({ + const toast = this.toastCtrl.create({ message: 'Your internet connection appears to be offline. Data integrity is not guaranteed.', showCloseButton: true, closeButtonText: 'Ok' }); toast.onDismiss(this.dismissHandler); - this.nav.present(toast); + toast.present(); } - private dismissHandler(toast: Toast) { + private dismissHandler() { console.info('Toast onDismiss()'); } diff --git a/src/components/nav/nav-controller.ts b/src/components/nav/nav-controller.ts index bcae542c5b..fda6318943 100644 --- a/src/components/nav/nav-controller.ts +++ b/src/components/nav/nav-controller.ts @@ -448,7 +448,7 @@ export class NavController extends Ion { private present(enteringView: ViewController, opts?: NavOptions): Promise { // deprecated warning: added beta.11 2016-06-27 console.warn('nav.present() has been deprecated.\n' + - 'Please use inject the overlays controller and use the present method on the instance instead.'); + 'Please inject the overlay\'s controller and use the present method on the instance instead.'); return Promise.resolve(); }