overlay/bootstrap refactor

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';
         </div>
       </div>
     </div>`,
-  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';
 
 
 /**

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;
     });

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: '<template pane-anchor></template>',
-  directives: [PaneAnchor]
-})
-class IonicRootComponent extends ViewController {
-  constructor(
-    compiler: Compiler,
-    elementRef: ElementRef,
-    loader: DynamicComponentLoader,
-    parentInjector: Injector
-  ) {
-    let injector = parentInjector;
-    let ComponentType = null;
+export class IonicApp {
 
-    if (appModules.length) {
-      ComponentType = appModules.shift();
-
-      injector = parentInjector.resolveAndCreateChild([
-        bind(IonicConfig).toValue(ComponentType._config)
-      ]);
+  constructor() {
+    this.overlays = [];
   }
 
-    super(null, compiler, elementRef, loader, injector);
-    IonicRoot.component(this);
+  /**
+   * 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;
 
-    if (ComponentType) {
-      this.push(ComponentType);
+      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);
+      });
+    });
+  }
+
+  ref() {
+    if (arguments.length) {
+      this._ref = arguments[0];
+    }
+    return this._ref;
   }
 
 }
-}
-
-@Directive({
-  selector: 'template[pane-anchor]'
-})
-class PaneAnchor {
-  constructor(@Parent() rootCmp: IonicRootComponent, elementRef: ElementRef, viewContainerRef: ViewContainerRef) {
-    rootCmp.anchorElementRef(elementRef);
-    rootCmp.anchorViewContainerRef(viewContainerRef);
-  }
-}
-
-let appModules = [];
 
 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();

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;
 }
 

ionic/components/app/structure.scss

@@ -33,7 +33,7 @@ body {
 }
 
 ion-app,
-ionic {
+.ion-app {
   display: flex;
   flex-direction: column;
 

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;
 

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'

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'
 })

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'
 })

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'
 })

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'
 })

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'
 })

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'
 })

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'
 })

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'
 })

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]

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'

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'

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'
 })

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]

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';
 
 
 /**

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: '<ion-nav [initial]="initial"></ion-nav>'
+  template: '<ion-nav [root]="rootView"></ion-nav>'
 })
 export class ContactModal extends Modal {
   constructor() {
     super();
-    this.initial = ModalFirstPage;
+    this.rootView = ModalFirstPage;
   }
 }
 
 
-@Component({selector: 'ion-view'})
+@Component({
+  selector: 'ion-view',
+  appInjector: [Modal]
+})
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title><ion-nav-items primary><button primary (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
@@ -83,10 +94,12 @@ export class ContactModal extends Modal {
 })
 export class ModalFirstPage {
   constructor(
-    nav: NavController
+    nav: NavController,
+    Modal: Modal
   ) {
     this.nav = nav;
     this.val = Math.round(Math.random() * 8999) + 1000;
+    this.Modal = Modal;
   }
 
   push() {
@@ -94,7 +107,7 @@ export class ModalFirstPage {
   }
 
   closeModal() {
-    let modal = Modal.get();
+    let modal = this.Modal.get();
     modal.close();
   }
 
@@ -167,5 +180,11 @@ export class ModalSecondPage {
 }
 
 export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
+  // crazy config
+  let myConfig = new IonicConfig();
+
+  ionicBootstrap(MyApp, myConfig).then(app => {
+    // crazy run
+    console.log('ionicBootstrap', app);
+  });
 }

ionic/components/nav-bar/test/html-title/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'
 })

ionic/components/nav-bar/test/lopsided-buttons/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'
 })

ionic/components/nav/nav.js

@@ -13,7 +13,7 @@ import {ViewController} from '../view/view-controller';
 @Component({
   selector: 'ion-nav',
   properties: [
-    'initial'
+    'root'
   ],
   lifecycle: [onInit]
 })
@@ -34,7 +34,7 @@ export class Nav extends ViewController {
   }
 
   onInit() {
-    this.push(this.initial);
+    this.push(this.root);
   }
 
 }

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

@@ -1,13 +1,12 @@
-import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 
-import {IonicView, IonicConfig} from 'ionic/ionic';
+import {IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
 import {NavParams, Routable, Router, NavController} from 'ionic/ionic';
 
-import {SecondPage} from './pages/second-page'
+import {SecondPage} from './second-page'
 
 @Component({
-  selector: 'ion-view',
-  lifecycle: [onInit]
+  selector: 'ion-view'
 })
 @IonicView({
   template: '' +
@@ -30,13 +29,15 @@ import {SecondPage} from './pages/second-page'
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>'
 })
-class FirstPage {
+export class FirstPage {
   constructor(
     nav: NavController,
-    myConfig: IonicConfig
+    app: IonicApp,
+    config: IonicConfig
   ) {
 
-    console.log('myConfig', myConfig);
+    console.log('app', app)
+    console.log('config', config)
 
     // TODO: Shouldn't have to do this
     Router.setNavController(nav);
@@ -44,16 +45,12 @@ class FirstPage {
     this.nav = nav;
     this.val = Math.round(Math.random() * 8999) + 1000;
 
-
     this.pushPage = SecondPage;
     this.pushData = {
       id: 420
     }
   }
 
-  onInit() {
-  }
-
   viewLoaded() {
     this.router = FirstPage.router.invoke(this);
     console.log('viewLoaded first page');
@@ -99,10 +96,3 @@ class FirstPage {
 new Routable(FirstPage, {
   url: '/first-page'
 })
-
-
-export function main(ionicBootstrap) {
-  let myConfig = new IonicConfig();
-
-  ionicBootstrap(FirstPage, myConfig);
-}

ionic/components/overlay/overlay.js

@@ -1,4 +1,4 @@
-import {IonicRoot} from '../app/app';
+import {IonicApp} from '../app/app';
 import {Animation} from '../../animations/animation';
 import {ClickBlock} from '../../util/click-block';
 import * as util from 'ionic/util';
@@ -6,18 +6,50 @@ import * as util from 'ionic/util';
 
 export class Overlay {
 
-  constructor() {
-    this.zIndex = Root_ZIndex;
-    for (let i = 0; i < overlayStack.length; i++) {
-      this.zIndex = overlayStack[i].zIndex + 1;
-    }
-    overlayStack.push(this);
+  constructor(app: IonicApp) {
+    this.setApp(app);
   }
 
-  /* Instance Methods */
-  open(opts) {
+  setApp(app) {
+    this.app = app;
+  }
+
+  create(overlayType, ComponentType: Type, opts) {
+    return new Promise((resolve, reject) => {
+      let app = this.app;
+
+      app.appendComponent(ComponentType).then(ref => {
+        let overlay = ref.instance;
+        overlay.setApp(app);
+        overlay._type = overlayType;
+        overlay._handle = opts && opts.handle;
+        overlay._domElement = ref.elementRef.domElement;
+        overlay.extendOptions(opts);
+
+        overlay.zIndex = ROOT_Z_INDEX;
+        for (let i = 0; i < app.overlays.length; i++) {
+          if (app.overlays[i].zIndex >= overlay.zIndex) {
+            overlay.zIndex = app.overlays[i].zIndex + 1;
+          }
+        }
+        app.overlays.push(overlay);
+
+        overlay._open(opts);
+
+        resolve(overlay);
+
+      }).catch(err => {
+        console.error('Overlay create:', err);
+        reject(err);
+      });
+
+    });
+  }
+
+  _open(opts) {
     let animationName = (opts && opts.animation) || this.options.enterAnimation;
     let enterAnimation = Animation.create(this._domElement, animationName);
+    enterAnimation.before.addClass('ion-app');
     enterAnimation.before.addClass('show-overlay');
     ClickBlock(true, enterAnimation.duration() + 200);
 
@@ -38,7 +70,7 @@ export class Overlay {
       ClickBlock(true, leavingAnimation.duration() + 200);
 
       leavingAnimation.play().then(() => {
-        this._clean();
+        this._dispose();
         ClickBlock(false);
         leavingAnimation.dispose();
         resolve();
@@ -46,56 +78,40 @@ export class Overlay {
     });
   }
 
+  getByType(overlayType) {
+    if (this.app) {
+      for (let i = this.app.overlays.length - 1; i >= 0; i--) {
+        if (overlayType === this.app.overlays[i]._type) {
+          return this.app.overlays[i];
+        }
+      }
+    }
+    return null;
+  }
+
+  getByHandle(handle) {
+    if (this.app) {
+      for (let i = this.app.overlays.length - 1; i >= 0; i--) {
+        if (handle === this.app.overlays[i]._handle) {
+          return this.app.overlays[i];
+        }
+      }
+    }
+    return null;
+  }
+
   extendOptions(opts) {
     if (!this.options) this.options = {};
     util.extend(this.options, opts);
   }
 
-  _clean() {
-    this._dispose && this._dispose();
-    util.array.remove(overlayStack, this);
+  _dispose() {
+    this.dispose && this.dispose();
+    if (this.app) {
+      util.array.remove(this.app.overlays, this);
     }
-
-
-  /* Static Methods */
-  static create(overlayType, ComponentType: Type, opts) {
-    return new Promise((resolve, reject) => {
-      IonicRoot.append(ComponentType).then(ref => {
-        let overlay = ref.instance;
-        overlay._type = overlayType;
-        overlay._handle = opts && opts.handle;
-        overlay._dispose = ref.dispose;
-        overlay._domElement = ref.elementRef.domElement;
-        overlay.extendOptions(opts);
-        overlay.open(opts);
-        resolve(overlay);
-
-      }).catch(err => {
-        console.error('Overlay create:', err);
-        reject(err);
-      });
-    });
-  }
-
-  static getByType(overlayType) {
-    for (let i = overlayStack.length - 1; i >= 0; i--) {
-      if (overlayType === overlayStack[i]._type) {
-        return overlayStack[i];
-      }
-    }
-    return null;
-  }
-
-  static getByHandle(handle) {
-    for (let i = overlayStack.length - 1; i >= 0; i--) {
-      if (handle === overlayStack[i]._handle) {
-        return overlayStack[i];
-      }
-    }
-    return null;
   }
 
 }
 
-let overlayStack = [];
-const Root_ZIndex = 1000;
+const ROOT_Z_INDEX = 1000;

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

@@ -1,18 +1,14 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
 
-//import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
 import {IonicView} from 'ionic/ionic';
 
 
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
 @IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {
-    console.log('IonicApp Start')
-
     // var fb = new FormBuilder();
     // this.form = fb.group({
     //   preferredApple: ['mac', Validators.required],

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

@@ -1,10 +1,10 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
 
 import {IonicView} from 'ionic/ionic';
 
 
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
 @IonicView({
   templateUrl: 'main.html'
 })

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

@@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
 
 
 @Component({
-  selector: 'ion-view'
+  selector: 'ion-app'
 })
 @IonicView({
   templateUrl: 'main.html'

ionic/components/slides/test/continuous/index.js

@@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
 
 
 @Component({
-  selector: 'ion-view'
+  selector: 'ion-app'
 })
 @IonicView({
   template: `

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

