fix nav.setItems() / nav.setRoot()

ionic/components/aside/aside-toggle.ts

@@ -1,24 +1,23 @@
-import {forwardRef, Component, Host, View, EventEmitter, ElementRef} from 'angular2/angular2';
+import {Directive} from 'angular2/angular2';
 
-import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
-import {Button} from '../ion/components/button';
-import {IonicConfig} from '../../config/config';
-import {IonicDirective} from '../../config/annotations';
 
-@IonicDirective({
+
+@Directive({
   selector: '[aside-toggle]',
   host: {
     '(^click)': 'toggle($event)'
   }
 })
 export class AsideToggle {
+
   constructor(app: IonicApp) {
     //TODO(mlynch): don't hard code this, evaluate with ref system
     this.aside = app.getComponent('menu');
   }
+
   toggle(event) {
-    console.log('Toggling', this.aside)
     this.aside && this.aside.toggle();
   }
+
 }

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

@@ -1,14 +1,12 @@
-import {App, IonicApp, IonicView, NavController} from 'ionic/ionic';
+import {App, IonicApp, IonicView} from 'ionic/ionic';
 
 
-@IonicView({
-  templateUrl: 'home-page.html'
-})
-class HomePage {
-  constructor(app: IonicApp) {
-    this.app = app;
-  }
-}
+@IonicView({templateUrl: 'page1.html'})
+class Page1 {}
+
+
+@IonicView({templateUrl: 'page2.html'})
+class Page2 {}
 
 
 @App({
@@ -18,6 +16,21 @@ class E2EApp {
 
   constructor(app: IonicApp) {
     this.app = app;
-    this.rootView = HomePage;
+    this.rootView = Page1;
+
+    this.pages = [
+      { title: 'Page 1', component: Page1 },
+      { title: 'Page 2', component: Page2 },
+    ];
+  }
+
+  openPage(aside, page) {
+    // close the menu when clicking a link from the aside
+    aside.close();
+
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    let nav = this.app.getComponent('nav');
+    nav.setRoot(page.component);
   }
 }

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

@@ -1,26 +1,27 @@
 
-<ion-aside [content]="content">
+<ion-aside #aside [content]="content">
+
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
   </ion-toolbar>
-  <ion-list>
-    <ion-item>
-      About
-    </ion-item>
-    <ion-item>
-      Specials
-    </ion-item>
-    <ion-item>
-      Beer
-    </ion-item>
-    <ion-item>
-      Potatoes
-    </ion-item>
-    <ion-item (^click)="closeMenu()" id="e2eCloseMenu">
-      Close Menu
-    </ion-item>
-  </ion-list>
+
+  <ion-content>
+
+    <ion-list>
+
+      <ion-item *ng-for="#p of pages" (^click)="openPage(aside, p)">
+        {{p.title}}
+      </ion-item>
+
+      <ion-item aside-toggle id="e2eCloseMenu">
+        Close Menu
+      </ion-item>
+
+    </ion-list>
+
+  </ion-content>
+
 </ion-aside>
 
 
-<ion-nav [root]="rootView" #content [register]="content" register-id="myNav" swipe-back-enabled="false"></ion-nav>
+<ion-nav [root]="rootView" #content [register]="content" register-id="nav" swipe-back-enabled="false"></ion-nav>

ionic/components/aside/test/basic/page1.html

@@ -15,7 +15,7 @@
 
 <ion-content #content class="padding">
 
-  <h3>Content</h3>
+  <h3>Page 1</h3>
 
   <p>
     <button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>

ionic/components/aside/test/basic/page2.html

@@ -0,0 +1,24 @@
+
+<ion-navbar *navbar>
+
+  <ion-nav-items primary>
+    <button aside-toggle id="e2eHeaderToggleAside">
+      <icon name="ion-navicon"></icon>
+    </button>
+  </ion-nav-items>
+
+  <ion-title>
+    Aside
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content #content class="padding">
+
+  <h3>Page 2</h3>
+
+  <p>
+    <button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
+  </p>
+
+</ion-content>

ionic/components/view/view-controller.ts

@@ -163,7 +163,8 @@ export class ViewController extends Ion {
       }
     }
 
-    let component = null;
+    let componentObj = null;
+    let componentType = null;
     let viewItem = null;
 
     // create the ViewItems that go before the new active ViewItem in the stack
@@ -171,9 +172,14 @@ export class ViewController extends Ion {
     if (components.length > 1) {
       let newBeforeItems = components.slice(0, components.length - 1);
       for (let j = 0; j < newBeforeItems.length; j++) {
-        component = newBeforeItems[j];
-        if (component) {
-          viewItem = new ViewItem(this, component.component || component, component.params);
+        componentObj = newBeforeItems[j];
+
+        if (componentObj) {
+
+          // could be an object with a componentType property, or it is a componentType
+          componentType = componentObj.componentType || componentObj;
+
+          viewItem = new ViewItem(this, componentType, componentObj.params);
           viewItem.state = CACHED_STATE;
           viewItem.shouldDestroy = false;
           viewItem.shouldCache = false;
@@ -186,10 +192,11 @@ export class ViewController extends Ion {
 
     // get the component that will become the active item
     // it'll be the last one in the given components array
-    component = components[ components.length - 1 ];
+    componentObj = components[ components.length - 1 ];
+    componentType = componentObj.componentType || componentObj;
 
     // transition the leaving and entering
-    return this.push((component && component.component) || component, (component && component.params), opts);
+    return this.push(componentType, componentObj.params, opts);
   }
 
   setRoot(componentType, params = {}, opts = {}) {