demo(overlay): use injectable overlay controllers

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();
   }
 }
 

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();
   }
 
 }

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();
 

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: `
         <div class="custom-spinner-container">
@@ -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: `
     <ion-header>
@@ -119,9 +120,8 @@ class Page1 {
     <ion-content padding>This is another page!</ion-content>
   `
 })
-class Page2 {
+class Page2 {}
-  constructor(private nav: NavController, private platform: Platform) {}
+
-}
 
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>',

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);
+    let myModal = this.modalCtrl.create(ModalContentPage);
-    this.nav.present(myModal);
+    myModal.present();
   }
   openModalWithParams() {
-    let myModal = Modal.create(ModalContentPage, { 'myParam': this.myParam });
+    let myModal = this.modalCtrl.create(ModalContentPage, { 'myParam': this.myParam });
-    this.nav.present(myModal);
+    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');
   }
 }

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: UIEvent) {
-
+    let popover = this.popoverCtrl.create(PopoverRadioPage, {
-  presentRadioPopover(ev) {
-    let popover = Popover.create(PopoverRadioPage, {
       contentEle: this.content.nativeElement,
       textEle: this.text.nativeElement
     });
 
-    this.nav.present(popover, {
+    popover.present({
       ev: ev
     });
   }

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()');
   }
 

src/components/nav/nav-controller.ts

@@ -448,7 +448,7 @@ export class NavController extends Ion {
   private present(enteringView: ViewController, opts?: NavOptions): Promise<any> {
     // 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();
   }