router wip

ionic/components/app/app.js

@@ -4,6 +4,7 @@ import {Compiler} from 'angular2/angular2';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {bind} from 'angular2/di';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
+import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
 import {IonicRouter} from '../../routing/router';
 import {IonicConfig} from '../../config/config';
@@ -21,6 +22,34 @@ export class IonicApp {
     this.components = {};
   }
 
+  load(appRef) {
+    this.ref(appRef);
+    this.zone(this.injector().get(NgZone));
+  }
+
+  ref(val) {
+    if (arguments.length) {
+      this._ref = val;
+    }
+    return this._ref;
+  }
+
+  injector() {
+    return this._ref.injector;
+  }
+
+  zone(val) {
+    if (arguments.length) {
+      this._zone = val;
+    }
+    return this._zone;
+  }
+
+  stateChange() {
+    console.log('stage change');
+
+  }
+
   /**
    * Register a known component with a key, for easy lookups later.
    */
@@ -46,7 +75,7 @@ export class IonicApp {
    */
   appendComponent(ComponentType: Type) {
     return new Promise((resolve, reject) => {
-      let injector = this._ref.injector;
+      let injector = this.injector();
       let compiler = injector.get(Compiler);
       let viewMngr = injector.get(AppViewManager);
       let rootComponentRef = this._ref._hostComponent;
@@ -80,13 +109,6 @@ export class IonicApp {
     });
   }
 
-  ref(val) {
-    if (arguments.length) {
-      this._ref = val;
-    }
-    return this._ref;
-  }
-
   applyCss(bodyEle, platform, config) {
     let className = bodyEle.className;
 
@@ -157,6 +179,7 @@ export function ionicBootstrap(ComponentType, config, router) {
 
       // setup router
       router = router || new IonicRouter();
+      router.app(app);
 
       // add injectables that will be available to all child components
       let injectableBindings = [
@@ -166,7 +189,7 @@ export function ionicBootstrap(ComponentType, config, router) {
       ];
 
       bootstrap(ComponentType, injectableBindings).then(appRef => {
-        app.ref(appRef);
+        app.load(appRef);
 
         router.init();
 

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

@@ -22,11 +22,11 @@ export function main(ionicBootstrap) {
     },
     'SecondPage': {
       'path': '/secondpage',
-      'module': './second-page'
+      'module': 'dist/examples/nav/basic/pages/second-page',
     },
     'ThirdPage': {
       'path': '/thirdpage',
-      'module': './third-page'
+      'module': 'dist/examples/nav/basic/pages/third-page',
     },
   });
 

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

@@ -1,12 +1,14 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
-import {NavParams, Routable, Router_OLD, NavController} from 'ionic/ionic';
+import {IonicComponent, IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
+import {NavParams, NavController} from 'ionic/ionic';
 
 import {SecondPage} from './second-page'
 
-@Component({
-  selector: 'ion-view'
+
+@IonicComponent({
+  selector: 'ion-view',
+  route: {
+    path: '/firstpage'
+  }
 })
 @IonicView({
   template: '' +

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

@@ -1,10 +1,13 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView, Routable, Router_OLD, NavController, NavParams} from 'ionic/ionic';
+import {IonicComponent, IonicView, NavController, NavParams} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
-@Component({selector: 'ion-view'})
+@IonicComponent({
+  selector: 'ion-view',
+  route: {
+    path: '/secondpage'
+  }
+})
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
@@ -30,9 +33,6 @@ export class SecondPage {
     nav: NavController,
     params: NavParams
   ) {
-    // TODO: Shouldn't have to do this
-    Router_OLD.setNavController(nav);
-
     this.nav = nav;
     this.params = params;
     this.val = Math.round(Math.random() * 8999) + 1000;
@@ -50,7 +50,6 @@ export class SecondPage {
 
   viewLoaded() {
     console.log('viewLoaded second page');
-    this.router = SecondPage.router.invoke(this);
   }
 
   viewWillEnter() {
@@ -87,6 +86,6 @@ export class SecondPage {
 
 }
 
-new Routable(SecondPage, {
-  url: '/second-page'
-})
+// new Routable(SecondPage, {
+//   url: '/second-page'
+// })

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

@@ -1,9 +1,12 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView, Router_OLD, Routable, NavController} from 'ionic/ionic';
+import {IonicComponent, IonicView, NavController} from 'ionic/ionic';
 
 
-@Component({selector: 'ion-view'})
+@IonicComponent({
+  selector: 'ion-view',
+  route: {
+    path: '/thirdpage'
+  }
+})
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
@@ -20,9 +23,6 @@ export class ThirdPage {
     nav: NavController
   ) {
     this.nav = nav
-
-    // TODO: Shouldn't have to do this
-    Router_OLD.setNavController(nav);
   }
 
   pop() {
@@ -30,7 +30,6 @@ export class ThirdPage {
   }
 
   viewLoaded() {
-    this.router = ThirdPage.router.invoke(this);
     console.log('viewLoaded third page');
   }
 
@@ -69,6 +68,6 @@ export class ThirdPage {
 }
 
 
-new Routable(ThirdPage, {
-  url: '/third-page'
-})
+// new Routable(ThirdPage, {
+//   url: '/third-page'
+// })

ionic/components/view/view-controller.js

@@ -27,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);
 
@@ -308,6 +309,8 @@ export class ViewController {
       }
     });
 
+    this.app.stateChange();
+
     // allow clicks again
     ClickBlock(false);
   }

ionic/routing/router.js

@@ -8,6 +8,10 @@ export class IonicRouter {
     this.config(config);
   }
 
+  app(app) {
+    this._app = app;
+  }
+
   config(config) {
     for (let routeName in config) {
       this.addRoute(routeName, config[routeName]);
@@ -15,9 +19,11 @@ export class IonicRouter {
   }
 
   addRoute(name, routeConfig) {
+    if (name && routeConfig && routeConfig.path) {
       let route = new IonicRoute(name, routeConfig);
       this._routes.push(route);
     }
+  }
 
   init() {
     let rootViewCtrl = this.activeViewController();
@@ -54,31 +60,35 @@ export class IonicRouter {
   }
 
   push(viewCtrl, route) {
+    let self = this;
+
+    function run() {
+      self._app.zone().run(() => {
+        viewCtrl.push(route.cls).then(() => {
+          self.updateState(route);
+        });
+      });
+    }
+
     if (viewCtrl && route) {
       if (route.cls) {
-        viewCtrl.push(route.cls).then(() => {
-          this.pushCompleted(route);
-        });
+        run();
 
       } else if (route.module) {
-        System.import(route.module).then((m) => {
+        System.import(route.module).then(m => {
           if (m) {
             route.cls = m[route.name];
-            viewCtrl.push(route.cls).then(() => {
-              this.pushCompleted(route);
-            });
+            run();
           }
         });
       }
     }
   }
 
-  pushCompleted(route) {
-    console.log('pushCompleted', route);
-  }
-
-  updateState(route) {
+  updateState(activeRoute) {
+    console.log('updateState', activeRoute);
 
+    window.location.hash = activeRoute.path;
   }
 
   addViewController(viewCtrl) {