alpha33

ionic/components/action-menu/action-menu.scss

@@ -7,9 +7,6 @@ $action-menu-max-width:                 520px !default;
 $action-menu-background-color:          rgba(243,243,243,.95) !default;
 $action-menu-button-text-color:         #007aff !default;
 
-$action-menu-backdrop-color:            #000 !default;
-$action-menu-backdrop-active-opacity:   0.4 !default;
-
 $action-menu-options-bg-color:          #f1f2f3 !default;
 $action-menu-options-bg-active-color:   #e4e5e7 !default;
 $action-menu-options-text-color:        #007aff !default;
@@ -25,19 +22,9 @@ $action-menu-options-border-color:      #d1d3d6 !default;
   z-index: $z-index-overlay;
 }
 
-.action-menu-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: $action-menu-backdrop-color;
-  opacity: 0;
-  tranform: translateZ(0);
-}
-
-.action-menu-wrapper {
+action-menu-wrapper {
   position: absolute;
+  z-index: $z-index-overlay-wrapper;
   bottom: 0;
   left: 0;
   right: 0;

ionic/components/action-menu/action-menu.ts

@@ -15,9 +15,9 @@ import * as util from 'ionic/util';
 
 
 @View({
-  template: '' +
-    '<div class="action-menu-backdrop" (click)="_cancel()" tappable></div>' +
-    '<div class="action-menu-wrapper">' +
+  template:
+    '<backdrop (click)="_cancel()" tappable></backdrop>' +
+    '<action-menu-wrapper>' +
       '<div class="action-menu-container">' +
         '<div class="action-menu-group action-menu-options">' +
           '<div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>' +
@@ -33,7 +33,7 @@ import * as util from 'ionic/util';
           '<button (click)="_cancel()"><i class="icon" [class]="cancelIcon"></i> {{cancelText}}</button>' +
         '</div>' +
       '</div>' +
-    '</div>',
+    '</action-menu-wrapper>',
   directives: [NgFor, NgIf, CSSClass, TapClick]
 })
 class ActionMenuDirective {
@@ -100,8 +100,8 @@ class ActionMenuAnimation extends Animation {
     super(element);
     this.easing('cubic-bezier(.36, .66, .04, 1)').duration(400);
 
-    this.backdrop = new Animation(element.querySelector('.action-menu-backdrop'));
-    this.wrapper = new Animation(element.querySelector('.action-menu-wrapper'));
+    this.backdrop = new Animation(element.querySelector('backdrop'));
+    this.wrapper = new Animation(element.querySelector('action-menu-wrapper'));
 
     this.add(this.backdrop, this.wrapper);
   }

ionic/components/action-menu/test/basic/e2e.ts

@@ -4,5 +4,5 @@ it('should open action menu', function() {
 });
 
 it('should close with backdrop click', function() {
-  element(by.css('.action-menu-backdrop')).click();
+  element(by.css('backdrop')).click();
 });

ionic/components/app/app.ts

@@ -1,6 +1,4 @@
-import {bootstrap, Compiler, ElementRef, NgZone, bind, ViewRef} from 'angular2/angular2';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
+import {Component, View, bootstrap, ElementRef, NgZone, bind, DynamicComponentLoader, Injector} from 'angular2/angular2';
 
 import {IonicRouter} from '../../routing/router';
 import {IonicConfig} from '../../config/config';
@@ -28,7 +26,7 @@ export class IonicApp {
 
   load(appRef) {
     this.ref(appRef);
-    this._zone = this.injector().get(NgZone);
+    this._zone = appRef.injector.get(NgZone);
   }
 
   focusHolder(val) {
@@ -49,7 +47,7 @@ export class IonicApp {
     return this._ref;
   }
 
-  injector() {
+  get injector() {
     return this._ref.injector;
   }
 
@@ -73,7 +71,6 @@ export class IonicApp {
    */
   register(key, component) {
     this.components[key] = component;
-    console.log('App: Registered component', key, component);
     // TODO(mlynch): We need to track the lifecycle of this component to remove it onDehydrate
   }
 
@@ -91,39 +88,8 @@ export class IonicApp {
    * @param Component the component to create and insert
    * @return Promise that resolves with the ContainerRef created
    */
-  appendComponent(component: Type, context=null) {
-    return new Promise((resolve, reject) => {
-      let injector = this.injector();
-      let compiler = injector.get(Compiler);
-      let viewMngr = injector.get(AppViewManager);
-      let rootComponentRef = this._ref._hostComponent;
-      let viewContainerLocation = rootComponentRef.location;
-
-      compiler.compileInHost(component).then(protoViewRef => {
-        let atIndex = 0;
-
-        let hostViewRef = viewMngr.createViewInContainer(
-                                      viewContainerLocation,
-                                      atIndex,
-                                      protoViewRef,
-                                      null,
-                                      injector);
-
-        hostViewRef.elementRef = new ElementRef(hostViewRef, 0, viewMngr._renderer);
-        hostViewRef.instance = viewMngr.getComponent(hostViewRef.elementRef);
-        util.extend(hostViewRef.instance, context);
-
-        hostViewRef.dispose = () => {
-          viewMngr.destroyViewInContainer(viewContainerLocation, 0, 0, hostViewRef.viewRef);
-        };
-
-        resolve(hostViewRef);
-
-      }).catch(err => {
-        console.error('appendComponent:', err);
-        reject(err);
-      });
-    });
+  appendComponent(componentType: Type, context=null) {
+    return this.rootAnchor.append(componentType);
   }
 
   applyBodyCss(bodyEle, platform, config) {
@@ -174,7 +140,27 @@ function initApp(window, document, config) {
   return app;
 }
 
-export function ionicBootstrap(component, config, router) {
+@Component({
+  selector: 'root-anchor'
+})
+@View({
+  template: ''
+})
+class RootAnchor {
+  constructor(app: IonicApp, elementRef: ElementRef, loader: DynamicComponentLoader) {
+    this.elementRef = elementRef;
+    this.loader = loader;
+    app.rootAnchor = this;
+  }
+
+  append(componentType) {
+    return this.loader.loadNextToLocation(componentType, this.elementRef).catch(err => {
+      console.error(err)
+    });
+  }
+}
+
+export function ionicBootstrap(rootComponentType, config, router) {
   return new Promise(resolve => {
     try {
       // get the user config, or create one if wasn't passed in
@@ -211,24 +197,33 @@ export function ionicBootstrap(component, config, router) {
       let popup = new Popup(app, config);
 
       // add injectables that will be available to all child components
-      let injectableBindings = [
+      let appBindings = Injector.resolve([
         bind(IonicApp).toValue(app),
         bind(IonicConfig).toValue(config),
         bind(IonicRouter).toValue(router),
         bind(ActionMenu).toValue(actionMenu),
         bind(Modal).toValue(modal),
         bind(Popup).toValue(popup)
-      ];
+      ]);
 
-      bootstrap(component, injectableBindings).then(appRef => {
+      bootstrap(rootComponentType, appBindings).then(appRef => {
         app.load(appRef);
 
+        // Adding a anchor to add overlays off of...huh??
+        let elementRefs = appRef._hostComponent.hostView._view.elementRefs;
+        let lastElementRef = elementRefs[1];
+        let injector = lastElementRef.parentView._view.rootElementInjectors[0]._injector;
+        let loader = injector.get(DynamicComponentLoader);
+        loader.loadNextToLocation(RootAnchor, lastElementRef).then(() => {
           // append the focus holder if its needed
           if (config.setting('keyboardScrollAssist')) {
             app.appendComponent(FocusHolder).then(ref => {
               app.focusHolder(ref.instance);
             });
           }
+        }).catch(err => {
+          console.error(err)
+        });
 
         router.load(window, app, config).then(() => {
           // resolve that the app has loaded

ionic/components/app/extensions/material.scss

@@ -1,5 +1,5 @@
 .mode-md {
-  ion-app, .ion-app {
+  ion-app {
     font-family: 'RobotoDraft','Roboto',-apple-system,'Helvetica Neue',sans-serif;
   }
 

ionic/components/app/structure.scss

@@ -30,8 +30,7 @@ body {
   @include user-select-none();
 }
 
-ion-app,
-.ion-app {
+ion-app {
   display: flex;
   flex-direction: column;
 

ionic/components/app/test/hn/index.ts

@@ -10,7 +10,7 @@ import {HNSinglePost} from './pages/single';
   selector: 'story'
 })
 @IonicView({
-  template: '<div class="hn-story"><content></content></div>'
+  template: '<div class="hn-story"><ng-content></ng-content></div>'
 })
 export class Story {
   constructor() {

ionic/components/app/typography.scss

@@ -26,8 +26,7 @@ html {
 }
 
 
-ion-app,
-.ion-app {
+ion-app {
   font-size: $font-size-base;
   font-family: $font-family-base;
 

ionic/components/app/z-index.scss

@@ -21,5 +21,5 @@ $z-index-swipe-handle:           15 !default;
 $z-index-toolbar-border:         20 !default;
 $z-index-list-border:            50 !default;
 
-$z-index-popup-backdrop:         100;
-$z-index-popup-wrapper:          101;
+$z-index-backdrop:               1;
+$z-index-overlay-wrapper:        10;

ionic/components/aside/aside.ts

@@ -37,7 +37,7 @@ import {dom} from 'ionic/util'
   events: ['opening']
 })
 @View({
-  template: '<content></content>'
+  template: '<ng-content></ng-content>'
 })
 export class Aside extends Ion {
 

ionic/components/checkbox/checkbox.ts

@@ -3,7 +3,6 @@ import {
   Directive,
   ElementRef,
   Optional,
-  Parent,
   NgControl
 } from 'angular2/angular2';
 
@@ -32,7 +31,7 @@ import {TapClick} from '../button/button';
     '<div class="checkbox-icon"></div>' +
   '</div>' +
   '<div class="item-content" id="{{labelId}}">' +
-    '<content></content>' +
+    '<ng-content></ng-content>' +
   '</div>'
 })
 export class Checkbox extends IonInputItem {

ionic/components/content/content.ts

@@ -16,7 +16,7 @@ import {ScrollTo} from '../../animations/scroll-to';
   }
 })
 @View({
-  template: '<div class="scroll-content"><content></content></div>'
+  template: '<div class="scroll-content"><ng-content></ng-content></div>'
 })
 export class Content extends Ion {
   constructor(elementRef: ElementRef, config: IonicConfig) {

ionic/components/form/focus-holder.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2';
+import {Component, Directive, View, Ancestor, ElementRef, forwardRef} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import * as dom  from '../../util/dom';
@@ -75,7 +75,7 @@ export class FocusHolder {
   }
 })
 class FocusInput {
-  constructor(elementRef: ElementRef, @Parent() holder: FocusHolder) {
+  constructor(elementRef: ElementRef, @Ancestor() holder: FocusHolder) {
     this.elementRef = elementRef;
     holder.register(this);
     this.holder = holder;

ionic/components/form/label.ts

@@ -1,4 +1,4 @@
-import {Directive, Parent, Optional} from 'angular2/angular2';
+import {Directive, Ancestor, Optional} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import * as dom  from '../../util/dom';
@@ -21,10 +21,10 @@ import {Switch} from '../switch/switch';
 })
 export class Label {
   constructor(
-    @Optional() @Parent() textContainer: Input,
-    @Optional() @Parent() checkboxContainer: Checkbox,
-    @Optional() @Parent() radioContainer: RadioButton,
-    @Optional() @Parent() switchContainer: Switch,
+    @Optional() @Ancestor() textContainer: Input,
+    @Optional() @Ancestor() checkboxContainer: Checkbox,
+    @Optional() @Ancestor() radioContainer: RadioButton,
+    @Optional() @Ancestor() switchContainer: Switch,
     config: IonicConfig
   ) {
     this.container = textContainer || checkboxContainer || radioContainer || switchContainer;

ionic/components/form/tap-input.ts

@@ -1,4 +1,4 @@
-import {Parent, Ancestor, Optional, ElementRef, Attribute, Directive} from 'angular2/angular2';
+import {Ancestor, Optional, ElementRef, Attribute, Directive} from 'angular2/angular2';
 
 import {IonInput} from './input';
 import {IonicApp} from '../app/app';
@@ -24,8 +24,8 @@ import {RadioButton} from '../radio/radio';
 })
 export class TapInput extends IonInput {
   constructor(
-    @Optional() @Parent() checkboxContainer: Checkbox,
-    @Optional() @Parent() radioContainer: RadioButton,
+    @Optional() @Ancestor() checkboxContainer: Checkbox,
+    @Optional() @Ancestor() radioContainer: RadioButton,
     @Optional() @Ancestor() scrollView: Content,
     @Attribute('type') type: string,
     elementRef: ElementRef,

ionic/components/form/text-input.ts

@@ -1,4 +1,4 @@
-import {Directive, View, Parent, Ancestor, Optional, ElementRef, Attribute, forwardRef} from 'angular2/angular2';
+import {Directive, View, Ancestor, Optional, ElementRef, Attribute, forwardRef} from 'angular2/angular2';
 
 import {IonicDirective} from '../../config/annotations';
 import {IonicConfig} from '../../config/config';
@@ -51,7 +51,7 @@ export class Input extends IonInputItem {
 })
 export class TextInput extends IonInput {
   constructor(
-    @Optional() @Parent() container: Input,
+    @Optional() @Ancestor() container: Input,
     @Optional() @Ancestor() scrollView: Content,
     @Attribute('type') type: string,
     elementRef: ElementRef,

ionic/components/icon/icon.ts

@@ -1,4 +1,4 @@
-import {Directive, View, CSSClass, ElementRef, Optional, Parent, Attribute} from 'angular2/angular2';
+import {Directive, View, CSSClass, ElementRef, Optional, Ancestor, Attribute, Renderer} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {IonicComponent} from '../../config/annotations';
@@ -65,12 +65,13 @@ Custom Font Icon
 })
 export class IconDirective {
   constructor(
-    elementRef: ElementRef,
-    @Optional() @Parent() parentButton: Button,
+    private _elementRef: ElementRef,
+    @Optional() @Ancestor() AncestorButton: Button,
     @Attribute('forward') forward: string,
-    config: IonicConfig
+    config: IonicConfig,
+    private _renderer: Renderer
   ) {
-    let ele = this.ele = elementRef.nativeElement;
+    let ele = this.ele = _elementRef.nativeElement;
 
     this.iconLeft = this.iconRight = this.iconOnly = false;
     this.ariaHidden = true;
@@ -79,7 +80,7 @@ export class IconDirective {
       this.fwdIcon = config.setting('forwardIcon');
     }
 
-    if (parentButton) {
+    if (AncestorButton) {
       // this icon is within a button
       this.withinButton = true;
 
@@ -97,7 +98,7 @@ export class IconDirective {
 
       // tell the button there's a child icon
       // the button will set the correct css classes on itself
-      parentButton.registerIcon(this);
+      AncestorButton.registerIcon(this);
     }
   }
 
@@ -108,7 +109,7 @@ export class IconDirective {
     if (!this.name) return;
 
     // add the css class to show the icon font
-    this.ele.classList.add(this.name);
+    this._renderer.setElementClass(this._elementRef, this.name, true);
 
     // hide the icon when it's within a button
     // and the button isn't an icon only button

ionic/components/ion.ts

@@ -8,16 +8,16 @@ import * as util from 'ionic/util';
  * sending/receiving app-level events.
  */
 export class Ion {
-  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
+  constructor(elementRef: ElementRef, config: IonicConfig) {
     this.elementRef = elementRef;
-    this.ionicConfig = ionicConfig;
-    this.clsMode = this.ionicConfig.setting('mode');
+    this.config = config;
+    this.clsMode = config.setting('mode');
   }
 
   onInit() {
     let cls = this.constructor;
 
-    if (cls.defaultProperties && this.ionicConfig) {
+    if (cls.defaultProperties && this.config) {
       for (let prop in cls.defaultProperties) {
         // Priority:
         // ---------
@@ -35,7 +35,7 @@ export class Ion {
         }
 
         // get the property values from a global user/platform config
-        let configVal = this.ionicConfig.setting(prop);
+        let configVal = this.config.setting(prop);
         if (configVal) {
           this[prop] = configVal;
           continue;

ionic/components/item/item-swipe-buttons.ts

@@ -1,7 +1,8 @@
-import {ElementRef, Parent} from 'angular2/angular2'
-import {Directive} from 'angular2/angular2';
-import {Item} from 'ionic/components/item/item'
-import {SlideGesture} from 'ionic/gestures/slide-gesture'
+import {ElementRef, Ancestor, Directive} from 'angular2/angular2';
+
+import {Item} from 'ionic/components/item/item';
+import {SlideGesture} from 'ionic/gestures/slide-gesture';
+
 
 @Directive({
   selector: 'ion-primary-swipe-buttons'
@@ -9,11 +10,11 @@ import {SlideGesture} from 'ionic/gestures/slide-gesture'
 export class ItemPrimarySwipeButtons {
   constructor(
     elementRef: ElementRef,
-    @Parent() item: Item
+    @Ancestor() item: Item
   ) {
     item.primarySwipeButtons = this
     this.ele = elementRef.nativeElement
-    this.parentItem = item
+    this.AncestorItem = item
     this.gesture = new ItemSlideGesture(this)
     this.gesture.listen()
   }
@@ -36,7 +37,7 @@ export class ItemSecondarySwipeButtons {
 
 class ItemSlideGesture extends SlideGesture {
   constructor(buttons) {
-    super(buttons.parentItem.ele)
+    super(buttons.AncestorItem.ele)
     this.buttons = buttons
   }
 

ionic/components/item/item.ts

@@ -14,22 +14,22 @@ import {dom} from 'ionic/util';
 @View({
   template: `
     <!--
-    <content select="ion-primary-options"></content>
-    <content select="ion-primary-swipe-buttons"></content>
+    <ng-content select="ion-primary-options"></ng-content>
+    <ng-content select="ion-primary-swipe-buttons"></ng-content>
     -->
     <div class="item-content">
       <div class="item-media">
       </div>
       <div class="item-accessory">
-        <!--<content select="ion-item-accessory"></content>-->
+        <!--<ng-content select="ion-item-accessory"></ng-content>-->
       </div>
       <div class="item-label">
-        <content></content>
+        <ng-content></ng-content>
       </div>
     </div>
     <!--
-    <content select="ion-secondary-options"></content>
-    <content select="ion-secondary-swipe-buttons"></content>
+    <ng-content select="ion-secondary-options"></ng-content>
+    <ng-content select="ion-secondary-swipe-buttons"></ng-content>
     -->
   `
   /*

ionic/components/layout/layout.ts

@@ -6,7 +6,7 @@ import {Component, View, ElementRef} from 'angular2/angular2'
 })
 @View({
   template: `
-    <content></content>
+    <ng-content></ng-content>
     <object class="ele-qry" data="about:blank"></object>
   `
 })

ionic/components/list/test/infinite/index.ts

@@ -1,5 +1,5 @@
 import {ProtoViewRef, ViewContainerRef} from 'angular2/angular2'
-import {Directive, Parent, forwardRef} from 'angular2/angular2';
+import {Directive, Ancestor, forwardRef} from 'angular2/angular2';
 
 import {App, List} from 'ionic/ionic';
 
@@ -31,7 +31,7 @@ class IonicApp {
   selector: 'template[cell]'
 })
 export class ItemCellTemplate {
-  constructor(@Parent() list: List, viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
+  constructor(@Ancestor() list: List, viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
     console.log('Item cell template', list, viewContainer, protoViewRef);
 
     this.protoViewRef = protoViewRef;

ionic/components/modal/modal.scss

@@ -3,8 +3,6 @@
 // --------------------------------------------------
 
 $modal-bg-color:                  #fff !default;
-$modal-backdrop-bg-active:        #000 !default;
-$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
 
 $modal-inset-mode-break-point:    680px !default;  // @media min-width
 $modal-inset-mode-top:            20% !default;

ionic/components/nav-bar/nav-bar.ts

@@ -1,6 +1,8 @@
-import {Directive, View, Parent, Optional, ElementRef, forwardRef} from 'angular2/angular2';
+import {Directive, View, Ancestor, Optional, ElementRef, forwardRef} from 'angular2/angular2';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 
+import {TemplateRef} from 'angular2/angular2';
+
 import {ToolbarBase} from '../toolbar/toolbar';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent, IonicView} from '../../config/annotations';
@@ -26,14 +28,14 @@ import {ViewItem} from '../view/view-item';
       </button>
       <div class="toolbar-title">
         <div class="toolbar-inner-title">
-          <content select="ion-title"></content>
+          <ng-content select="ion-title"></ng-content>
         </div>
       </div>
       <div class="toolbar-item toolbar-primary-item">
-        <content select="[primary]"></content>
+        <ng-content select="[primary]"></ng-content>
       </div>
       <div class="toolbar-item toolbar-secondary-item">
-        <content select="[secondary]"></content>
+        <ng-content select="[secondary]"></ng-content>
       </div>
     </div>
   `,
@@ -77,7 +79,7 @@ export class Navbar extends ToolbarBase {
 
   didEnter() {
     const titleEle = this._ttEle || (this._ttEle = this.getNativeElement().querySelector('ion-title'));
-    this.app.title(titleEle.textContent);
+    titleEle && this.app.title(titleEle.textContent);
   }
 }
 
@@ -88,7 +90,7 @@ export class Navbar extends ToolbarBase {
   }
 })
 class BackButton {
-  constructor(@Parent() navbar: Navbar, @Optional() item: ViewItem, elementRef: ElementRef) {
+  constructor(@Ancestor() navbar: Navbar, @Optional() item: ViewItem, elementRef: ElementRef) {
     this.item = item;
     navbar.backButtonElement(elementRef);
   }
@@ -104,7 +106,7 @@ class BackButton {
   selector: '.back-button-text'
 })
 class BackButtonText {
-  constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
+  constructor(@Ancestor() navbar: Navbar, elementRef: ElementRef) {
     navbar.backButtonTextElement(elementRef);
   }
 }
@@ -113,7 +115,7 @@ class BackButtonText {
   selector: '.toolbar-title'
 })
 class Title {
-  constructor(@Parent() toolbar: Navbar, elementRef: ElementRef) {
+  constructor(@Ancestor() toolbar: Navbar, elementRef: ElementRef) {
     toolbar.titleElement(elementRef);
   }
 }
@@ -122,7 +124,7 @@ class Title {
   selector: '.toolbar-item'
 })
 class NavbarItem {
-  constructor(@Parent() toolbar: Navbar, elementRef: ElementRef) {
+  constructor(@Ancestor() toolbar: Navbar, elementRef: ElementRef) {
     toolbar.itemElements(elementRef);
   }
 }
@@ -137,7 +139,10 @@ class NavbarItem {
   selector: 'template[navbar]'
 })
 export class NavbarTemplate {
-  constructor(@Optional() item: ViewItem, protoViewRef: ProtoViewRef) {
-    item && item.addProtoViewRef('navbar', protoViewRef);
+  constructor(
+    @Optional() item: ViewItem,
+    @Optional() templateRef: TemplateRef
+  ) {
+    item && item.addTemplateRef('navbar', templateRef);
   }
 }

ionic/components/nav/anchors.ts

@@ -1,4 +1,4 @@
-import {Component, View, Directive, Parent, ElementRef, forwardRef, Inject} from 'angular2/angular2';
+import {Component, View, Directive, Ancestor, ElementRef, forwardRef, Inject} from 'angular2/angular2';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
 import {Pane} from './pane';
@@ -8,7 +8,7 @@ import {ViewController} from '../view/view-controller';
 @Directive({selector: 'template[pane-anchor]'})
 export class PaneAnchor {
   constructor(
-    @Parent() @Inject(forwardRef(() => Pane)) pane: Pane,
+    @Ancestor() @Inject(forwardRef(() => Pane)) pane: Pane,
     elementRef: ElementRef
   ) {
     pane.sectionAnchorElementRef = elementRef;
@@ -19,7 +19,7 @@ export class PaneAnchor {
 @Directive({selector: 'template[content-anchor]'})
 export class PaneContentAnchor {
   constructor(
-    @Parent() @Inject(forwardRef(() => Pane)) pane: Pane,
+    @Ancestor() @Inject(forwardRef(() => Pane)) pane: Pane,
     viewContainerRef: ViewContainerRef
   ) {
     pane.contentContainerRef = viewContainerRef;

ionic/components/nav/nav.ts

@@ -1,4 +1,4 @@
-import {Directive, View, ElementRef, Parent, Optional, forwardRef, Injector} from 'angular2/angular2';
+import {Directive, View, ElementRef, Ancestor, Optional, forwardRef, Injector} from 'angular2/angular2';
 
 import {IonicComponent} from '../../config/annotations';
 import {ViewController} from '../view/view-controller';
@@ -20,14 +20,15 @@ import {ViewController} from '../view/view-controller';
 export class Nav extends ViewController {
 
   constructor(
-    @Optional() parentViewCtrl: ViewController,
+    @Optional() ancestorViewCtrl: ViewController,
     injector: Injector,
     elementRef: ElementRef
   ) {
-    super(parentViewCtrl, injector, elementRef);
+    super(ancestorViewCtrl, injector, elementRef);
   }
 
   onIonInit() {
+
     if (this.root) {
       this.push(this.root);
     }
@@ -42,7 +43,7 @@ export class Nav extends ViewController {
 
 @Directive({selector: 'template[pane-anchor]'})
 class NavPaneAnchor {
-  constructor(@Parent() nav: Nav, elementRef: ElementRef) {
+  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
     nav.anchorElementRef(elementRef);
   }
 }

ionic/components/nav/pane.ts

@@ -1,5 +1,4 @@
-import {Component, Directive, View, ElementRef, Parent, Inject, forwardRef} from 'angular2/angular2';
-import {bind} from 'angular2/di';
+import {Component, Directive, View, ElementRef, Inject, forwardRef, Injector, bind} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -13,6 +12,10 @@ export class PaneController {
   constructor(viewCtrl: ViewController) {
     this.panes = {};
     this.viewCtrl = viewCtrl;
+
+    this.bindings = Injector.resolve([
+      bind(ViewController).toValue(viewCtrl)
+    ]);
   }
 
   get(itemStructure, callback) {
@@ -32,16 +35,8 @@ export class PaneController {
       // create a new nav pane
       this.panes[key] = null;
 
-      let injector = viewCtrl.injector.resolveAndCreateChild([
-        bind(ViewController).toValue(viewCtrl)
-      ]);
 
-      // add a Pane element
-      // when the Pane is added, it'll also add its reference to the panes object
-      // viewCtrl.compiler.compileInHost(this.ComponentType).then(componentProtoViewRef => {
-
-      // });
-      viewCtrl.loader.loadNextToLocation(Pane, viewCtrl.anchorElementRef(), injector).then(() => {
+      viewCtrl.loader.loadNextToLocation(Pane, viewCtrl.anchorElementRef(), this.bindings).then(() => {
 
         // get the pane reference by name
         pane = this.panes[key];

ionic/components/nav/swipe-handle.ts

@@ -1,4 +1,4 @@
-import {ElementRef, Directive, Parent, Optional, Inject, forwardRef, NgZone} from 'angular2/angular2';
+import {ElementRef, Directive, Ancestor, Optional, Inject, forwardRef, NgZone} from 'angular2/angular2';
 
 import {ViewController} from '../view/view-controller';
 import {Pane} from './pane';
@@ -14,7 +14,7 @@ import {Gesture} from 'ionic/gestures/gesture';
 export class SwipeHandle {
   constructor(
     @Optional() @Inject(forwardRef(() => ViewController)) viewCtrl: ViewController,
-    @Parent() @Inject(forwardRef(() => Pane)) pane: Pane,
+    @Ancestor() @Inject(forwardRef(() => Pane)) pane: Pane,
     elementRef: ElementRef,
     ngZone: NgZone
   ) {

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

@@ -8,13 +8,13 @@ import {ThirdPage} from './third-page';
 @IonicView({
   template: '' +
     '<ion-navbar *navbar primary>' +
-      '<ion-title>First Page</ion-title>' +
+      '<ion-title>{{title}}</ion-title>' +
       '<ion-nav-items secondary>' +
         '<button>S1</button>' +
       '</ion-nav-items>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p>First Page</p>' +
+      '<p>{{title}}</p>' +
       '<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>' +
       '<p><button primary [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
       '<p><button primary (click)="setItems()">setItems() (Go to 3rd, no history)</button></p>' +
@@ -30,6 +30,7 @@ export class FirstPage {
     config: IonicConfig
   ) {
     this.nav = nav;
+    this.title = 'First Page';
 
     this.pushPage = SecondPage;
     this.pushData = {

ionic/components/overlay/overlay.ts

@@ -9,12 +9,12 @@ import * as util from 'ionic/util';
 
 export class Overlay {
 
-  constructor(app: IonicApp, ionicConfig: IonicConfig) {
+  constructor(app: IonicApp, config: IonicConfig) {
     this.app = app;
-    this.ionicConfig = ionicConfig;
+    this.mode = config.setting('mode');
   }
 
-  create(overlayType, ComponentType: Type, opts={}, context=null) {
+  create(overlayType, componentType: Type, opts={}, context=null) {
     return new Promise((resolve, reject) => {
       let app = this.app;
 
@@ -22,14 +22,17 @@ export class Overlay {
         selector: 'ion-' + overlayType,
         host: {
           '[style.z-index]': 'zIndex',
-          'class': overlayType + ' ion-app',
-          'mode': this.ionicConfig.setting('mode')
+          'mode': this.mode,
+          'class': overlayType
         }
       });
-      let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation);
+      let overlayComponentType = DirectiveBinding.createFromType(componentType, annotation);
 
-      app.appendComponent(overlayComponent, context).then(ref => {
-        let overlayRef = new OverlayRef(app, overlayType, opts, ref);
+      // create a unique token that works as a cache key
+      overlayComponentType.token = overlayType + componentType.name;
+
+      app.appendComponent(overlayComponentType).then(ref => {
+        let overlayRef = new OverlayRef(app, overlayType, opts, ref, context);
         overlayRef._open(opts).then(() => {
           resolve(overlayRef);
         });
@@ -70,10 +73,13 @@ export class Overlay {
 }
 
 export class OverlayRef {
-  constructor(app, overlayType, opts, ref) {
+  constructor(app, overlayType, opts, ref, context) {
     let overlayInstance = (ref && ref.instance);
     if (!overlayInstance) return;
 
+    if (context) {
+      util.extend(ref.instance, context);
+    }
     this._instance = overlayInstance;
 
     overlayInstance.viewLoaded && overlayInstance.viewLoaded();
@@ -90,7 +96,7 @@ export class OverlayRef {
       this.close(instanceOpts);
     };
 
-    this._elementRef = ref.elementRef;
+    this._elementRef = ref.location;
     this._type = overlayType;
     this._opts = opts;
     this._handle = opts.handle || this.zIndex;

ionic/components/popup/extensions/ios.scss

@@ -1,25 +1,30 @@
 
+// iOS Popups
+// --------------------------------------------------
+
 $popup-ios-border-radius:       13px !default;
 $popup-ios-bg-color:            #f8f8f8 !default;
 
+
 .popup[mode="ios"] {
 
-  .popup-wrapper {
-
+  popup-wrapper {
     border-radius: $popup-ios-border-radius;
     background-color: $popup-ios-bg-color;
+  }
 
   .popup-head {
     padding-top: 24px;
   }
 
-    .popup-title {
+  .popup-body:empty {
+    padding: 0;
   }
 
-    .popup-body:empty { padding: 0; }
   .popup-buttons {
     padding: 0;
     min-height: 0;
+
     .button {
       min-height: 42px;
       color: get-color('primary', base);
@@ -29,6 +34,7 @@ $popup-ios-bg-color:            #f8f8f8 !default;
         font-weight: bold;
       }
     }
+
   }
-  }
+
 }

ionic/components/popup/extensions/material.scss

@@ -0,0 +1,40 @@
+
+// Material Design Popups
+// --------------------------------------------------
+
+$popup-md-border-radius:       13px !default;
+$popup-md-bg-color:            #f8f8f8 !default;
+
+
+.popup[mode="md"] {
+
+  popup-wrapper {
+    border-radius: $popup-md-border-radius;
+    background-color: $popup-md-bg-color;
+  }
+
+  .popup-head {
+    padding-top: 24px;
+  }
+
+  .popup-body:empty {
+    padding: 0;
+  }
+
+  .popup-buttons {
+    padding: 0;
+    min-height: 0;
+
+    .button {
+      min-height: 42px;
+      color: get-color('primary', base);
+      font-size: 14px;
+
+      &:last-child {
+        font-weight: bold;
+      }
+    }
+
+  }
+
+}

ionic/components/popup/popup.scss

@@ -4,10 +4,6 @@
 
 $popup-width:                     250px !default;
 
-$popup-bg-color:                  #fff !default;
-$popup-backdrop-bg-active:        #000 !default;
-$popup-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
-
 $popup-border-radius:             0px !default;
 $popup-background-color:          rgba(255,255,255,0.9) !default;
 
@@ -15,24 +11,10 @@ $popup-button-border-radius:      2px !default;
 $popup-button-line-height:        20px !default;
 $popup-button-min-height:         45px !default;
 
-$popup-backdrop-color:            #000 !default;
-$popup-backdrop-active-opacity:   0.4 !default;
-
-
-.popup-backdrop {
-   z-index: $z-index-popup-backdrop;
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background-color: $popup-backdrop-color;
-   opacity: 0;
-   tranform: translateZ(0);
-}
 
 ion-popup {
   position: absolute;
+  z-index: $z-index-overlay;
   top: 0;
   left: 0;
   bottom: 0;
@@ -43,10 +25,8 @@ ion-popup {
   justify-content: center;
   align-items: center;
 
-  z-index: $z-index-overlay;
-
-  .popup-wrapper {
-    z-index: $z-index-popup-wrapper;
+  popup-wrapper {
+    z-index: $z-index-overlay-wrapper;
     width: $popup-width;
     max-width: 100%;
     max-height: 90%;
@@ -102,6 +82,7 @@ h3.popup-title {
     line-height: $popup-button-line-height;
 
     margin-right: 5px;
+
     &:last-child {
       margin-right: 0px;
     }

ionic/components/popup/popup.ts

@@ -1,5 +1,5 @@
 import {formDirectives, NgControl, NgControlGroup,
-  Component, View, Injectable, CSSClass, NgIf, NgFor, onInit} from 'angular2/angular2';
+  Component, View, Injectable, CSSClass, NgIf, NgFor} from 'angular2/angular2';
 
 import {Overlay} from '../overlay/overlay';
 import {Animation} from '../../animations/animation';
@@ -24,7 +24,7 @@ export class Popup extends Overlay {
   }
 
   alert(context={}, opts={}) {
-    if(typeof context === 'string') {
+    if (typeof context === 'string') {
       context = {
         title: context
       }
@@ -49,7 +49,7 @@ export class Popup extends Overlay {
   }
 
   confirm(context={}, opts={}) {
-    if(typeof context === 'string') {
+    if (typeof context === 'string') {
       context = {
         title: context
       }
@@ -78,7 +78,7 @@ export class Popup extends Overlay {
   }
 
   prompt(context={}, opts={}) {
-    if(typeof context === 'string') {
+    if (typeof context === 'string') {
       context = {
         title: context
       };
@@ -109,8 +109,6 @@ export class Popup extends Overlay {
       ]
     }, context);
 
-    console.log('Context', context);
-
     return this.popup(context, opts);
   }
 
@@ -127,12 +125,12 @@ const OVERLAY_TYPE = 'popup';
 
 
 @Component({
-  selector: 'ion-popup-default',
-  lifecycle: [onInit]
+  selector: 'ion-popup-default'
 })
 @View({
-  template: '<div class="popup-backdrop" (click)="_cancel($event)" tappable></div>' +
-  '<div class="popup-wrapper">' +
+  template:
+  '<backdrop (click)="_cancel($event)" tappable></backdrop>' +
+  '<popup-wrapper>' +
     '<div class="popup-head">' +
       '<h3 class="popup-title" [inner-html]="title"></h3>' +
       '<h5 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h5>' +
@@ -143,8 +141,7 @@ const OVERLAY_TYPE = 'popup';
     '<div class="popup-buttons" *ng-if="buttons.length">' +
       '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" class="button" [class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
     '</div>' +
-  '</div>' +
-'</div>',
+  '</popup-wrapper>',
   directives: [formDirectives, CSSClass, NgIf, NgFor]
 })
 
@@ -153,11 +150,10 @@ class StandardPopup {
     this.popup = popup;
   }
   onInit() {
-    console.log('INIT');
     setTimeout(() => {
       this.element = this.overlayRef.getElementRef().nativeElement;
       this.promptInput = this.element.querySelector('input');
-      if(this.promptInput) {
+      if (this.promptInput) {
         this.promptInput.value = '';
       }
     });
@@ -170,9 +166,9 @@ class StandardPopup {
     });
 
     // If the event.preventDefault() wasn't called, close
-    if(!event.defaultPrevented) {
+    if (!event.defaultPrevented) {
       // If this is a cancel button, reject the promise
-      if(button.isCancel) {
+      if (button.isCancel) {
         this.promiseReject();
       } else {
         // Resolve with the prompt value
@@ -185,7 +181,7 @@ class StandardPopup {
   _cancel(event) {
     this.cancel && this.cancel(event);
 
-    if(!event.defaultPrevented) {
+    if (!event.defaultPrevented) {
       this.promiseReject();
       return this.overlayRef.close();
     }
@@ -199,8 +195,8 @@ class PopupAnimation extends Animation {
       .easing('ease-in-out')
       .duration(200);
 
-    this.backdrop = new Animation(element.querySelector('.popup-backdrop'));
-    this.wrapper = new Animation(element.querySelector('.popup-wrapper'));
+    this.backdrop = new Animation(element.querySelector('backdrop'));
+    this.wrapper = new Animation(element.querySelector('popup-wrapper'));
 
     this.add(this.backdrop, this.wrapper);
   }

ionic/components/radio/radio.ts

@@ -78,7 +78,7 @@ export class RadioGroup extends Ion {
 @IonicView({
   template:
   '<div class="item-content">' +
-    '<content></content>' +
+    '<ng-content></ng-content>' +
   '</div>' +
   '<div class="item-media media-radio">' +
     '<div class="radio-icon"></div>' +

ionic/components/scroll/pull-to-refresh.ts

@@ -1,4 +1,4 @@
-import {Component, View, NgIf, CSSClass, ElementRef, EventEmitter, Parent, onInit} from 'angular2/angular2'
+import {Component, View, NgIf, CSSClass, ElementRef, EventEmitter, Ancestor, onInit} from 'angular2/angular2'
 
 import {Content} from '../content/content';
 
@@ -39,7 +39,7 @@ import {raf, ready, CSS} from 'ionic/util/dom';
 })
 export class Refresher {
   constructor(
-    @Parent() content: Content,
+    @Ancestor() content: Content,
     element: ElementRef
   ) {
     this.ele = element.nativeElement;
@@ -71,7 +71,7 @@ export class Refresher {
     this.startY = null;
     this.deltaY = null;
     this.canOverscroll = true;
-    this.scrollParent = sp;
+    this.scrollAncestor = sp;
     this.scrollChild = sc;
 
     util.defaults(this, {
@@ -248,7 +248,7 @@ export class Refresher {
 
     // kitkat fix for touchcancel events http://updates.html5rocks.com/2014/05/A-More-Compatible-Smoother-Touch
     /*
-    if (ionic.Platform.isAndroid() && ionic.Platform.version() === 4.4 && scrollParent.scrollTop === 0) {
+    if (ionic.Platform.isAndroid() && ionic.Platform.version() === 4.4 && scrollAncestor.scrollTop === 0) {
       isDragging = true;
       e.preventDefault();
     }
@@ -260,7 +260,7 @@ export class Refresher {
 
 
     // if we've dragged up and back down in to native scroll territory
-    if (this.deltaY - this.dragOffset <= 0 || this.scrollParent.scrollTop !== 0) {
+    if (this.deltaY - this.dragOffset <= 0 || this.scrollAncestor.scrollTop !== 0) {
 
       if (this.isOverscrolling) {
         this.isOverscrolling = false;
@@ -268,7 +268,7 @@ export class Refresher {
       }
 
       if (this.isDragging) {
-        this.nativescroll(this.scrollParent, parseInt(this.deltaY - this.dragOffset, 10) * -1);
+        this.nativescroll(this.scrollAncestor, parseInt(this.deltaY - this.dragOffset, 10) * -1);
       }
 
       // if we're not at overscroll 0 yet, 0 out
@@ -277,7 +277,7 @@ export class Refresher {
       }
       return;
 
-    } else if (this.deltaY > 0 && this.scrollParent.scrollTop === 0 && !this.isOverscrolling) {
+    } else if (this.deltaY > 0 && this.scrollAncestor.scrollTop === 0 && !this.isOverscrolling) {
       // starting overscroll, but drag started below scrollTop 0, so we need to offset the position
       this.dragOffset = this.deltaY;
     }

ionic/components/scroll/scroll.ts

@@ -20,7 +20,7 @@ import {IonicComponent} from '../../config/annotations';
   }
 })
 @View({
-  template: '<div class="scroll-content"><content></content></div>'
+  template: '<div class="scroll-content"><ng-content></ng-content></div>'
 })
 export class Scroll extends Ion {
   constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {

ionic/components/segment/segment.ts

@@ -29,7 +29,7 @@ import {dom} from 'ionic/util';
   }
 })
 @View({
-  template: '<div class="ion-segment"><content></content></div>',
+  template: '<div class="ion-segment"><ng-content></ng-content></div>',
   directives: [forwardRef(() => SegmentButton)]
 })
 export class Segment extends Ion {

ionic/components/slides/slides.ts

@@ -30,7 +30,7 @@ import * as util from 'ionic/util';
   ]
 })
 @View({
-  template: '<div class="slides-view"><content></content></div>'
+  template: '<div class="slides-view"><ng-content></ng-content></div>'
 })
 export class Slides {
   constructor(elementRef: ElementRef) {

ionic/components/switch/switch.ts

@@ -4,7 +4,6 @@ import {
   ElementRef,
   Renderer,
   Optional,
-  Parent,
   NgControl
 } from 'angular2/angular2';
 
@@ -25,7 +24,7 @@ import {Icon} from '../icon/icon';
 @IonicView({
   template:
   '<div class="item-content">' +
-    '<content></content>' +
+    '<ng-content></ng-content>' +
   '</div>' +
   '<div class="item-media media-switch">' +
     '<div class="switch-track">' +

ionic/components/tabs/tab.ts

@@ -1,4 +1,4 @@
-import {Directive, Component, View, onInit, Parent, ElementRef, forwardRef, Injector} from 'angular2/angular2';
+import {Directive, Component, View, onInit, Ancestor, ElementRef, forwardRef, Injector} from 'angular2/angular2';
 
 import {ViewController} from '../view/view-controller';
 import {ViewItem} from '../view/view-item';
@@ -21,27 +21,27 @@ import {Tabs} from './tabs';
   }
 })
 @View({
-  template: '<template pane-anchor></template><content></content>',
+  template: '<template pane-anchor></template><ng-content></ng-content>',
   directives: [forwardRef(() => TabPaneAnchor)]
 })
 export class Tab extends ViewController {
 
   constructor(
-    @Parent() tabs: Tabs,
+    @Ancestor() tabs: Tabs,
     elementRef: ElementRef,
     injector: Injector
   ) {
     // A Tab is both a container of many views, and is a view itself.
-    // A Tab is one ViewItem within it's parent Tabs (which extends ViewController)
+    // A Tab is one ViewItem within it's Ancestor Tabs (which extends ViewController)
     // A Tab is a ViewController for its child ViewItems
     super(tabs, injector, elementRef);
     this.tabs = tabs;
 
     this.childNavbar(true);
 
-    let item = this.item = new ViewItem(tabs.parent);
+    let item = this.item = new ViewItem(tabs.Ancestor);
     item.setInstance(this);
-    item.viewElement(elementRef.nativeElement);
+    item.viewElementRef(elementRef);
     tabs.addTab(this);
 
     this.navbarView = item.navbarView = () => {
@@ -105,7 +105,7 @@ export class Tab extends ViewController {
   selector: 'template[pane-anchor]'
 })
 class TabPaneAnchor {
-  constructor(@Parent() tab: Tab, elementRef: ElementRef) {
+  constructor(@Ancestor() tab: Tab, elementRef: ElementRef) {
     tab.anchorElementRef(elementRef);
   }
 }

ionic/components/tabs/tabs.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, View, Injector, NgFor, ElementRef, Optional, Parent, forwardRef} from 'angular2/angular2';
+import {Component, Directive, View, Injector, NgFor, ElementRef, Optional, Ancestor, forwardRef} from 'angular2/angular2';
 
 import {ViewController} from '../view/view-controller';
 import {ViewItem} from '../view/view-item';
@@ -24,18 +24,18 @@ import {IonicComponent, IonicView} from '../../config/annotations';
       '</div>' +
     '</nav>' +
     '<section class="content-container">' +
-      '<content></content>' +
+      '<ng-content></ng-content>' +
     '</section>',
   directives: [forwardRef(() => TabButton)]
 })
 export class Tabs extends ViewController {
   constructor(
-    @Optional() parentViewCtrl: ViewController,
+    @Optional() AncestorViewCtrl: ViewController,
     @Optional() viewItem: ViewItem,
     injector: Injector,
     elementRef: ElementRef
   ) {
-    super(parentViewCtrl, injector, elementRef);
+    super(AncestorViewCtrl, injector, elementRef);
 
     // Tabs may also be an actual ViewItem which was navigated to
     // if Tabs is static and not navigated to within a ViewController
@@ -126,7 +126,7 @@ export class Tabs extends ViewController {
   }
 })
 class TabButton {
-  constructor(@Parent() tabs: Tabs) {
+  constructor(@Ancestor() tabs: Tabs) {
     this.tabs = tabs;
   }
 

ionic/components/toolbar/toolbar.ts

@@ -1,4 +1,4 @@
-import {Directive, View, Parent, onInit, ElementRef, forwardRef} from 'angular2/angular2';
+import {Directive, View, Ancestor, onInit, ElementRef, forwardRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -79,14 +79,14 @@ export class ToolbarBase extends Ion  {
     <div class="toolbar-inner">
       <div class="toolbar-title">
         <div class="toolbar-inner-title">
-          <content select="ion-title"></content>
+          <ng-content select="ion-title"></ng-content>
         </div>
       </div>
       <div class="toolbar-item toolbar-primary-item">
-        <content select="[primary]"></content>
+        <ng-content select="[primary]"></ng-content>
       </div>
       <div class="toolbar-item toolbar-secondary-item">
-        <content select="[secondary]"></content>
+        <ng-content select="[secondary]"></ng-content>
       </div>
     </div>
   `,
@@ -120,7 +120,7 @@ export class Toolbar extends ToolbarBase {
   selector: '.toolbar-title'
 })
 class ToolbarTitle {
-  constructor(@Parent() toolbar: Toolbar, elementRef: ElementRef) {
+  constructor(@Ancestor() toolbar: Toolbar, elementRef: ElementRef) {
     toolbar.titleElement(elementRef);
   }
 }
@@ -130,7 +130,7 @@ class ToolbarTitle {
   selector: '.toolbar-item'
 })
 class ToolbarItem {
-  constructor(@Parent() toolbar: Toolbar, elementRef: ElementRef) {
+  constructor(@Ancestor() toolbar: Toolbar, elementRef: ElementRef) {
     toolbar.itemElements(elementRef);
   }
 }

ionic/components/view/view-controller.ts

@@ -46,7 +46,7 @@ export class ViewController extends Ion {
     this._ids = -1;
 
     // build a new injector for child ViewItems to use
-    this.injector = injector.resolveAndCreateChild([
+    this.bindings = Injector.resolve([
       bind(ViewController).toValue(this),
       bind(NavController).toValue(new NavController(this))
     ]);

ionic/components/view/view-item.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, ElementRef, bind} from 'angular2/angular2';
+import {Component, EventEmitter, ElementRef, bind, Injector, ComponentRef} from 'angular2/angular2';
 import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
 
 import {NavParams} from '../nav/nav-controller';
@@ -6,9 +6,9 @@ import {NavParams} from '../nav/nav-controller';
 
 export class ViewItem {
 
-  constructor(viewCtrl, component, params = {}) {
+  constructor(viewCtrl, componentType, params = {}) {
     this.viewCtrl = viewCtrl;
-    this.component = component;
+    this.componentType = componentType;
     this.params = new NavParams(params);
     this.instance = null;
     this.state = 0;
@@ -17,12 +17,18 @@ export class ViewItem {
     this.protos = {};
     this._nbItms = [];
     this._promises = [];
+
+    this.templateRefs = {};
   }
 
   addProtoViewRef(name, protoViewRef) {
     this.protos[name] = protoViewRef;
   }
 
+  addTemplateRef(name, templateRef) {
+    this.templateRefs[name] = templateRef;
+  }
+
   stage(callback) {
     let viewCtrl = this.viewCtrl;
 
@@ -37,58 +43,61 @@ export class ViewItem {
         'class': 'nav-item'
       }
     });
-    let ionViewComponent = DirectiveBinding.createFromType(this.component, annotation);
+
+    let ionViewComponentType = DirectiveBinding.createFromType(this.componentType, annotation);
+
+    // create a unique token that works as a cache key
+    ionViewComponentType.token = 'ionView' + this.componentType.name;
 
     // compile the Component
-    viewCtrl.compiler.compileInHost(ionViewComponent).then(componentProtoViewRef => {
+    viewCtrl.compiler.compileInHost(ionViewComponentType).then(hostProtoViewRef => {
 
       // figure out the sturcture of this Component
       // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
-      let itemStructure = this.sturcture = this.inspectStructure(componentProtoViewRef);
+      let itemStructure = this.sturcture = this.inspectStructure(hostProtoViewRef);
 
       // get the appropriate Pane which this ViewItem will fit into
       viewCtrl.panes.get(itemStructure, pane => {
         this.pane = pane;
 
-        // create a new injector just for this ViewItem
-        let injector = viewCtrl.injector.resolveAndCreateChild([
+        let bindings = viewCtrl.bindings.concat(Injector.resolve([
           bind(NavParams).toValue(this.params),
           bind(ViewItem).toValue(this)
-        ]);
+        ]));
 
         // add the content of the view to the content area
         // it will already have the correct context
         let contentContainer = pane.contentContainerRef;
-        let hostViewRef = contentContainer.create(componentProtoViewRef, -1, null, injector);
 
-        // get the component's instance, and set it to the this ViewItem
-        this.setInstance( viewCtrl.viewMngr.getComponent(new ElementRef(hostViewRef, 0)) );
-        this.viewElement( hostViewRef._view.render._view.rootNodes[0] );
+        // the same guts as DynamicComponentLoader.loadNextToLocation
+        var hostViewRef =
+            contentContainer.createHostView(hostProtoViewRef, -1, bindings);
+        var newLocation = viewCtrl.viewMngr.getHostElement(hostViewRef);
+        var newComponent = viewCtrl.viewMngr.getComponent(newLocation);
 
-        // remember how to dispose of this reference
-        this.disposals.push(() => {
-          contentContainer.remove( contentContainer.indexOf(hostViewRef) );
-        });
-
-        // get the view's context so when creating the navbar
-        // it uses the same context as the content
-        let context = {
-          boundElementIndex: 0,
-          parentView: {
-            _view: hostViewRef._view.componentChildViews[0]
+        var dispose = () => {
+          var index = contentContainer.indexOf(hostViewRef);
+          if (index !== -1) {
+            contentContainer.remove(index);
           }
         };
+        this.disposals.push(dispose);
+        var viewComponetRef = new ComponentRef(newLocation, newComponent, dispose);
 
-        // get the item container's nav bar
+        // get the component's instance, and set it to the this ViewItem
+        this.setInstance(viewComponetRef.instance);
+        this.viewElementRef(viewComponetRef.location);
+
+        // // get the item container's nav bar
         let navbarViewContainer = viewCtrl.navbarViewContainer();
 
-        // get the item's navbar protoview
-        let navbarProtoView = this.protos.navbar;
+        // // get the item's navbar protoview
+        let navbarTemplateRef = this.templateRefs.navbar;
 
         // add a navbar view if the pane has a navbar container, and the
         // item's instance has a navbar protoview to go to inside of it
-        if (navbarViewContainer && navbarProtoView) {
-          let navbarView = navbarViewContainer.create(navbarProtoView, -1, context, injector);
+        if (navbarViewContainer && navbarTemplateRef) {
+          let navbarView = navbarViewContainer.createEmbeddedView(navbarTemplateRef, -1);
 
           this.disposals.push(() => {
             navbarViewContainer.remove( navbarViewContainer.indexOf(navbarView) );
@@ -189,7 +198,7 @@ export class ViewItem {
     }
   }
 
-  viewElement(val) {
+  viewElementRef(val) {
     if (arguments.length) {
       this._vwEle = val;
     }

ionic/registry.ts

@@ -1,8 +1,4 @@
-import {ElementRef, For, Parent, onInit} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/angular2';
-
-import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {Log} from 'ionic/util'
+import {Directive} from 'angular2/angular2';
 
 import {IonicApp} from 'ionic/ionic'
 
@@ -15,17 +11,18 @@ import {IonicApp} from 'ionic/ionic'
   ],
   host: {
     'this.register-id': 'registerId'
-  },
-  lifecycle: [onInit]
+  }
 })
 export class Register {
+
   constructor(app: IonicApp) {
     this.app = app;
   }
+
   onInit() {
-    if(!this.register || !this.registerId) {
-      return;
-    }
+    if (this.register && this.registerId) {
       this.app.register(this.registerId, this.register);
     }
+  }
+
 }

ionic/transitions/transition.ts

@@ -18,7 +18,7 @@ export class Transition extends Animation {
     let leavingItem = this.leaving = nav.getStagedLeavingItem();
 
     // create animation for the entering item's "ion-view" element
-    this.enteringView = new Animation(enteringItem.viewElement());
+    this.enteringView = new Animation(enteringItem.viewElementRef());
     this.enteringView.before.addClass(SHOW_VIEW_CSS);
 
     this.enteringView.onPlay(() => {
@@ -53,7 +53,7 @@ export class Transition extends Animation {
 
     if (leavingItem) {
       // setup the leaving item if one exists (initial viewing wouldn't have a leaving item)
-      this.leavingView = new Animation(leavingItem.viewElement());
+      this.leavingView = new Animation(leavingItem.viewElementRef());
       this.leavingView.after.removeClass(SHOW_VIEW_CSS);
 
       let leavingNavbar = this.leavingNavbar = new Animation(leavingItem.navbarElement());
@@ -78,7 +78,8 @@ export class Transition extends Animation {
   }
 
   viewWidth() {
-    return this._w || (this._w = this.leaving && this.leaving.viewElement().offsetWidth);
+    // TODO: MAKE MORE BETTER
+    return this._w || (this._w = this.leaving && this.leaving.viewElementRef().nativeElement.offsetWidth);
   }
 
   /*

ionic/util/util.scss

@@ -85,6 +85,25 @@ $content-padding:    10px !default;
 }
 
 
+// Backdrop
+// --------------------------------------------------
+
+$backdrop-color:      #000 !default;
+
+backdrop {
+  position: absolute;
+  z-index: $z-index-backdrop;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $backdrop-color;
+  opacity: 0;
+  tranform: translateZ(0);
+}
+
+
+
 // Click Block
 // --------------------------------------------------
 // Fill the screen to block clicks (a better pointer-events: none)