diff --git a/ionic/components/action-menu/action-menu.js b/ionic/components/action-menu/action-menu.js
index a250a85361..bdba9e28ce 100644
--- a/ionic/components/action-menu/action-menu.js
+++ b/ionic/components/action-menu/action-menu.js
@@ -8,15 +8,15 @@
import {NgIf, NgFor} from 'angular2/angular2';
import {View} from 'angular2/src/core/annotations_impl/view';
+import {Injectable} from 'angular2/di';
-import {Item, Icon} from 'ionic/ionic';
-import {IonicRoot} from '../app/app';
+import {Icon} from 'ionic/ionic';
+import {IonicApp} from '../app/app';
import * as util from 'ionic/util';
import {Overlay} from '../overlay/overlay';
import {IonicComponent} from '../../config/component';
import {Animation} from 'ionic/animations/animation';
-import {ClickBlock} from '../../util/click-block';
@IonicComponent(ActionMenu)
@@ -35,8 +35,9 @@ import {ClickBlock} from '../../util/click-block';
`,
- directives: [Item, Icon, NgIf, NgFor]
+ directives: [Icon, NgIf, NgFor]
})
+@Injectable()
export class ActionMenu extends Overlay {
static get config() {
@@ -48,8 +49,8 @@ export class ActionMenu extends Overlay {
}
}
- constructor() {
- super();
+ constructor(app: IonicApp) {
+ super(app);
this.extendOptions({
destructiveButtonClicked: util.noop,
@@ -85,17 +86,17 @@ export class ActionMenu extends Overlay {
*
* @return Promise that resolves when the action menu is open.
*/
- static open(opts) {
- return this.create(overlayType, ActionMenu, opts);
+ open(opts) {
+ return this.create(OVERLAY_TYPE, ActionMenu, opts);
}
- static get() {
- return Modal.getByType(overlayType);
+ get() {
+ return Modal.getByType(OVERLAY_TYPE);
}
}
-const overlayType = 'actionmenu';
+const OVERLAY_TYPE = 'actionmenu';
/**
diff --git a/ionic/components/action-menu/test/basic/index.js b/ionic/components/action-menu/test/basic/index.js
index a7519be293..2f9b55a854 100644
--- a/ionic/components/action-menu/test/basic/index.js
+++ b/ionic/components/action-menu/test/basic/index.js
@@ -4,15 +4,22 @@ import {IonicView} from 'ionic/ionic';
import {ActionMenu} from 'ionic/components/action-menu/action-menu';
-@Component({ selector: 'ion-view' })
+@Component({
+ selector: 'ion-app',
+ appInjector: [ActionMenu]
+})
@IonicView({
templateUrl: 'main.html'
})
class IonicApp {
+ constructor(ActionMenu: ActionMenu) {
+ this.ActionMenu = ActionMenu;
+ }
+
openMenu() {
- ActionMenu.open({
+ this.ActionMenu.open({
buttons: [
{ text: 'Share This' },
{ text: 'Move' }
@@ -31,6 +38,7 @@ class IonicApp {
if(index == 1) { return false; }
return true;
}
+
}).then(actionMenu => {
this.actionMenu = actionMenu;
});
diff --git a/ionic/components/app/app.js b/ionic/components/app/app.js
index 87e5d9180c..8b1b174528 100644
--- a/ionic/components/app/app.js
+++ b/ionic/components/app/app.js
@@ -1,4 +1,5 @@
import {bootstrap} from 'angular2/angular2';
+import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {ComponentRef, onDestroy, DomRenderer, ApplicationRef} from 'angular2/angular2';
@@ -17,57 +18,84 @@ import {IonicConfig} from '../../config/config';
import {ViewController} from '../view/view-controller';
-@Component({
- selector: 'ionic'
-})
-@View({
- template: '',
- directives: [PaneAnchor]
-})
-class IonicRootComponent extends ViewController {
- constructor(
- compiler: Compiler,
- elementRef: ElementRef,
- loader: DynamicComponentLoader,
- parentInjector: Injector
- ) {
- let injector = parentInjector;
- let ComponentType = null;
-
- if (appModules.length) {
- ComponentType = appModules.shift();
-
- injector = parentInjector.resolveAndCreateChild([
- bind(IonicConfig).toValue(ComponentType._config)
- ]);
- }
-
- super(null, compiler, elementRef, loader, injector);
- IonicRoot.component(this);
-
- if (ComponentType) {
- this.push(ComponentType);
- }
+export class IonicApp {
+ constructor() {
+ this.overlays = [];
}
-}
-@Directive({
- selector: 'template[pane-anchor]'
-})
-class PaneAnchor {
- constructor(@Parent() rootCmp: IonicRootComponent, elementRef: ElementRef, viewContainerRef: ViewContainerRef) {
- rootCmp.anchorElementRef(elementRef);
- rootCmp.anchorViewContainerRef(viewContainerRef);
+ /**
+ * Create and append the given component into the root
+ * element of the app.
+ *
+ * @param Component the ComponentType to create and insert
+ * @return Promise that resolves with the ContainerRef created
+ */
+ appendComponent(ComponentType: Type) {
+ return new Promise((resolve, reject) => {
+ let injector = this._ref.injector;
+ let compiler = injector.get(Compiler);
+ let viewMngr = injector.get(AppViewManager);
+ let rootComponentRef = this._ref._hostComponent;
+ let viewContainerLocation = rootComponentRef.location;
+
+ compiler.compileInHost(ComponentType).then(protoViewRef => {
+
+ let atIndex = 0;
+ let context = null;
+
+ let hostViewRef = viewMngr.createViewInContainer(
+ viewContainerLocation,
+ atIndex,
+ protoViewRef,
+ context,
+ injector);
+
+ hostViewRef.elementRef = new ElementRef(hostViewRef, 0);
+ hostViewRef.instance = viewMngr.getComponent(hostViewRef.elementRef);
+
+ hostViewRef.dispose = () => {
+ viewMngr.destroyViewInContainer(viewContainerLocation, 0, 0, hostViewRef.viewRef);
+ };
+
+ resolve(hostViewRef);
+
+ }).catch(err => {
+ console.error('IonicApp appendComponent:', err);
+ reject(err);
+ });
+ });
}
-}
-let appModules = [];
+ ref() {
+ if (arguments.length) {
+ this._ref = arguments[0];
+ }
+ return this._ref;
+ }
+
+}
export function ionicBootstrap(ComponentType, config) {
- ComponentType._config = config || new IonicConfig();
- appModules.push(ComponentType);
- bootstrap(IonicRootComponent);
+ return new Promise((resolve, reject) => {
+ let app = new IonicApp();
+ config = config || new IonicConfig();
+
+ let componentInjectableBindings = [
+ bind(IonicApp).toValue(app),
+ bind(IonicConfig).toValue(config)
+ ];
+
+ bootstrap(ComponentType, componentInjectableBindings).then(appRef => {
+ app.ref(appRef);
+ resolve(app);
+
+ }).catch(err => {
+ console.error('ionicBootstrap', err);
+ reject(err);
+ });
+
+ });
}
export function load(app) {
@@ -81,51 +109,3 @@ export function load(app) {
app.main(ionicBootstrap);
}
}
-
-
-class IonicAppRoot {
-
- /**
- * Create and append the given component into the root
- * element of the app.
- *
- * @param Component the ComponentType to create and insert
- * @return Promise that resolves with the ContainerRef created
- */
- append(ComponentType: Type) {
- let rootComponent = this.component();
- let injector = rootComponent.injector;
- let loader = rootComponent.loader;
- let elementRef = rootComponent.anchorElementRef();
-
- return new Promise((resolve, reject) => {
- rootComponent.compiler.compileInHost(ComponentType).then(componentProtoViewRef => {
-
- let containerRef = rootComponent.anchorViewContainerRef();
- let hostViewRef = containerRef.create(componentProtoViewRef, -1, null, injector);
-
- hostViewRef.elementRef = new ElementRef(hostViewRef, 0);
- hostViewRef.instance = loader._viewManager.getComponent(hostViewRef.elementRef);
-
- hostViewRef.dispose = () => {
- containerRef.remove( containerRef.indexOf(hostViewRef) );
- };
-
- resolve(hostViewRef);
- }).catch(err => {
- console.error('IonicAppRoot append:', err);
- reject(err);
- });
- });
- }
-
- component() {
- if (arguments.length) {
- this._cmp = arguments[0];
- }
- return this._cmp;
- }
-
-}
-
-export let IonicRoot = new IonicAppRoot();
diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index 475bcac720..f954a142fb 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -61,7 +61,7 @@ strong {
// Remove border when inside `a` element in IE 8/9/10.
ion-app img,
-ionic img {
+.ion-app img {
border: 0;
}
diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index a82c5c015e..f96c40a5f8 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -33,7 +33,7 @@ body {
}
ion-app,
-ionic {
+.ion-app {
display: flex;
flex-direction: column;
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index 413a96864b..5e2515d61c 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -27,7 +27,7 @@ html {
ion-app,
-ionic {
+.ion-app {
font-size: $font-size-base;
font-family: $font-family-base;
diff --git a/ionic/components/aside/test/basic/index.js b/ionic/components/aside/test/basic/index.js
index ac3bfd26a1..b970ea821b 100644
--- a/ionic/components/aside/test/basic/index.js
+++ b/ionic/components/aside/test/basic/index.js
@@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
@Component({
- selector: 'ion-view'
+ selector: 'ion-app'
})
@IonicView({
templateUrl: 'main.html'
diff --git a/ionic/components/button/test/basic/index.js b/ionic/components/button/test/basic/index.js
index de879ed5e5..d2ce3e90c1 100644
--- a/ionic/components/button/test/basic/index.js
+++ b/ionic/components/button/test/basic/index.js
@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/button/test/block/index.js b/ionic/components/button/test/block/index.js
index de879ed5e5..d2ce3e90c1 100644
--- a/ionic/components/button/test/block/index.js
+++ b/ionic/components/button/test/block/index.js
@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/button/test/clear/index.js b/ionic/components/button/test/clear/index.js
index de879ed5e5..d2ce3e90c1 100644
--- a/ionic/components/button/test/clear/index.js
+++ b/ionic/components/button/test/clear/index.js
@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/button/test/full/index.js b/ionic/components/button/test/full/index.js
index de879ed5e5..d2ce3e90c1 100644
--- a/ionic/components/button/test/full/index.js
+++ b/ionic/components/button/test/full/index.js
@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/button/test/icons/index.js b/ionic/components/button/test/icons/index.js
index de879ed5e5..d2ce3e90c1 100644
--- a/ionic/components/button/test/icons/index.js
+++ b/ionic/components/button/test/icons/index.js
@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/button/test/outline/index.js b/ionic/components/button/test/outline/index.js
index de879ed5e5..d2ce3e90c1 100644
--- a/ionic/components/button/test/outline/index.js
+++ b/ionic/components/button/test/outline/index.js
@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/button/test/sizes/index.js b/ionic/components/button/test/sizes/index.js
index de879ed5e5..d2ce3e90c1 100644
--- a/ionic/components/button/test/sizes/index.js
+++ b/ionic/components/button/test/sizes/index.js
@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/card/test/basic/index.js b/ionic/components/card/test/basic/index.js
index de879ed5e5..d2ce3e90c1 100644
--- a/ionic/components/card/test/basic/index.js
+++ b/ionic/components/card/test/basic/index.js
@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/checkbox/test/basic/index.js b/ionic/components/checkbox/test/basic/index.js
index 4c0b77ffbf..788449378a 100644
--- a/ionic/components/checkbox/test/basic/index.js
+++ b/ionic/components/checkbox/test/basic/index.js
@@ -4,7 +4,7 @@ import {FormBuilder, Validators, formDirectives} from 'angular2/forms';
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html',
directives: [formDirectives]
diff --git a/ionic/components/item/test/accessories/index.js b/ionic/components/item/test/accessories/index.js
index b2c0eeac99..828759a45c 100644
--- a/ionic/components/item/test/accessories/index.js
+++ b/ionic/components/item/test/accessories/index.js
@@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
@Component({
- selector: 'ion-view'
+ selector: 'ion-app'
})
@IonicView({
templateUrl: 'main.html'
diff --git a/ionic/components/item/test/basic/index.js b/ionic/components/item/test/basic/index.js
index b2c0eeac99..828759a45c 100644
--- a/ionic/components/item/test/basic/index.js
+++ b/ionic/components/item/test/basic/index.js
@@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
@Component({
- selector: 'ion-view'
+ selector: 'ion-app'
})
@IonicView({
templateUrl: 'main.html'
diff --git a/ionic/components/list/test/basic/index.js b/ionic/components/list/test/basic/index.js
index e6121ff363..ca42a5e898 100644
--- a/ionic/components/list/test/basic/index.js
+++ b/ionic/components/list/test/basic/index.js
@@ -3,7 +3,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {IonicView} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
diff --git a/ionic/components/list/test/infinite/index.js b/ionic/components/list/test/infinite/index.js
index 4e53cde03b..ae71ccd1ab 100644
--- a/ionic/components/list/test/infinite/index.js
+++ b/ionic/components/list/test/infinite/index.js
@@ -6,7 +6,7 @@ import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Content, List, Item} from 'ionic/ionic';
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
@View({
templateUrl: 'main.html',
directives: [Content, List, Item, ItemCellTemplate, NgFor]
diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.js
index d4a8e92b82..bbf805161d 100644
--- a/ionic/components/modal/modal.js
+++ b/ionic/components/modal/modal.js
@@ -1,7 +1,11 @@
+import {Injectable} from 'angular2/di';
+
import {Overlay} from '../overlay/overlay';
import {Animation} from '../../animations/animation';
+import {IonicApp} from '../app/app';
+@Injectable()
export class Modal extends Overlay {
static get config() {
@@ -13,26 +17,28 @@ export class Modal extends Overlay {
}
}
- constructor() {
- super();
+ constructor(app: IonicApp) {
+ // a modal created by the appInjector will inject an IonicApp
+ // a modal created by the user will not
+ super(app);
+
this.extendOptions({
enterAnimation: 'modal-slide-in',
leaveAnimation: 'modal-slide-out'
});
}
- /* Static Methods */
- static open(ComponentType: Type, opts) {
- return this.create(overlayType, ComponentType, opts);
+ open(ComponentType: Type, opts) {
+ return this.create(OVERLAY_TYPE, ComponentType, opts);
}
- static get() {
- return Modal.getByType(overlayType);
+ get() {
+ return this.getByType(OVERLAY_TYPE);
}
}
-const overlayType = 'modal';
+const OVERLAY_TYPE = 'modal';
/**
diff --git a/ionic/components/modal/test/basic/index.js b/ionic/components/modal/test/basic/index.js
index 3fa85695db..bc2160698e 100644
--- a/ionic/components/modal/test/basic/index.js
+++ b/ionic/components/modal/test/basic/index.js
@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {View} from 'angular2/src/core/annotations_impl/view';
import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {IonicView} from 'ionic/ionic';
+import {IonicView, IonicConfig} from 'ionic/ionic';
import {IonicComponent} from 'ionic/ionic';
import {Modal, NavController, NavParams, Animation, ActionMenu} from 'ionic/ionic';
@@ -35,13 +35,21 @@ class FadeOut extends Animation {
Animation.register('my-fade-out', FadeOut);
-@Component({ selector: 'ion-view' })
+@Component({
+ selector: 'ion-app',
+ appInjector: [Modal]
+})
@IonicView({
templateUrl: 'main.html'
})
-class IonicApp {
+class MyApp {
+
+ constructor(Modal: Modal) {
+ this.Modal = Modal;
+ }
+
openModal() {
- Modal.open(ContactModal, {
+ this.Modal.open(ContactModal, {
enterAnimation: 'my-fade-in',
leaveAnimation: 'my-fade-out',
handle: 'my-awesome-modal'
@@ -51,17 +59,20 @@ class IonicApp {
@IonicComponent(Modal)
@IonicView({
- template: '