feat(nav): add NavRegistry

ionic/components/app/app.ts

@@ -13,6 +13,7 @@ import {Modal} from '../modal/modal';
 import {Popup} from '../popup/popup';
 import {FocusHolder} from '../form/focus-holder';
 import {Events} from '../../util/events';
+import {NavRegistry} from '../nav/nav-registry';
 
 /**
  * @name IonicApp
@@ -278,7 +279,7 @@ function initApp(window, document, config, platform) {
  * @param {TODO} config  TODO
  * @return {Promise} TODO
  */
-export function ionicBootstrap(rootComponentType, config) {
+export function ionicBootstrap(rootComponentType, views, config) {
   return new Promise(resolve => {
     try {
       // get the user config, or create one if wasn't passed in
@@ -297,6 +298,7 @@ export function ionicBootstrap(rootComponentType, config) {
       let modal = new Modal(app, config);
       let popup = new Popup(app, config);
       let events = new Events();
+      let navRegistry = new NavRegistry(views);
 
       // add injectables that will be available to all child components
       let appBindings = Injector.resolve([
@@ -309,7 +311,8 @@ export function ionicBootstrap(rootComponentType, config) {
         bind(Popup).toValue(popup),
         bind(Events).toValue(events),
         ROUTER_BINDINGS,
-        bind(LocationStrategy).toClass(HashLocationStrategy)
+        bind(LocationStrategy).toClass(HashLocationStrategy),
+        bind(NavRegistry).toValue(navRegistry)
       ]);
 
       bootstrap(rootComponentType, appBindings).then(appRef => {

ionic/components/nav/nav-push.ts

@@ -1,5 +1,6 @@
 import {Directive} from 'angular2/angular2';
 import {NavController} from './nav-controller';
+import {NavRegistry} from './nav-registry';
 
 /**
  * TODO
@@ -20,19 +21,30 @@ export class NavPush {
    * TODO
    * @param {NavController} nav  TODO
    */
-  constructor(nav: NavController) {
+  constructor(nav: NavController, registry: NavRegistry) {
     this.nav = nav;
+    this.registry = registry;
   }
 
   onClick(event) {
+    let destination, params;
+
     if (this.instruction instanceof Array) {
       if (this.instruction.length > 2) {
         throw 'Too many [nav-push] arguments, expects [View, { params }]'
       }
-      this.nav.push(this.instruction[0], this.instruction[1]);
+      destination = this.instruction[0];
+      params = this.instruction[1] || this.params;
     } else {
-      this.nav.push(this.instruction, this.params);
+      destination = this.instruction;
+      params = this.params;
     }
+
+    if (typeof destination === "string") {
+      destination = this.registry.get(destination);
+    }
+
+    this.nav.push(destination, params);
   }
 }
 

ionic/components/nav/nav-registry.ts

@@ -0,0 +1,17 @@
+
+/**
+ * Map of possible views that can be navigated to using an Ionic NavController
+ */
+export class NavRegistry {
+  constructor(views) {
+    this._views = new Map(views.map(view => [view.name, view]));
+  }
+
+  get(viewName) {
+    return this._views.get(viewName);
+  }
+
+  set(view) {
+    this._views.set(view.name, view);
+  }
+}

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

@@ -17,8 +17,10 @@ import {NavParams, NavController} from 'ionic/ionic';
     '<ion-content padding>' +
       '<p>{{title}}</p>' +
       '<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>' +
-      '<p><button [nav-push]="[pushPage, {id: 42}]">Push w/ nav-push array (Go to 2nd)</button></p>' +
+      '<p><button [nav-push]="[pushPage, {id: 42}]">Push w/ [nav-push] array (Go to 2nd)</button></p>' +
-      '<p><button [nav-push]="pushPage" [nav-params]="{id:40}">Push w/ nav-push and nav-params (Go to 2nd)</button></p>' +
+      '<p><button [nav-push]="pushPage" [nav-params]="{id:40}">Push w/ [nav-push] and [nav-params] (Go to 2nd)</button></p>' +
+      '<p><button [nav-push]="[\'FirstPage\', {id: 22}]">Push w/ [nav-push] array and string view name (Go to 2nd)</button></p>' +
+      '<p><button nav-push="FirstPage" [nav-params]="{id: 23}">Push w/ nav-push and [nav-params] (Go to 2nd)</button></p>' +
       '<p><button (click)="setViews()">setViews() (Go to 3rd, no history)</button></p>' +
       '<icon class="ion-ios-arrow-back"></icon>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -127,7 +129,8 @@ class ThirdPage {
 
 
 @App({
-  template: '<ion-nav [root]="root"></ion-nav>'
+  template: '<ion-nav [root]="root"></ion-nav>',
+  views: [FirstPage, SecondPage, ThirdPage]
 })
 class E2EApp {
   constructor() {

ionic/config/decorators.ts

@@ -180,7 +180,7 @@ export function App(args={}) {
     // redefine with added annotations
     Reflect.defineMetadata('annotations', annotations, cls);
 
-    ionicBootstrap(cls, args.config);
+    ionicBootstrap(cls, args.views, args.config);
 
     return cls;
   }