rearrange structure

ionic/components.js

@@ -11,8 +11,9 @@ export * from 'ionic/components/form/form'
 export * from 'ionic/components/input/input'
 export * from 'ionic/components/layout/layout'
 export * from 'ionic/components/list/list'
-export * from 'ionic/components/nav-pane/nav-pane'
+export * from 'ionic/components/nav-pane/nav-pane' //TODO remove
 export * from 'ionic/components/nav/nav'
+export * from 'ionic/components/nav/nav-item'
 export * from 'ionic/components/radio/radio-button'
 export * from 'ionic/components/radio/radio-group'
 export * from 'ionic/components/search-bar/search-bar'

ionic/components/app/structure.scss

@@ -43,7 +43,7 @@ html {
     height: 100%;
   }
 
-  .nav-pane-container {
+  .nav-item-container {
     // container of many .nav-pane's, each one containing one view
     position: relative;
     @include flex(1);

ionic/components/nav/nav-controller.js

@@ -0,0 +1,199 @@
+import {NgElement} from 'angular2/angular2';
+import * as util from 'ionic/util';
+
+export class NavControllerBase {
+  constructor(
+    element: NgElement
+  ) {
+    this.domElement = element.domElement
+    this.domElement.classList.add('nav')
+
+    // this is our sane stack of items. This is synchronous and says an item
+    // is removed even if it's still animating out.
+    this._stack = []
+
+    // _ngForLoopArray is what adds/removes components from the dom. It won't
+    // remove a component until it's done animating out.
+    this._ngForLoopArray = []
+  }
+
+  containsClass(Class) {
+    for (let i = 0; i < this._stack.length; i++) {
+      if (this._stack[i].Class === Class) {
+        return true
+      }
+    }
+    return false
+  }
+
+  set initial(Class) {
+    if (!this.initialized) {
+      this.initialized = true
+      this.push(Class)
+    }
+  }
+  //TODO let the view handle enter/leave so splitview can override
+
+  /**
+   * Push a new view into the history stack.
+   *
+   * @param view the new view
+   * @param shouldAnimate whether to animate
+   */
+  // TODO don't push same component twice if one is already pushing
+  // TODO only animate if state hasn't changed
+  // TODO make sure the timing is together
+  // TODO allow starting an animation in the middle (eg gestures). Leave
+  // most of this up to the animation's implementation.
+  push(Class: Function, params = {}, opts = {}) {
+    util.defaults(opts, {
+      sync: this._stack.length === 0
+    })
+
+    let pushedItem = new NavStackData(Class, params)
+    this._stack.push(pushedItem)
+    this._ngForLoopArray.push(pushedItem)
+
+    return pushedItem.waitForSetup().then(() => {
+      let current = this._getPrevious(pushedItem)
+      current && current.leaveReverse(opts)
+      return pushedItem.enter(opts)
+    })
+  }
+
+  /**
+   * Pop a view off the history
+   *
+   * @param shouldAnimate whether to animate
+   */
+  pop(opts = {}) {
+    util.defaults(opts, {
+      sync: false
+    })
+    let current = this._stack.pop()
+    let dest = this.peek()
+
+    dest && dest.enterReverse(opts)
+    return current && current.leave(opts).then(() => this._destroy(current))
+  }
+
+  peek() {
+    return this._stack[this._stack.length - 1]
+  }
+
+  popAll() {
+    while (this._stack.length) {
+      const item = this._stack.pop()
+      this._destroy(item)
+    }
+  }
+
+  // Pop from the current item to the item at the specified index.
+  // Removes every item in the stack between the current and the given index,
+  // then performs a normal pop.
+  popTo(index, opts = {}) {
+    // Abort if we're already here.
+    if (this._stack.length <= index + 1) {
+      return Promise.resolve()
+    }
+
+    // Save the current navItem, and remove all the other ones in front of our
+    // target nav item.
+    const current = this._stack.pop()
+    while (this._stack.length > index + 1) {
+      const item = this._stack.pop()
+      this._destroy(item)
+    }
+
+    // Now put the current navItem back on the stack and run a normal pop animation.
+    this._stack.push(current)
+    return this.pop(opts)
+  }
+
+  setStack(stack) {
+    this._stack = stack.slice()
+    this._ngForLoopArray = stack.slice()
+  }
+
+  remove(index) {
+    const item = this._stack[index]
+    this._stack.splice(index, 1)
+    this._destroy(item)
+  }
+
+  _destroy(navItem) {
+    console.warn(
+`Component "${navItem.Class.name}" was popped from the nav stack, But were keeping its element in the DOM for now because of an ng2 bug.`
+    );
+    //util.array.remove(this._ngForLoopArray, navItem)
+  }
+
+  _getPrevious(item) {
+    return this._stack[ this._stack.indexOf(item) - 1 ]
+  }
+}
+
+class NavStackData {
+  constructor(ComponentClass, params = {}) {
+    this.Class = ComponentClass
+    this.params = params
+    this._setupPromise = new Promise((resolve) => {
+      this._resolveSetupPromise = resolve
+    })
+  }
+  waitForSetup() {
+    return this._setupPromise
+  }
+  finishSetup(navItem, componentInstance) {
+    this.navItem = navItem
+    this.instance = componentInstance
+    this._resolveSetupPromise()
+  }
+  setAnimation(state) {
+    if (!state) {
+      this.navItem.domElement.removeAttribute('animate')
+      this.navItem.domElement.classList.remove('start')
+    } else {
+      this.navItem.domElement.setAttribute('animate', state)
+    }
+  }
+  setShown(isShown) {
+    this.navItem.domElement.classList[isShown?'add':'remove']('shown')
+  }
+  startAnimation() {
+    this.navItem.domElement.classList.add('start')
+  }
+  _animate({ isShown, animation }) {
+    this.setAnimation(animation)
+    this.setShown(isShown)
+    if (animation) {
+      // We have to wait two rafs for the element to show. Yawn.
+      return util.dom.rafPromise().then(util.dom.rafPromise).then(() => {
+        this.startAnimation()
+        return util.dom.transitionEndPromise(this.navItem.domElement).then(() => {
+          this.setAnimation(null)
+        })
+      })
+    } else {
+      return Promise.resolve()
+    }
+  }
+  enterReverse(opts) {
+    return this.enter( util.extend({reverse: true}, opts) )
+  }
+  enter({ reverse = false, sync = false } = {}) {
+    return this._animate({
+      isShown: true,
+      animation: sync ? null : (reverse ? 'enter-reverse' : 'enter')
+    })
+  }
+  leave({ reverse = false, sync = false } = {}) {
+    return this._animate({
+      isShown: false,
+      animation: sync ? null : (reverse ? 'leave-reverse' : 'leave')
+    })
+  }
+  leaveReverse(opts) {
+    return this.leave( util.extend({reverse: true}, opts) )
+  }
+}

ionic/components/nav/nav-item.js

@@ -0,0 +1,71 @@
+import {
+  DynamicComponent,
+  Parent,
+  NgElement,
+  DynamicComponentLoader,
+  ElementRef,
+} from 'angular2/angular2';
+import {
+  Injectable,
+  bind,
+  Optional,
+} from 'angular2/di';
+import {Nav} from 'ionic/components/nav/nav'
+import {Tab} from 'ionic/components/tabs/tab'
+import * as util from 'ionic/util';
+
+@DynamicComponent({
+  selector: 'ion-nav-item',
+  properties: {
+    _item: 'item'
+  }
+})
+export class NavItem {
+  constructor(
+    @NgElement() element: NgElement,
+    loader: DynamicComponentLoader,
+    elementRef: ElementRef
+
+    // FIXME: this is temporary until ng2 lets us inject tabs as a Nav
+    // @Optional() @Parent() viewportNav: Nav,
+    // @Optional() @Parent() viewportTab: Tab
+  ) {
+    this._loader = loader;
+    this._elementRef = elementRef;
+    // this.viewport = viewportTab || viewportNav;
+    this.domElement = element.domElement;
+    this.params = {};
+  }
+
+  set _item(data) {
+    if (this.initialized) return;
+    this.initialized = true;
+    this.Class = data.Class;
+    this._item = data;
+
+    util.extend(this.params, data.params);
+
+    this._loader.loadIntoExistingLocation(data.Class, this._elementRef).then(instance => {
+      this.instance = instance
+      data.finishSetup(this, instance)
+    })
+  }
+
+  // /**
+  //  * Push out of this view into another view
+  //  */
+  // push(Class: Function, opts = {}) {
+  //   return this.viewport.push(Class, opts)
+  // }
+
+  // /**
+  //  * Go back
+  //  */
+  // pop(opts) {
+  //   return this.viewport.pop(opts)
+  // }
+
+  // popTo(index, opts) {
+  //   return this.viewport.popTo(index, opts)
+  // }
+}

ionic/components/nav/nav.js

@@ -3,239 +3,41 @@ import {
   View as NgView,
   For,
   NgElement,
-  ComponentInjector
 } from 'angular2/angular2';
-import {bind} from 'angular2/di';
-import {NavPane} from 'ionic/components/nav-pane/nav-pane';
-import * as util from 'ionic/util';
+import {NavControllerBase} from 'ionic/components/nav/nav-controller';
+import {NavItem} from 'ionic/components/nav/nav-item';
+import {Toolbar} from 'ionic/components/toolbar/toolbar';
 
-export class TestNav {
-  constructor(v) {
-    this.value = v;
-  }
-};
-
-console.log(ComponentInjector)
 @Component({
   selector: 'ion-nav',
   properties: {
     initial: 'initial'
-  },
-  injectables: [
-    bind(TestNav).toFactory((e) => {
-      debugger;
-      return e;
-    }, [Nav])
-  ]
+  }
 })
 @NgView({
   template: `
   <header class="toolbar-container">
+    <ion-toolbar class="view-toolbar">
+      <ion-nav-title>
+        Test Nonfunctional Toolbar
+      </ion-nav-title>
+    </ion-toolbar>
     <!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
     <!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
   </header>
 
-  <div class="nav-pane-container">
+  <div class="nav-item-container">
     <!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
     <!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
-    <section class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
+    <ion-nav-item class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
   </div>
   `,
-  directives: [NavPane, For]
+  directives: [NavItem, For, Toolbar]
 })
-export class Nav {
+export class Nav extends NavControllerBase {
   constructor(
     element: NgElement
   ) {
-    this.domElement = element.domElement
-    this.domElement.classList.add('nav')
-
-    // this is our sane stack of items. This is synchronous and says an item
-    // is removed even if it's still animating out.
-    this._stack = []
-
-    // _ngForLoopArray is actually adds/removes components from the dom. It won't
-    // remove a component until it's done animating out.
-    this._ngForLoopArray = []
-  }
-
-  containsClass(Class) {
-    for (let i = 0; i < this._stack.length; i++) {
-      if (this._stack[i].Class === Class) {
-        return true
-      }
-    }
-    return false
-  }
-
-  set initial(Class) {
-    if (!this.initialized) {
-      this.initialized = true
-      this.push(Class)
-    }
-  }
-  //TODO let the view handle enter/leave so splitview can override
-
-  /**
-   * Push a new view into the history stack.
-   *
-   * @param view the new view
-   * @param shouldAnimate whether to animate
-   */
-  // TODO don't push same component twice if one is already pushing
-  // TODO only animate if state hasn't changed
-  // TODO make sure the timing is together
-  // TODO allow starting an animation in the middle (eg gestures). Leave
-  // most of this up to the animation's implementation.
-  push(Class: Function, data = {}, opts = {}) {
-    util.defaults(opts, {
-      sync: this._stack.length === 0
-    })
-
-    let pushedItem = new NavItem(Class, data)
-    this._stack.push(pushedItem)
-    this._ngForLoopArray.push(pushedItem)
-
-    return pushedItem.waitForSetup().then(() => {
-      let current = this._getPrevious(pushedItem)
-      current && current.leaveReverse(opts)
-      return pushedItem.enter(opts)
-    })
-  }
-
-  /**
-   * Pop a view off the history
-   *
-   * @param shouldAnimate whether to animate
-   */
-  pop(opts = {}) {
-    util.defaults(opts, {
-      sync: false
-    })
-    let current = this._stack.pop()
-    let dest = this.peek()
-
-    dest && dest.enterReverse(opts)
-    return current && current.leave(opts).then(() => this._destroy(current))
-  }
-
-  peek() {
-    return this._stack[this._stack.length - 1]
-  }
-
-  popAll() {
-    while (this._stack.length) {
-      const item = this._stack.pop()
-      this._destroy(item)
-    }
-  }
-
-  // Pop from the current item to the item at the specified index.
-  // Removes every item in the stack between the current and the given index,
-  // then performs a normal pop.
-  popTo(index, opts = {}) {
-    // Abort if we're already here.
-    if (this._stack.length <= index + 1) {
-      return Promise.resolve()
-    }
-
-    // Save the current navItem, and remove all the other ones in front of our
-    // target nav item.
-    const current = this._stack.pop()
-    while (this._stack.length > index + 1) {
-      const item = this._stack.pop()
-      this._destroy(item)
-    }
-
-    // Now put the current navItem back on the stack and run a normal pop animation.
-    this._stack.push(current)
-    return this.pop(opts)
-  }
-
-  setStack(stack) {
-    this._stack = stack.slice()
-    this._ngForLoopArray = stack.slice()
-  }
-
-  remove(index) {
-    const item = this._stack[index]
-    this._stack.splice(index, 1)
-    this._destroy(item)
-  }
-
-  _destroy(navItem) {
-    console.warn(
-`Component "${navItem.Class.name}" was popped from the nav stack, But were keeping its element in the DOM for now because of an ng2 bug.`
-    );
-    //util.array.remove(this._ngForLoopArray, navItem)
-  }
-
-  _getPrevious(item) {
-    return this._stack[ this._stack.indexOf(item) - 1 ]
-  }
-}
-
-class NavItem {
-  constructor(ComponentClass, data = {}) {
-    this.Class = ComponentClass
-    this.data = data
-    this._setupPromise = new Promise((resolve) => {
-      this._resolveSetupPromise = resolve
-    })
-  }
-  waitForSetup() {
-    return this._setupPromise
-  }
-  finishSetup(navPane, componentInstance) {
-    this.navPane = navPane
-    this.instance = componentInstance
-    this._resolveSetupPromise()
-  }
-  setAnimation(state) {
-    if (!state) {
-      this.navPane.domElement.removeAttribute('animate')
-      this.navPane.domElement.classList.remove('start')
-    } else {
-      this.navPane.domElement.setAttribute('animate', state)
-    }
-  }
-  setShown(isShown) {
-    this.navPane.domElement.classList[isShown?'add':'remove']('shown')
-  }
-  startAnimation() {
-    this.navPane.domElement.classList.add('start')
-  }
-  _animate({ isShown, animation }) {
-    this.setAnimation(animation)
-    this.setShown(isShown)
-    if (animation) {
-      // We have to wait two rafs for the element to show. Yawn.
-      return util.dom.rafPromise().then(util.dom.rafPromise).then(() => {
-        this.startAnimation()
-        return util.dom.transitionEndPromise(this.navPane.domElement).then(() => {
-          this.setAnimation(null)
-        })
-      })
-    } else {
-      return Promise.resolve()
-    }
-  }
-  enterReverse(opts) {
-    return this.enter( util.extend({reverse: true}, opts) )
-  }
-  enter({ reverse = false, sync = false } = {}) {
-    return this._animate({
-      isShown: true,
-      animation: sync ? null : (reverse ? 'enter-reverse' : 'enter')
-    })
-  }
-  leave({ reverse = false, sync = false } = {}) {
-    return this._animate({
-      isShown: false,
-      animation: sync ? null : (reverse ? 'leave-reverse' : 'leave')
-    })
-  }
-  leaveReverse(opts) {
-    return this.leave( util.extend({reverse: true}, opts) )
+    super(element);
   }
 }

ionic/components/tabs/tab.js

@@ -1,17 +1,16 @@
 import {
-  NgElement,
   Component,
+  NgElement,
   View as NgView,
   Ancestor,
   PropertySetter,
   For
 } from 'angular2/angular2';
-import {Nav} from 'ionic/components/nav/nav'
-import {NavPane} from 'ionic/components/nav-pane/nav-pane'
-import {Tabs} from 'ionic/components/tabs/tabs'
-import * as util from 'ionic/util'
-import {IonicComponent} from 'ionic/config/component'
-
+import {NavControllerBase} from 'ionic/components/nav/nav-controller';
+import {NavItem} from 'ionic/components/nav/nav-item';
+import {Tabs} from 'ionic/components/tabs/tabs';
+import * as util from 'ionic/util';
+import {IonicComponent} from 'ionic/config/component';
 
 @Component({
   selector: 'ion-tab',
@@ -19,19 +18,26 @@ import {IonicComponent} from 'ionic/config/component'
     title: 'tab-title',
     icon: 'tab-icon',
     initial: 'initial'
-  }
+  },
 })
 @NgView({
   template: `
-    <div class="nav-pane-container">
+    <header class="toolbar-container">
+      <ion-toolbar class="view-toolbar">
+        <ion-nav-title>
+          Test Nonfunctional Toolbar
+        </ion-nav-title>
+      </ion-toolbar>
+    </header>
+    <div class="nav-item-container">
       <!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
       <!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
-      <section class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
+      <ion-nav-item class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
     </div>
   `,
-  directives: [For, NavPane]
+  directives: [For, NavItem]
 })
