nav updates

ionic/components/nav/test/basic/main.html

@@ -1,2 +1,2 @@
-<ion-nav [initial-component]="initial">
+<ion-nav [initial]="initial">
 </ion-nav>

ionic/components/nav/test/basic/main.js

@@ -11,8 +11,8 @@ import {FirstPage} from 'pages/first-page'
 class IonicApp {
   constructor() {
     this.initial = FirstPage
-    console.log('IonicApp Start')
+    console.log('IonicApp Start');
   }
 }
 
-bootstrap(IonicApp)
+bootstrap(IonicApp);

ionic/components/nav/test/basic/pages/first-page.html

@@ -1,3 +1,6 @@
-<ion-view nav-title="First Page">
-  <button (click)="nextPage()">Push Page 2</button>
-</ion-view>
+
+<h1>First Page</h1>
+
+<p>
+  <button (click)="push()">Push (Go to 2nd)</button>
+</p>

ionic/components/nav/test/basic/pages/first-page.js

@@ -1,22 +1,21 @@
 import {Component, View, Parent} from 'angular2/angular2'
-import {Nav} from 'ionic/ionic'
+import {NavController} from 'ionic/ionic'
 import {SecondPage} from 'pages/second-page'
 
-@Component({
-  selector: 'first-page'
-})
+
+@Component()
 @View({
   templateUrl: 'pages/first-page.html',
   directives: []
 })
 export class FirstPage {
   constructor(
-    @Parent() viewport: Nav
+    nav: NavController
   ) {
-    this.viewport = viewport
+    this.nav = nav;
   }
 
-  nextPage() {
-    this.viewport.push(SecondPage)
+  push() {
+    this.nav.push(SecondPage);
   }
 }

ionic/components/nav/test/basic/pages/second-page.html

@@ -1,3 +1,10 @@
-<ion-view nav-title="Second Page">
-  <button (click)="pop()">Pop (Go back)</button>
-</ion-view>
+
+<h1>Second Page</h1>
+
+<p>
+  <button (click)="pop()">Pop (Go back to 1st)</button>
+</p>
+
+<p>
+  <button (click)="push()">Push (Go to 3rd)</button>
+</p>

ionic/components/nav/test/basic/pages/second-page.js

@@ -1,21 +1,22 @@
 import {Component, View, Parent} from 'angular2/angular2'
-import {Nav} from 'ionic/components'
+import {NavController} from 'ionic/components'
+import {ThirdPage} from 'pages/third-page'
 
 
-@Component({
-  selector: 'second-page'
-})
+@Component()
 @View({
-  templateUrl: 'pages/second-page.html',
-  directives: []
+  templateUrl: 'pages/second-page.html'
 })
 export class SecondPage {
   constructor(
-    @Parent() viewport: Nav
+    nav: NavController
   ) {
-    this.viewport = viewport
+    this.nav = nav
   }
   pop() {
-    this.viewport.pop()
+    this.nav.pop();
+  }
+  push() {
+    this.nav.push(ThirdPage);
   }
 }

ionic/components/nav/test/basic/pages/third-page.html

@@ -0,0 +1,6 @@
+
+<h1>Third Page</h1>
+
+<p>
+  <button (click)="pop()">Pop (Go back to 2nd)</button>
+</p>

ionic/components/nav/test/basic/pages/third-page.js

@@ -0,0 +1,19 @@
+import {Component, View, Parent} from 'angular2/angular2'
+import {NavController} from 'ionic/components'
+
+
+@Component()
+@View({
+  templateUrl: 'pages/third-page.html',
+  directives: []
+})
+export class ThirdPage {
+  constructor(
+    nav: NavController
+  ) {
+    this.nav = nav
+  }
+  pop() {
+    this.nav.pop()
+  }
+}