router wip

ionic/components/app/app.js

@@ -45,11 +45,8 @@ export class IonicApp {
     return this._zone;
   }
 
-  stateChange(activeView) {
-    console.log('stage change', activeView);
-
-
-
+  stateChange(activeView, viewCtrl) {
+    this.router.stateChange(activeView, viewCtrl);
   }
 
   /**
@@ -183,6 +180,9 @@ export function ionicBootstrap(ComponentType, config, router) {
       router = router || new IonicRouter();
       router.app(app);
 
+      // TODO: don't wire these together
+      app.router = router;
+
       // add injectables that will be available to all child components
       let injectableBindings = [
         bind(IonicApp).toValue(app),

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

@@ -1,14 +1,11 @@
-import {IonicComponent, IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
+import {IonicComponent, IonicView, IonicConfig, IonicApp, Routable} from 'ionic/ionic';
 import {NavParams, NavController} from 'ionic/ionic';
 
 import {SecondPage} from './second-page'
 
 
 @IonicComponent({
-  selector: 'ion-view',
-  route: {
-    path: '/firstpage'
-  }
+  selector: 'ion-view'
 })
 @IonicView({
   template: '' +
@@ -49,7 +46,6 @@ export class FirstPage {
   }
 
   viewLoaded() {
-    //this.router = FirstPage.router.invoke(this);
     console.log('viewLoaded first page');
   }
 
@@ -82,6 +78,6 @@ export class FirstPage {
   }
 }
 
-// new Routable(FirstPage, {
-//   url: '/first-page'
-// })
+new Routable(FirstPage, {
+  path: '/firstpage'
+});

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

@@ -1,4 +1,4 @@
-import {IonicComponent, IonicView, NavController, NavParams} from 'ionic/ionic';
+import {IonicComponent, IonicView, Routable, NavController, NavParams} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
@@ -78,6 +78,6 @@ export class SecondPage {
 
 }
 
-// new Routable(SecondPage, {
-//   url: '/second-page'
-// })
+new Routable(SecondPage, {
+  path: '/secondpage'
+});

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

@@ -1,4 +1,4 @@
-import {IonicComponent, IonicView, NavController} from 'ionic/ionic';
+import {IonicComponent, IonicView, Routable, NavController} from 'ionic/ionic';
 
 
 @IonicComponent({
@@ -59,7 +59,6 @@ export class ThirdPage {
 
 }
 
-
-// new Routable(ThirdPage, {
-//   url: '/third-page'
-// })
+new Routable(ThirdPage, {
+  path: '/thirdpage'
+});

ionic/components/view/view-controller.js

@@ -4,6 +4,7 @@ import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_compone
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
 import {Injector, bind} from 'angular2/di';
 
+import {IonicApp} from '../app/app';
 import {IonicRouter} from '../../routing/router';
 import {ViewItem} from './view-item';
 import {NavController} from '../nav/nav-controller';
@@ -26,6 +27,7 @@ export class ViewController {
     this.loader = injector.get(DynamicComponentLoader);
     this.viewMngr = injector.get(AppViewManager);
     this.router = injector.get(IonicRouter);
+    this.app = injector.get(IonicApp);
 
     this.router.addViewController(this);
 
@@ -72,6 +74,9 @@ export class ViewController {
     // add the item to the stack
     this.add(enteringItem);
 
+    // notify app of the state change
+    this.app.stateChange(enteringItem, this);
+
     // start the transition
     this.transition(enteringItem, leavingItem, opts, () => {
       resolve();
@@ -103,6 +108,9 @@ export class ViewController {
     // item on the history stack.
     let enteringItem = this.getPrevious(leavingItem);
     if (enteringItem) {
+      // notify app of the state change
+      this.app.stateChange(enteringItem, this);
+
       // start the transition
       this.transition(enteringItem, leavingItem, opts, () => {
         // transition completed, destroy the leaving item
@@ -229,6 +237,9 @@ export class ViewController {
           enteringItem.didEnter();
           leavingItem.didLeave();
 
+          // notify app of the state change
+          this.app.stateChange(enteringItem, this);
+
         } else {
           // cancelled the swipe back, return items to original state
           leavingItem.state = ACTIVE_STATE;

ionic/config/annotations.js

@@ -1,5 +1,4 @@
-import {coreDirectives} from 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {coreDirectives, Component, Directive} from 'angular2/angular2';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import * as util from 'ionic/util';

ionic/routing/router.js

@@ -10,6 +10,8 @@ export class IonicRouter {
 
   app(app) {
     this._app = app;
+
+
   }
 
   config(config) {
@@ -20,7 +22,7 @@ export class IonicRouter {
 
   addRoute(name, routeConfig) {
     if (name && routeConfig && routeConfig.path) {
-      let route = new IonicRoute(name, routeConfig);
+      let route = new Route(name, routeConfig);
       this._routes.push(route);
     }
   }
@@ -85,10 +87,25 @@ export class IonicRouter {
     }
   }
 
-  updateState(activeRoute) {
-    console.log('updateState', activeRoute);
+  stateChange(activeView) {
+    console.log('stateChange', activeView);
 
-    window.location.hash = activeRoute.path;
+    let routeConfig = activeView.ComponentType.route;
+
+    let route = null;
+    for (let i = 0, ii = this._routes.length; i < ii; i++) {
+      route = this._routes[i];
+
+      if (route.path == routeConfig.path) {
+        return this.updateState(route);
+      }
+    }
+  }
+
+  updateState(route) {
+    console.log('updateState', route);
+
+    window.location.hash = route.path;
   }
 
   addViewController(viewCtrl) {
@@ -113,7 +130,14 @@ export class IonicRouter {
 }
 
 
-export class IonicRoute {
+export class Routable {
+  constructor(cls, routeConfig) {
+    cls.route = routeConfig;
+  }
+}
+
+
+class Route {
   constructor(name, routeConfig) {
     this.name = name;
     this.cls = null;
@@ -279,7 +303,7 @@ export class RouterController {
   }
 }
 
-export class Route {
+export class Route_OLD {
   constructor(url, handler) {
     this.url = url;
     this.handler = handler;
@@ -339,34 +363,34 @@ export class Route {
  * This makes it easy to auto emit URLs for routables pushed
  * onto the stack.
  */
-export class Routable {
-  constructor(componentClass, routeInfo) {
-    this.componentClass = componentClass;
-    this.routeInfo = routeInfo;
+// export class Routable {
+//   constructor(componentClass, routeInfo) {
+//     this.componentClass = componentClass;
+//     this.routeInfo = routeInfo;
 
-    //console.log('New routable', componentClass, routeInfo);
-    Router_OLD.on(this.routeInfo.url, (routeParams) => {
-      console.log('Routable matched', routeParams, this.componentClass);
-      Router_OLD.push(this.componentClass, routeParams);
-    });
+//     //console.log('New routable', componentClass, routeInfo);
+//     Router_OLD.on(this.routeInfo.url, (routeParams) => {
+//       console.log('Routable matched', routeParams, this.componentClass);
+//       Router_OLD.push(this.componentClass, routeParams);
+//     });
 
-    componentClass.router = this;
-  }
-  invoke(componentInstance) {
-    // Called on viewLoaded
-    this.componentInstance = componentInstance;
+//     componentClass.router = this;
+//   }
+//   invoke(componentInstance) {
+//     // Called on viewLoaded
+//     this.componentInstance = componentInstance;
 
-    // Bind some lifecycle events
-    componentInstance._viewWillEnter.observer({
-      next: () => {
-        Router_OLD.emit(this.routeInfo.url);
-      }
-    });
+//     // Bind some lifecycle events
+//     componentInstance._viewWillEnter.observer({
+//       next: () => {
+//         Router_OLD.emit(this.routeInfo.url);
+//       }
+//     });
 
-    return this;
-  }
+//     return this;
+//   }
 
-}
+// }
 
 export var Router_OLD = new RouterController();