-export class Tab extends Nav {
+export class Tab extends NavControllerBase {
   constructor(
     element: NgElement,
     @Ancestor() tabs: Tabs,
@@ -40,8 +46,8 @@ export class Tab extends Nav {
     @PropertySetter('attr.id') setId: Function,
     @PropertySetter('attr.aria-labelledby') setLabelby: Function
   ) {
-    super(element)
-    this.config = Tab.config.invoke(this)
+    super(element);
+    this.config = Tab.config.invoke(this);
     this.setHidden = setHidden
 
     this.tabId = util.uid()

ionic/components/tabs/tabs.js

@@ -37,10 +37,11 @@ import {IonicComponent} from 'ionic/config/component'
   `,
   directives: [For]
 })
-export class Tabs  {
+export class Tabs {
   constructor(
     @NgElement() ngElement: NgElement
   ) {
+    console.log("Tabs");
     this.domElement = ngElement.domElement
     this.config = Tabs.config.invoke(this)
 

ionic/components/tabs/test/advanced/pages/sign-in.html

@@ -1,28 +1,24 @@
-<ion-view nav-title="Sign In">
+<ion-nav-items side="primary">
+  <button class="button" (click)="instanceCheck()">
+    <icon class="ion-star"></icon>
+  </button>
+</ion-nav-items>
 
-  <ion-nav-items side="primary">
-    <button class="button" (click)="instanceCheck()">
+<ion-content class="padding">
+
+  <p>
+    <button class="button button-primary" (click)="signIn()">
+      Sign In
+    </button>
+    <button class="button button-primary button-outline" (click)="instanceCheck()">
       <icon class="ion-star"></icon>
     </button>
-  </ion-nav-items>
+  </p>
 
-  <ion-content class="padding">
+  <p>
+    <input>
+  </p>
 
-    <p>
-      <button class="button button-primary" (click)="signIn()">
-        Sign In
-      </button>
-      <button class="button button-primary button-outline" (click)="instanceCheck()">
-        <icon class="ion-star"></icon>
-      </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>
 
-    <p>
-      <input>
-    </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>
-
-  </ion-content>
-
-</ion-view>
+</ion-content>

ionic/components/tabs/test/advanced/pages/sign-in.js

@@ -1,5 +1,5 @@
 import {Component, View as NgView, Ancestor} from 'angular2/angular2'
-import {View, NavPane, Content, TestNav, Nav} from 'ionic/ionic'
+import {NavPane, Content, Nav} from 'ionic/ionic'
 import {TabsPage} from 'pages/tabs'
 
 @Component({
@@ -7,19 +7,19 @@ import {TabsPage} from 'pages/tabs'
 })
 @NgView({
   templateUrl: 'pages/sign-in.html',
-  directives: [View, Content]
+  directives: [Content]
 })
 export class SignInPage {
   constructor(
-    nav: Nav,
-    t: TestNav
+    nav: Nav
   ) {
-    debugger;
     this.nav = nav;
     this.instanceVal = Math.random()
   }
   signIn() {
-    this.nav.push(TabsPage)
+    this.nav.push(TabsPage, {
+      my: 'param'
+    })
   }
   instanceCheck() {
     window.alert("Instance: " + this.instanceVal)

ionic/components/tabs/test/advanced/pages/tabs.js

@@ -1,6 +1,17 @@
-import {Component, View as NgView, Parent} from 'angular2/angular2'
-import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/ionic'
-
+import {
+  Component,
+  View as NgView,
+  Parent,
+} from 'angular2/angular2'
+import {
+  View,
+  Tabs,
+  Tab,
+  Aside,
+  Content,
+  Nav,
+  NavItem,
+} from 'ionic/ionic'
 
 @Component({
   selector: 'tabs-page'
@@ -10,7 +21,10 @@ import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/ionic'
   directives: [Tabs, Tab, View, Content]
 })
 export class TabsPage {
-  constructor() {
+  constructor(
+    navItem: NavItem,
+    nav: Nav
+  ) {
     this.tab1Initial = Tab1Page1
     this.tab2Initial = Tab2Page1
   }
@@ -22,44 +36,43 @@ export class TabsPage {
 //
 @Component({ selector: 't1p1' })
 @NgView({
-  template: `<ion-view nav-title="Tab 1 Page 1">
-              <ion-content class="padding">
+  template: `<ion-content class="padding">
                 <p>Tab 1 Page 1.</p>
                 <button class="button button-primary" (click)="next()">
                   Go to Tab 1, Page 2 (push)
                 </button>
                 <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-              </ion-content>
-            </ion-view>`,
+              </ion-content>`,
   directives: [View, Content]
 })
 class Tab1Page1 {
-  constructor(navPane: NavPane) {
-    this.navPane = navPane
+  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
+  constructor(nav: Tab) {
+    this.nav = nav;
   }
   next() {
-    this.navPane.push(Tab1Page2)
+    this.nav.push(Tab1Page2)
   }
 }
 
 @Component({ selector: 't1p2' })
 @NgView({
-  template: `<ion-view nav-title="Tab 1 Page 2">
-              <ion-content class="padding">
+  template: `<ion-content class="padding">
                 <p>Tab 1 Page 2.</p>
                 <button class="button button-primary" (click)="pop()">
                   Back to Tab 1, Page 1 (pop)
                 </button>
                 <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
               </ion-content>
-            </ion-view>`,
+            `,
   directives: [View, Content]
 })
 class Tab1Page2 {
-  constructor(navPane: NavPane) {
-    this.navPane = navPane
+  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
+  constructor(nav: Tab) {
+    this.nav = nav;
   }
-  pop() { this.navPane.pop() }
+  pop() { this.nav.pop(); }
 }
 
 
@@ -72,25 +85,24 @@ class Tab1Page2 {
     <ion-aside side="left" [content]="view">
       Left aside for Tab 2 Page 1
     </ion-aside>
-    <ion-view nav-title="Tab 2 Page 1" #view>
-      <ion-content class="padding">
-        <p>Tab 2 Page 1.</p>
-        <button class="button button-primary" (click)="next()">
-          Go to Tab 2 Page 2 (push)
-        </button>
-        <br/><span style="color:red">I have got an aside on the left.</span>
-        <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-      </ion-content>
-    </ion-view>
+    <ion-content class="padding">
+      <p>Tab 2 Page 1.</p>
+      <button class="button button-primary" (click)="next()">
+        Go to Tab 2 Page 2 (push)
+      </button>
+      <br/><span style="color:red">I have got an aside on the left.</span>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+    </ion-content>
   `,
   directives: [View, Aside, Content]
 })
 class Tab2Page1 {
-  constructor(navPane: NavPane) {
-    this.navPane = navPane
+  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
+  constructor(nav: Tab) {
+    this.nav = nav
   }
   next() {
-    this.navPane.push(Tab2Page2)
+    this.nav.push(Tab2Page2)
   }
 }
 
@@ -102,28 +114,25 @@ class Tab2Page1 {
     </ion-aside>
     <ion-tabs #view class="view-cover">
       <ion-tab tab-title="Nested Tab 1">
-        <ion-view nav-title="Nested Tab 1">
-          <ion-content class="padding">
-            Nested Tab 1, static content
-            <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-          </ion-content>
-        </ion-view>
+        <ion-content class="padding">
+          Nested Tab 1, static content
+          <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+        </ion-content>
       </ion-tab>
       <ion-tab tab-title="Nested Tab 2">
-        <ion-view nav-title="Nested Tab 2">
-          <ion-content class="padding">
-            Nested Tab 2, static content
-            <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-          </ion-content>
-        </ion-view>
+        <ion-content class="padding">
+          Nested Tab 2, static content
+          <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+        </ion-content>
       </ion-tab>
     </ion-tabs>
   `,
   directives: [View, Aside, Tabs, Tab, Content]
 })
 class Tab2Page2 {
-  constructor(navPane: NavPane) {
-    this.navPane = navPane
+  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
+  constructor(nav: Tab) {
+    this.nav = nav
   }
-  pop() { this.navPane.pop() }
+  pop() { this.nav.pop() }
 }