@@ -4,7 +4,7 @@ import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
 import {IonicView} from 'ionic/ionic';
 
 
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
 @IonicView({
   templateUrl: 'main.html'
 })

ionic/components/tabs/test/advanced/index.js

@@ -15,7 +15,7 @@ import {IonicView, NavController} from 'ionic/ionic';
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>'
 })
-class IonicApp {
+class SignIn {
   constructor(nav: NavController) {
     this.nav = nav;
   }
@@ -175,6 +175,19 @@ class Tab2Page3 {
   }
 }
 
+
+@Component({
+  selector: 'ion-app'
+})
+@IonicView({
+  template: '<ion-nav [root]="rootView"></ion-nav>'
+})
+class IonicApp {
+  constructor() {
+    this.rootView = SignIn;
+  }
+}
+
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);
 }

ionic/components/tabs/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'
 })

ionic/components/tabs/test/tab-bar-bottom/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'
 })

ionic/components/tabs/test/tab-bar-icons/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'
 })

ionic/components/tabs/test/tab-bar-top/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'
 })

ionic/config/ionic-directive.js

@@ -92,7 +92,7 @@ function appendModeConfig(ComponentType) {
     };
   }
 
-  let id = config.classId || config.selector.replace('ion-', '');
+  let id = config.classId || (config.selector && config.selector.replace('ion-', ''));
   config.host['class'] = (id + ' ' + id + '-' + platformMode);
 
   return config;

