Dynamic injector

ionic/components/action-menu/action-menu.js

@@ -1,12 +1,14 @@
-import {DynamicComponentLoader, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
+import {DynamicComponentLoader, ComponentLaoder, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
 import {bind, Injector} from 'angular2/di';
 import {Promise} from 'angular2/src/facade/async';
 import {isPresent, Type} from 'angular2/src/facade/lang';
 
-import {Component, Directive, Item, Icon} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 
+import {Item, Icon} from 'ionic/ionic'
+import {Ionic} from 'ionic/components/app/app'
 import {IonicComponent} from 'ionic/config/component'
 import {raf, ready} from 'ionic/util/dom'
 
@@ -47,15 +49,22 @@ import {Animation} from 'ionic/animations/animation';
   directives: [Item,Icon]
 })
 export class ActionMenu {
-  constructor(
-    elementRef: ElementRef
-  ) {
+  constructor(elementRef: ElementRef) {
     this.domElement = elementRef.domElement
     this.config = ActionMenu.config.invoke(this)
+    console.log('ActionMenu: Component Created', this.domElement);
   }
 
   static open(opts) {
-    console.log('Opening menu', opts);
+    console.log('Opening menu', opts, Ionic);
+
+    ActionMenu._inject();
+  }
+
+  static _inject() {
+    Ionic.appendToRoot(ActionMenu).then(() => {
+      console.log('Action Menu appended');
+    })
   }
 
 }

ionic/components/action-menu/test/basic/index.js

@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/angular2'
+import {bootstrap, ElementRef} from 'angular2/angular2'
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
@@ -11,10 +11,10 @@ import {ActionMenu} from 'ionic/components/action-menu/action-menu';
   templateUrl: 'main.html',
   directives: [Button, Content]
 })
-class IonicApp extends Ionic {
-  constructor() {
-    super();
+class IonicApp {
+  constructor(elementRef: ElementRef) {
     console.log('IonicApp Start')
+    Ionic.setRootElementRef(elementRef);
   }
 
   openMenu() {
@@ -27,6 +27,6 @@ class IonicApp extends Ionic {
 
 export function main() {
   bootstrap(IonicApp).then((appRef) => {
-    appRef.hostComponent.setAppRef(appRef);
+    Ionic.setAppRef(appRef);
   })
 }

ionic/components/app/app.js

@@ -1,15 +1,48 @@
-import {ApplicationRef} from 'angular2/angular2';
+import {DynamicComponentLoader, ComponentLaoder, ElementRef, ComponentRef, onDestroy, DomRenderer, ApplicationRef} from 'angular2/angular2';
+import {Promise} from 'angular2/src/facade/async';
+import {isPresent, Type} from 'angular2/src/facade/lang';
 
-export class Ionic {
+class IonicAppRoot {
   constructor() {
-
   }
 
   setAppRef(appRef: ApplicationRef) {
     this.appRef = appRef;
-    console.log('Got app ref', appRef);
+    console.log('IonicApp: setAppRef', appRef);
   }
   getAppRef() {
     return this.appRef;
   }
+
+  setRootElementRef(elementRef: ElementRef) {
+    this.rootElementRef = elementRef;
+    console.log('IonicApp: setRootElementRef', elementRef);
+  }
+  getRootElementRef() {
+    return this.rootElementRef;
+  }
+
+  appendToRoot(Component: Type) {
+    var appRef = Ionic.getAppRef();
+    var injector = appRef.injector;
+    var loader = injector.get(DynamicComponentLoader);
+    var renderer = injector.get(DomRenderer);
+    var elementRef = Ionic.getRootElementRef();
+
+    console.log('Ionic: appendToRoot', loader, renderer, elementRef);
+
+    var promise = new Promise(resolve => {
+      return loader.loadIntoNewLocation(Component, elementRef).then((containerRef) => {
+        var newEl = renderer.getHostElement(containerRef.hostView.render);
+
+        document.body.querySelector('ion-app').appendChild(newEl);
+
+        resolve(newEl);
+      });
+    });
+
+    return promise;
+  }
 }
+
+export let Ionic = new IonicAppRoot();