From 6f3dd4eb7da9fde3e4f326a214866b5f5f88e110 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 29 Jun 2015 15:59:50 -0500 Subject: [PATCH] router wip --- ionic/components/app/app.js | 41 +++++++++++++++---- ionic/components/nav/test/basic/index.js | 4 +- .../nav/test/basic/pages/first-page.js | 14 ++++--- .../nav/test/basic/pages/second-page.js | 21 +++++----- .../nav/test/basic/pages/third-page.js | 21 +++++----- ionic/components/view/view-controller.js | 3 ++ ionic/routing/router.js | 38 ++++++++++------- 7 files changed, 89 insertions(+), 53 deletions(-) diff --git a/ionic/components/app/app.js b/ionic/components/app/app.js index 17f276f4d5..4b602dc953 100644 --- a/ionic/components/app/app.js +++ b/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(); diff --git a/ionic/components/nav/test/basic/index.js b/ionic/components/nav/test/basic/index.js index a8a1e4bc87..b4bf909ea5 100644 --- a/ionic/components/nav/test/basic/index.js +++ b/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', }, }); diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js index 4622c89239..dd508945a4 100644 --- a/ionic/components/nav/test/basic/pages/first-page.js +++ b/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: '' + diff --git a/ionic/components/nav/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.js index 144a0f12a6..8a319c707b 100644 --- a/ionic/components/nav/test/basic/pages/second-page.js +++ b/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: ` Second Page Header @@ -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' +// }) diff --git a/ionic/components/nav/test/basic/pages/third-page.js b/ionic/components/nav/test/basic/pages/third-page.js index d4cfdb4cfb..417cbb2669 100644 --- a/ionic/components/nav/test/basic/pages/third-page.js +++ b/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: ` Third Page Header @@ -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' +// }) diff --git a/ionic/components/view/view-controller.js b/ionic/components/view/view-controller.js index 1d5025b71a..b2c612741b 100644 --- a/ionic/components/view/view-controller.js +++ b/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); } diff --git a/ionic/routing/router.js b/ionic/routing/router.js index 52bd277707..92f6ac82ed 100644 --- a/ionic/routing/router.js +++ b/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,8 +19,10 @@ export class IonicRouter { } addRoute(name, routeConfig) { - let route = new IonicRoute(name, routeConfig); - this._routes.push(route); + if (name && routeConfig && routeConfig.path) { + let route = new IonicRoute(name, routeConfig); + this._routes.push(route); + } } init() { @@ -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) {