refactor(NavController): improve transitions, view stages

This refactor made it so view transitions do no step on one another when a new transition happens
during an active transition.

ionic/components/nav/test/basic/index.ts

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component, Type} from 'angular2/core';
 import {App, NavController} from 'ionic/ionic';
 import {Page, Config, IonicApp} from 'ionic/ionic';
 import {NavParams, NavController, ViewController, IONIC_DIRECTIVES} from 'ionic/ionic';
@@ -37,7 +37,7 @@ class MyCmpTest{}
           <ion-label>Text Input</ion-label>
           <textarea></textarea>
         </ion-input>
-        
+
         <button ion-item [navPush]="[pushPage, {id: 42}]">Push FullPage w/ [navPush] array</button>
         <button ion-item [navPush]="pushPage" [navParams]="{id:40}">Push w/ [navPush] and [navParams]</button>
         <button ion-item [navPush]="[\'FirstPage\', {id: 22}]">Push w/ [navPush] array and string view name</button>
@@ -45,6 +45,8 @@ class MyCmpTest{}
         <button ion-item (click)="setPages()">setPages() (Go to PrimaryHeaderPage)</button>
         <button ion-item (click)="setRoot()">setRoot(PrimaryHeaderPage) (Go to PrimaryHeaderPage)</button>
         <button ion-item (click)="nav.pop()">Pop</button>
+        <button ion-item (click)="quickPush()">New push during transition</button>
+        <button ion-item (click)="quickPop()">New pop during transition</button>
         <button ion-item (click)="reload()">Reload</button>
 
         <button *ngFor="#i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
@@ -54,17 +56,17 @@ class MyCmpTest{}
   directives: [MyCmpTest]
 })
 class FirstPage {
+  pushPage;
+  title = 'First Page';
+  pages: Array<number> = [];
+
   constructor(
-    nav: NavController,
+    private nav: NavController,
     app: IonicApp,
     config: Config
   ) {
-    this.nav = nav;
-    this.title = 'First Page';
-
     this.pushPage = FullPage;
 
-    this.pages = [];
     for (var i = 1; i <= 50; i++) {
       this.pages.push(i);
     }
@@ -72,7 +74,7 @@ class FirstPage {
 
   setPages() {
     let items = [
-      PrimaryHeaderPage
+      {page: PrimaryHeaderPage}
     ];
 
     this.nav.setPages(items);
@@ -94,6 +96,20 @@ class FirstPage {
     this.nav.push(AnotherPage);
   }
 
+  quickPush() {
+    this.nav.push(AnotherPage);
+    setTimeout(() => {
+      this.nav.push(PrimaryHeaderPage);
+    }, 150);
+  }
+
+  quickPop() {
+    this.nav.push(AnotherPage);
+    setTimeout(() => {
+      this.nav.remove(1, 1);
+    }, 250);
+  }
+
   reload() {
     window.location.reload();
   }
@@ -116,17 +132,14 @@ class FirstPage {
 })
 class FullPage {
   constructor(
-    nav: NavController,
-    params: NavParams
-  ) {
-    this.nav = nav;
-    this.params = params;
-  }
+    private nav: NavController,
+    private params: NavParams
+  ) {}
 
   setPages() {
     let items = [
-      FirstPage,
-      PrimaryHeaderPage
+      {page: FirstPage},
+      {page: PrimaryHeaderPage}
     ];
 
     this.nav.setPages(items);
@@ -157,6 +170,7 @@ class FullPage {
       <p><button (click)="pushAnother()">Push to AnotherPage</button></p>
       <p><button (click)="pushFullPage()">Push to FullPage</button></p>
       <p><button (click)="setRoot()">setRoot(AnotherPage)</button></p>
+      <p><button (click)="nav.popToRoot()">Pop to root</button></p>
       <p><button id="insert" (click)="insert()">Insert first page into history before this</button></p>
       <p><button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
       <div class="yellow"><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>
@@ -165,12 +179,9 @@ class FullPage {
 })
 class PrimaryHeaderPage {
   constructor(
-    nav: NavController,
-    viewCtrl: ViewController
-  ) {
-    this.nav = nav;
-    this.viewCtrl = viewCtrl;
-  }
+    private nav: NavController,
+    private viewCtrl: ViewController
+  ) {}
 
   onPageWillEnter() {
     this.viewCtrl.setBackButtonText('Previous');
@@ -225,15 +236,13 @@ class PrimaryHeaderPage {
   `
 })
 class AnotherPage {
+  bbHideToggleVal = false;
+  bbCount = 0;
+
   constructor(
-    nav: NavController,
-    viewCtrl: ViewController
-  ) {
-    this.nav = nav;
-    this.viewCtrl = viewCtrl;
-    this.bbHideToggleVal = false;
-    this._bbCount = 0;
-  }
+    private nav: NavController,
+    private viewCtrl: ViewController
+  ) {}
 
   pushFullPage() {
     this.nav.push(FullPage);
@@ -259,12 +268,12 @@ class AnotherPage {
   setBackButtonText() {
     let backButtonText = 'Messages';
 
-    if (this._bbCount > 0) {
-      backButtonText += ` (${this._bbCount})`;
+    if (this.bbCount > 0) {
+      backButtonText += ` (${this.bbCount})`;
     }
 
     this.viewCtrl.setBackButtonText(backButtonText);
-    ++this._bbCount;
+    ++this.bbCount;
   }
 }
 
@@ -277,6 +286,8 @@ class AnotherPage {
   }
 })
 class E2EApp {
+  root;
+
   constructor() {
     this.root = FirstPage;
   }