ionic/config/ionic-view.js

@@ -6,7 +6,6 @@ import {
   Aside, Content, Refresher,
   Slides, Slide, SlidePager,
   Tabs, Tab,
-  ActionMenu,
   List, Item,
   Icon,
   Checkbox, Switch, Label, Input, Segment, SegmentButton,
@@ -28,9 +27,6 @@ export class IonicView extends View {
       Slides, Slide, SlidePager,
       Tabs, Tab,
 
-      // Overlays
-      ActionMenu,
-
       // Media
       Icon,
 
@@ -46,3 +42,4 @@ export class IonicView extends View {
     super(config);
   }
 }
+

ionic/init.js

@@ -14,7 +14,7 @@
     }
   }
 
-  var ele = document.querySelectorAll('ionic');
+  var ele = document.querySelectorAll('[module]');
   for (var i = 0; i < ele.length; i++) {
     importApp(ele[i].getAttribute('module'));
   }

ionic/ionic.js

@@ -1,7 +1,8 @@
 
-export * from 'ionic/config/component'
 export * from 'ionic/config/config'
-export * from 'ionic/config/view'
+export * from 'ionic/config/ionic-directive'
+export * from 'ionic/config/ionic-view'
+
 export * from 'ionic/components'
 export * from 'ionic/platform/platform'
 export * from 'ionic/routing/router'

scripts/e2e/angular.template.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-
-  <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-
-  <link href="/css/ionic.css" rel="stylesheet">
-  <style>
-    /* hack to create tall scrollable areas for testing using <f></f> */
-    f {
-      display: block;
-      margin: 15px auto;
-      max-width: 150px;
-      height: 150px;
-      background: blue;
-    }
-    f:last-of-type {
-      background: red;
-    }
-    ion-tab:nth-of-type(2) f,
-    .green f {
-      background: green;
-      max-width: 250px;
-      height: 100px;
-    }
-    ion-tab:nth-of-type(3) f,
-    .yellow f {
-      background: yellow;
-      width: 100px;
-      height: 50px;
-    }
-  </style>
-</head>
-<body>
-
-  <ion-app>
-    Loading...
-  </ion-app>
-
-  <!-- scripts auto-added by angular build process -->
-  $SCRIPTS$
-
-  <!-- web animations polyfill for non-chrome browsers -->
-  <script src="/vendor/web-animations-js/web-animations.min.js"></script>
-  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
-
-</body>
-</html>

scripts/e2e/bundle.template.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
-  <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
-  <link href="/css/ionic.css" rel="stylesheet">
-</head>
-<body>
-
-  <ion-app>
-    Loading...
-  </ion-app>
-
-  <script src="http://localhost:8001/angular2.bundle.js"></script>
-
-  <script>
-  System.paths = {
-    '*': '/*.js',
-    'rx': 'rx.js'
-  };
-  register(System);
-  cjs(System);
-
-  </script>
-
-  <script type="text/javascript">
-    System.import('src/components/segment/test/basic/index').then(function(m) { m.main(); }, console.error.bind(console))
-  </script>
-</body>
-</html>

scripts/e2e/ionic.template.html

@@ -35,9 +35,9 @@
 </head>
 <body>
 
-  <ionic module="{{MODULE}}">
+  <ion-app module="{{MODULE}}">
     <ion-loading-icon></ion-loading-icon>
-  </ionic>
+  </ion-app>
 
   <!-- angular2 dependencies -->
   <script src="/scripts/resources/traceur-runtime.js" type="text/javascript"></script>