Merge in master to es6-shims

ionic/components/action-sheet/action-sheet.ts

@@ -9,7 +9,7 @@
 import {Component, Injectable, NgFor, NgIf} from 'angular2/angular2';
 
 import {OverlayController} from '../overlay/overlay-controller';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {Icon} from '../icon/icon';
 import {Animation} from '../../animations/animation';
 import * as util from 'ionic/util';
@@ -104,7 +104,7 @@ class ActionSheetCmp {
 @Injectable()
 export class ActionSheet {
 
-  constructor(ctrl: OverlayController, config: IonicConfig) {
+  constructor(ctrl: OverlayController, config: Config) {
     this.ctrl = ctrl;
     this._defaults = {
       enterAnimation: config.get('actionSheetEnter'),

ionic/components/button/button.ts

@@ -1,6 +1,6 @@
 import {Directive, ElementRef, Renderer, Attribute} from 'angular2/angular2';
 
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 
 
 /**
@@ -12,7 +12,7 @@ import {IonicConfig} from '../../config/config';
 export class Button {
 
   constructor(
-    config: IonicConfig,
+    config: Config,
     elementRef: ElementRef,
     renderer: Renderer,
     @Attribute('type') type: string

ionic/components/checkbox/checkbox.ts

@@ -1,7 +1,7 @@
 import {Component, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonicForm} from '../../util/form';
+import {Form} from '../../util/form';
 
 /**
  * The checkbox is no different than the HTML checkbox input, except it's styled differently
@@ -43,7 +43,7 @@ import {IonicForm} from '../../util/form';
 export class Checkbox {
 
   constructor(
-    form: IonicForm,
+    form: Form,
     @Optional() ngControl: NgControl,
     elementRef: ElementRef,
     renderer: Renderer

ionic/components/content/content.ts

@@ -1,8 +1,8 @@
 import {Component, ElementRef, Optional} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonicConfig} from '../../config/config';
-import {IonicKeyboard} from '../../util/keyboard';
+import {Config} from '../../config/config';
+import {Keyboard} from '../../util/keyboard';
 import {ViewController} from '../nav/view-controller';
 import {Animation} from '../../animations/animation';
 import {ScrollTo} from '../../animations/scroll-to';
@@ -33,9 +33,9 @@ import {ScrollTo} from '../../animations/scroll-to';
 export class Content extends Ion {
   /**
    * @param {ElementRef} elementRef  A reference to the component's DOM element.
-   * @param {IonicConfig} config  The config object to change content's default settings.
+   * @param {Config} config  The config object to change content's default settings.
    */
-  constructor(elementRef: ElementRef, config: IonicConfig, keyboard: IonicKeyboard, @Optional() viewCtrl: ViewController) {
+  constructor(elementRef: ElementRef, config: Config, keyboard: Keyboard, @Optional() viewCtrl: ViewController) {
     super(elementRef, config);
     this.scrollPadding = 0;
     this.keyboard = keyboard;

ionic/components/content/modes/ios.scss

@@ -9,6 +9,7 @@ $outer-content-md-background-color:         #efeff4 !default;
   background: $outer-content-md-background-color;
 }
 
-ion-nav.has-views {
+ion-nav.has-views,
+ion-tab.has-views {
   background: #000;
 }

ionic/components/icon/icon.ts

@@ -1,6 +1,6 @@
 import {Directive, ElementRef, Attribute, Renderer} from 'angular2/angular2';
 
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 
 
 @Directive({
@@ -19,7 +19,7 @@ export class Icon {
 
   constructor(
     private elementRef: ElementRef,
-    config: IonicConfig,
+    config: Config,
     private renderer: Renderer
   ) {
     this.eleRef = elementRef;

ionic/components/ion.ts

@@ -1,4 +1,4 @@
-import {IonicConfig} from '../config/config';
+import {Config} from '../config/config';
 import {isArray} from 'ionic/util';
 import * as dom from 'ionic/util/dom';
 
@@ -9,7 +9,7 @@ import * as dom from 'ionic/util/dom';
  * sending/receiving app-level events.
  */
 export class Ion {
-  constructor(elementRef: ElementRef, config: IonicConfig) {
+  constructor(elementRef: ElementRef, config: Config) {
     this.elementRef = elementRef;
     this.config = config;
   }

ionic/components/item/item-group.ts

@@ -1,8 +1,9 @@
 import {Directive, ElementRef, Host, Optional} from 'angular2/angular2';
 import {Content} from '../content/content';
 import {throttle} from '../../util/util';
-import {position, offset, CSS} from '../../util/dom';
-import {IonicConfig} from '../../config/config';
+import {position, offset, CSS, raf} from '../../util/dom';
+import {FeatureDetect} from '../../util/feature-detect';
+import {Config} from '../../config/config';
 
 /**
  * TODO
@@ -38,15 +39,16 @@ export class ItemGroupTitle {
    * TODO
    * @param {ElementRef} elementRef  TODO
    */
-  constructor(elementRef: ElementRef, config: IonicConfig, content: Content) {
+  constructor(elementRef: ElementRef, config: Config, content: Content, featureDetect: FeatureDetect) {
     this.isSticky = true;
     this.content = content;
     this.ele = elementRef.nativeElement;
     this.parent = this.ele.parentNode;
+    this.isCssValid = featureDetect.has('positionsticky')
   }
 
   onInit() {
-    if(!this.content) { return; }
+    if (!this.content || this.isCssValid) { return; }
 
     this.scrollContent = this.content.elementRef.nativeElement.children[0];
 
@@ -55,7 +57,6 @@ export class ItemGroupTitle {
     this.scrollTransition = 0;
     this.isSticking = false;
 
-
     this.scrollContent.addEventListener('scroll', event => this.scrollEvent(event));
 
     this.calculateScrollLimits = scrollTop => {
@@ -98,9 +99,7 @@ export class ItemGroupTitle {
       this.applyTransform(element, translateDyPixelsUp);
     }
     else {
-      // see http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
-      // see http://ionicframework.com/docs/api/utility/ionic.DomUtil/
-      requestAnimationFrame( a => this.applyTransform(element, translateDyPixelsUp) );
+      raf( a => this.applyTransform(element, translateDyPixelsUp) );
     }
   }
 

ionic/components/list/list.ts

@@ -1,7 +1,7 @@
 import {Directive, ElementRef, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {ListVirtualScroll} from './virtual';
 import * as util from 'ionic/util';
 
@@ -28,9 +28,9 @@ export class List extends Ion {
   /**
    * TODO
    * @param {ElementRef} elementRef  TODO
-   * @param {IonicConfig} config  TODO
+   * @param {Config} config  TODO
    */
-  constructor(elementRef: ElementRef, config: IonicConfig, renderer: Renderer) {
+  constructor(elementRef: ElementRef, config: Config, renderer: Renderer) {
     super(elementRef, config);
     renderer.setElementClass(elementRef, 'list', true);
     this.ele = elementRef.nativeElement;

ionic/components/menu/menu.ts

@@ -2,10 +2,10 @@ import {forwardRef, Directive, Host, EventEmitter, ElementRef} from 'angular2/an
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {ConfigComponent} from '../../config/decorators';
-import {IonicPlatform} from '../../platform/platform';
-import {IonicKeyboard} from '../../util/keyboard';
+import {Platform} from '../../platform/platform';
+import {Keyboard} from '../../util/keyboard';
 import * as gestures from  './menu-gestures';
 
 
@@ -67,9 +67,9 @@ export class Menu extends Ion {
   constructor(
     app: IonicApp,
     elementRef: ElementRef,
-    config: IonicConfig,
-    platform: IonicPlatform,
-    keyboard: IonicKeyboard
+    config: Config,
+    platform: Platform,
+    keyboard: Keyboard
   ) {
     super(elementRef, config);
     this.app = app;

ionic/components/modal/modal.ts

@@ -1,7 +1,7 @@
 import {Injectable} from 'angular2/angular2';
 
 import {OverlayController} from '../overlay/overlay-controller';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {Animation} from '../../animations/animation';
 import {makeComponent} from '../../config/decorators';
 import * as util from 'ionic/util';
@@ -14,7 +14,7 @@ import * as util from 'ionic/util';
  * ```ts
  * class MyApp {
  *
- *  constructor(modal: Modal, app: IonicApp, ionicConfig: IonicConfig) {
+ *  constructor(modal: Modal, app: IonicApp, Config: Config) {
  *    this.modal = modal;
  *  }
  *
@@ -31,7 +31,7 @@ import * as util from 'ionic/util';
 @Injectable()
 export class Modal {
 
-  constructor(ctrl: OverlayController, config: IonicConfig) {
+  constructor(ctrl: OverlayController, config: Config) {
     this.ctrl = ctrl;
     this._defaults = {
       enterAnimation: config.get('modalEnter') || 'modal-slide-in',

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

@@ -1,4 +1,4 @@
-import {App, Page, IonicApp, IonicConfig, IonicPlatform} from 'ionic/ionic';
+import {App, Page, IonicApp, Config, Platform} from 'ionic/ionic';
 import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ionic';
 
 
@@ -7,7 +7,7 @@ import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ion
 })
 class MyAppCmp {
 
-  constructor(modal: Modal, app: IonicApp, config: IonicConfig, platform: IonicPlatform) {
+  constructor(modal: Modal, app: IonicApp, config: Config, platform: Platform) {
     this.modal = modal;
 
     console.log('platforms', platform.platforms());

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

@@ -3,7 +3,7 @@ import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwa
 import {Ion} from '../ion';
 import {Icon} from '../icon/icon';
 import {ToolbarBase} from '../toolbar/toolbar';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {Page} from '../../config/decorators';
 import {IonicApp} from '../app/app';
 import {ViewController} from '../nav/view-controller';
@@ -72,7 +72,7 @@ export class Navbar extends ToolbarBase {
     app: IonicApp,
     @Optional() viewCtrl: ViewController,
     elementRef: ElementRef,
-    config: IonicConfig,
+    config: Config,
     renderer: Renderer
   ) {
     super(elementRef, config);

ionic/components/nav/nav-controller.ts

@@ -1,9 +1,9 @@
-import {Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager} from 'angular2/angular2';
+import {Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {makeComponent} from '../../config/decorators';
 import {IonicApp} from '../app/app';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {ViewController} from './view-controller';
 import {Transition} from '../../transitions/transition';
 import {SwipeBackGesture} from './swipe-back';
@@ -105,12 +105,13 @@ export class NavController extends Ion {
   constructor(
     parentnavCtrl: NavController,
     app: IonicApp,
-    config: IonicConfig,
+    config: Config,
     elementRef: ElementRef,
     compiler: Compiler,
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
-    zone: NgZone
+    zone: NgZone,
+    renderer: Renderer
   ) {
     super(elementRef, config);
 
@@ -122,6 +123,7 @@ export class NavController extends Ion {
     this._loader = loader;
     this._viewManager = viewManager;
     this._zone = zone;
+    this.renderer = renderer;
 
     this._views = [];
 
@@ -180,6 +182,10 @@ export class NavController extends Ion {
     // add the view to the stack
     this._add(enteringView);
 
+    raf(() => {
+      this._cleanup(enteringView);
+    });
+
     if (this.router) {
       // notify router of the state change
       this.router.stateChange('push', enteringView, params);
@@ -755,11 +761,11 @@ export class NavController extends Ion {
     });
   }
 
-  _cleanup() {
+  _cleanup(activeView) {
     // the active view, and the previous view, should be rendered in dom and ready to go
     // all others, like a cached page 2 back, should be display: none and not rendered
     let destroys = [];
-    let activeView = this.getActive();
+    activeView = activeView || this.getActive();
     let previousView = this.getPrevious(activeView);
 
     this._views.forEach(view => {
@@ -770,7 +776,7 @@ export class NavController extends Ion {
         } else {
           let isActiveView = (view === activeView);
           let isPreviousView = (view === previousView);
-          view.domCache(isActiveView, isPreviousView);
+          view.domCache && view.domCache(isActiveView, isPreviousView);
         }
       }
     });
@@ -783,6 +789,16 @@ export class NavController extends Ion {
     });
   }
 
+  addHasViews() {
+    if (this._views.length === 1) {
+      this._zone.runOutsideAngular(() => {
+        setTimeout(() => {
+          this.renderer.setElementClass(this.elementRef, 'has-views', true);
+        }, 200);
+      });
+    }
+  }
+
   /**
    * TODO
    * @param {TODO} nbContainer  TODO

ionic/components/nav/nav.ts

@@ -1,7 +1,7 @@
 import {Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, DynamicComponentLoader, Renderer, ViewContainerRef} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {ConfigComponent} from '../../config/decorators';
 import {NavController} from './nav-controller';
 
@@ -145,14 +145,15 @@ export class Nav extends NavController {
   constructor(
     @Optional() hostNavCtrl: NavController,
     app: IonicApp,
-    config: IonicConfig,
+    config: Config,
     elementRef: ElementRef,
     compiler: Compiler,
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
-    zone: NgZone
+    zone: NgZone,
+    renderer: Renderer
   ) {
-    super(hostNavCtrl, app, config, elementRef, compiler, loader, viewManager, zone);
+    super(hostNavCtrl, app, config, elementRef, compiler, loader, viewManager, zone, renderer);
     this.panes = [];
   }
 
@@ -253,13 +254,7 @@ export class Nav extends NavController {
             });
           }
 
-          if (this._views.length === 1) {
-            this._zone.runOutsideAngular(() => {
-              // setTimeout(function() {
-              //   componentRef && componentRef.location && componentRef.location.nativeElement.classList.add('has-views');
-              // }, 100);
-            });
-          }
+          this.addHasViews();
 
           done();
         });

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

@@ -1,5 +1,5 @@
 import {App, NavController} from 'ionic/ionic';
-import {Page, IonicConfig, IonicApp} from 'ionic/ionic';
+import {Page, Config, IonicApp} from 'ionic/ionic';
 import {NavParams, NavController} from 'ionic/ionic';
 
 
@@ -31,7 +31,7 @@ class FirstPage {
   constructor(
     nav: NavController,
     app: IonicApp,
-    config: IonicConfig
+    config: Config
   ) {
     this.nav = nav;
     this.title = 'First Page';

ionic/components/nav/test/nav-controller.spec.ts

@@ -17,7 +17,7 @@
 
 import {
   NavController,
-  IonicConfig,
+  Config,
   Page,
   ViewController
 } from 'ionic/ionic';
@@ -58,7 +58,7 @@ export function run() {
 
     // beforeEach(inject([Compiler], compiler => {
     beforeEach(() => {
-      nav = new NavController(null, null, new IonicConfig(), null, null, null, null, null);
+      nav = new NavController(null, null, new Config(), null, null, null, null, null);
     });
 
     it('should exist', () => {

ionic/components/popup/popup.ts

@@ -2,7 +2,7 @@ import {FORM_DIRECTIVES, NgControl, NgControlGroup,
   Component, ElementRef, Injectable, NgClass, NgIf, NgFor} from 'angular2/angular2';
 
 import {OverlayController} from '../overlay/overlay-controller';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {Animation} from '../../animations/animation';
 import {Button} from '../button/button';
 import * as util from 'ionic/util';
@@ -64,7 +64,7 @@ import * as util from 'ionic/util';
 @Injectable()
 export class Popup {
 
-  constructor(ctrl: OverlayController, config: IonicConfig) {
+  constructor(ctrl: OverlayController, config: Config) {
     this.ctrl = ctrl;
     this._defaults = {
       enterAnimation: config.get('popupPopIn'),

ionic/components/radio/radio.ts

@@ -1,6 +1,6 @@
 import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
 
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {Ion} from '../ion';
 import {ListHeader} from '../list/list';
 
@@ -56,13 +56,13 @@ export class RadioGroup extends Ion {
   /**
    * TODO
    * @param {ElementRef} elementRef  TODO
-   * @param {IonicConfig} config  TODO
+   * @param {Config} config  TODO
    * @param {NgControl=} ngControl  TODO
    * @param {QueryList<ListHeader>} headerQuery  TODO
    */
   constructor(
     elementRef: ElementRef,
-    config: IonicConfig,
+    config: Config,
     renderer: Renderer,
     @Optional() ngControl: NgControl,
     @Query(ListHeader) private headerQuery: QueryList<ListHeader>
@@ -194,12 +194,12 @@ export class RadioButton extends Ion {
    * Radio button constructor.
    * @param {RadioGroup=} group  The parent radio group, if any.
    * @param {ElementRef} elementRef  TODO
-   * @param {IonicConfig} config  TODO
+   * @param {Config} config  TODO
    */
   constructor(
     @Host() @Optional() group: RadioGroup,
     elementRef: ElementRef,
-    config: IonicConfig,
+    config: Config,
     renderer: Renderer
   ) {
     super(elementRef, config);

ionic/components/scroll/scroll.ts

@@ -1,7 +1,7 @@
 import {Component, ElementRef, onInit} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {Gesture} from '../../gestures/gesture';
 import {CSS} from '../../util/dom';
 import {Animation} from '../../animations/animation';
@@ -32,10 +32,10 @@ export class Scroll extends Ion {
   /**
    * TODO
    * @param {ElementRef} elementRef  TODO
-   * @param {IonicConfig} config  TODO
+   * @param {Config} config  TODO
    */
-  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
-    super(elementRef, ionicConfig);
+  constructor(elementRef: ElementRef, Config: Config) {
+    super(elementRef, Config);
 
     this.maxScale = 3;
     this.zoomDuration = 250;

ionic/components/search-bar/search-bar.ts

@@ -1,7 +1,7 @@
 import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {ConfigComponent} from '../../config/decorators';
 
 /**
@@ -41,11 +41,11 @@ export class SearchBar extends Ion {
   /**
    * TODO
    * @param {ElementRef} elementRef  TODO
-   * @param {IonicConfig} config  TODO
+   * @param {Config} config  TODO
    */
   constructor(
     elementRef: ElementRef,
-    config: IonicConfig,
+    config: Config,
     ngControl: NgControl,
     renderer: Renderer
   ) {

ionic/components/segment/segment.ts

@@ -2,7 +2,7 @@ import {Component, Directive, Renderer, ElementRef, EventEmitter, Host, forwardR
 import {Control, NgControl, NgFormControl, ControlGroup, ControlDirective} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {dom} from 'ionic/util';
 
 /**
@@ -34,16 +34,16 @@ export class Segment extends Ion {
    * TODO
    * @param {NgControl} ngControl  TODO
    * @param {ElementRef} elementRef  TODO
-   * @param {IonicConfig} config  TODO
+   * @param {Config} config  TODO
    * @param {Renderer} renderer  TODO
    */
   constructor(
     @Optional() ngControl: NgControl,
     elementRef: ElementRef,
-    ionicConfig: IonicConfig,
+    config: Config,
     renderer: Renderer
   ) {
-    super(elementRef, ionicConfig);
+    super(elementRef, config);
 
     this.ele = elementRef.nativeElement
     this.elementRef = elementRef;
@@ -244,7 +244,7 @@ export class SegmentButton {
 //   selector: 'tab-highlight'
 // })
 // class TabHighlight {
-//   constructor(@Host() tabs: Tabs, config: IonicConfig, elementRef: ElementRef) {
+//   constructor(@Host() tabs: Tabs, config: Config, elementRef: ElementRef) {
 //     if (config.get('mode') === 'md') {
 //       tabs.highlight = this;
 //       this.elementRef = elementRef;

ionic/components/show-hide-when/show-hide-when.ts

@@ -1,6 +1,6 @@
 import {Directive, Attribute, NgZone} from 'angular2/angular2'
 
-import {IonicPlatform} from '../../platform/platform';
+import {Platform} from '../../platform/platform';
 
 
 class DisplayWhen {
@@ -68,7 +68,7 @@ export class ShowWhen extends DisplayWhen {
    */
   constructor(
     @Attribute('show-when') showWhen: string,
-    platform: IonicPlatform,
+    platform: Platform,
     ngZone: NgZone
   ) {
     super(showWhen, platform, ngZone);
@@ -97,7 +97,7 @@ export class HideWhen extends DisplayWhen {
    */
   constructor(
     @Attribute('hide-when') hideWhen: string,
-    platform: IonicPlatform,
+    platform: Platform,
     ngZone: NgZone
   ) {
     super(hideWhen, platform, ngZone);

ionic/components/slides/slides.ts

@@ -4,7 +4,7 @@ import {Ion} from '../ion';
 import {Animation} from 'ionic/animations/animation';
 import {Gesture} from 'ionic/gestures/gesture';
 import {DragGesture} from 'ionic/gestures/drag-gesture';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {dom} from 'ionic/util';
 import {CSS} from '../../util/dom';
 import * as util from 'ionic/util';
@@ -55,7 +55,7 @@ export class Slides extends Ion {
    * TODO
    * @param {ElementRef} elementRef  TODO
    */
-  constructor(elementRef: ElementRef, config: IonicConfig) {
+  constructor(elementRef: ElementRef, config: Config) {
     super(elementRef, config);
     this.rapidUpdate = util.debounce(() => {
       this.update();

ionic/components/switch/switch.ts

@@ -1,7 +1,7 @@
 import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
 
-import {IonicForm} from '../../util/form';
-import {IonicConfig} from '../../config/config';
+import {Form} from '../../util/form';
+import {Config} from '../../config/config';
 import {pointerCoord} from '../../util/dom';
 
 /**
@@ -19,7 +19,7 @@ class MediaSwitch {
    * TODO
    * @param {Switch} swtch  TODO
    * @param {} elementRef  TODO
-   * @param {IonicConfig} config  TODO
+   * @param {Config} config  TODO
    */
   constructor(
     @Host() @Inject(forwardRef(() => Switch)) swtch: Switch,
@@ -99,13 +99,13 @@ export class Switch {
   /**
    * TODO
    * @param {ElementRef} elementRef  TODO
-   * @param {IonicConfig} config  TODO
+   * @param {Config} config  TODO
    * @param {NgControl=} ngControl  TODO
    */
   constructor(
-    form: IonicForm,
+    form: Form,
     elementRef: ElementRef,
-    config: IonicConfig,
+    config: Config,
     renderer: Renderer,
     @Optional() private ngControl: NgControl
   ) {

ionic/components/tabs/tab.ts

@@ -1,7 +1,7 @@
-import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, forwardRef, NgZone} from 'angular2/angular2';
+import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, forwardRef, NgZone, Renderer} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {NavController} from '../nav/nav-controller';
 import {ViewController} from '../nav/view-controller';
 import {Tabs} from './tabs';
@@ -72,25 +72,33 @@ export class Tab extends NavController {
   constructor(
     @Host() tabs: Tabs,
     app: IonicApp,
-    config: IonicConfig,
+    config: Config,
     elementRef: ElementRef,
     compiler: Compiler,
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
-    zone: NgZone
+    zone: NgZone,
+    renderer: Renderer
   ) {
     // A Tab is a NavController for its child pages
-    super(tabs, app, config, elementRef, compiler, loader, viewManager, zone);
+    super(tabs, app, config, elementRef, compiler, loader, viewManager, zone, renderer);
     this.tabs = tabs;
 
     this._isInitial = tabs.add(this);
   }
 
   onInit() {
-    console.debug('Tab onInit');
+    console.debug('Tab onInit', this.getIndex());
 
     if (this._isInitial) {
       this.tabs.select(this);
+
+    } else if (this.tabs.preloadTabs) {
+      setTimeout(() => {
+        this.load(() => {
+          console.debug('preloaded tab', this.getIndex());
+        });
+      }, 500 * this.getIndex());
     }
   }
 
@@ -144,12 +152,17 @@ export class Tab extends NavController {
         });
       }
 
-      done();
+      this.addHasViews();
 
+      done();
     });
 
   }
 
+  getIndex() {
+    return this.tabs.getIndex(this);
+  }
+
 }
 
 

ionic/components/tabs/tabs.ts

@@ -2,7 +2,7 @@ import {Directive, ElementRef, Optional, Host, NgFor, forwardRef, ViewContainerR
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {ViewController} from '../nav/view-controller';
 import {ConfigComponent} from '../../config/decorators';
 import {Icon} from '../icon/icon';
@@ -62,7 +62,8 @@ import {Icon} from '../icon/icon';
   selector: 'ion-tabs',
   defaultInputs: {
     'tabBarPlacement': 'bottom',
-    'tabBarIcons': 'top'
+    'tabBarIcons': 'top',
+    'preloadTabs': true
   },
   template:
     '<ion-navbar-section>' +
@@ -100,12 +101,13 @@ export class Tabs extends Ion {
    */
  constructor(
     app: IonicApp,
-    config: IonicConfig,
+    config: Config,
     elementRef: ElementRef,
     @Optional() viewCtrl: ViewController
   ) {
     super(elementRef, config);
     this.app = app;
+    this.preload = config.get('preloadTabs');
 
     // collection of children "Tab" instances, which extends NavController
     this._tabs = [];
@@ -201,6 +203,10 @@ export class Tabs extends Ion {
     return null;
   }
 
+  getIndex(tab) {
+    return this._tabs.indexOf(tab);
+  }
+
   /**
    * @private
    * "Touch" the active tab, either going back to the root view of the tab
@@ -241,7 +247,7 @@ let _tabIds = -1;
   }
 })
 class TabButton extends Ion {
-  constructor(@Host() tabs: Tabs, config: IonicConfig, elementRef: ElementRef) {
+  constructor(@Host() tabs: Tabs, config: Config, elementRef: ElementRef) {
     super(elementRef, config);
     this.tabs = tabs;
 
@@ -273,7 +279,7 @@ class TabButton extends Ion {
   selector: 'tab-highlight'
 })
 class TabHighlight {
-  constructor(@Host() tabs: Tabs, config: IonicConfig, elementRef: ElementRef) {
+  constructor(@Host() tabs: Tabs, config: Config, elementRef: ElementRef) {
     if (config.get('mode') === 'md') {
       tabs.highlight = this;
       this.elementRef = elementRef;

ionic/components/tap-click/tap-click.ts

@@ -1,7 +1,7 @@
 import {Injectable} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {pointerCoord, hasPointerMoved, transitionEnd} from '../../util/dom';
 import {Activator} from './activator';
 import {RippleActivator} from './ripple';
@@ -10,7 +10,7 @@ import {RippleActivator} from './ripple';
 @Injectable()
 export class TapClick {
 
-  constructor(app: IonicApp, config: IonicConfig) {
+  constructor(app: IonicApp, config: Config) {
     const self = this;
     self.app = app;
 

ionic/components/text-input/label.ts

@@ -1,6 +1,6 @@
 import {Directive, Optional} from 'angular2/angular2';
 
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {TextInput} from './text-input';
 import {pointerCoord, hasPointerMoved} from '../../util/dom';
 
@@ -23,9 +23,9 @@ import {pointerCoord, hasPointerMoved} from '../../util/dom';
 export class Label {
   /**
    * TODO
-   * @param {IonicConfig} config
+   * @param {Config} config
    */
-  constructor(config: IonicConfig, @Optional() container: TextInput) {
+  constructor(config: Config, @Optional() container: TextInput) {
     this.scrollAssist = config.get('scrollAssist');
     if (!this.id) {
       this.id = 'lbl-' + (++labelIds);

ionic/components/text-input/text-input.ts

@@ -1,12 +1,12 @@
 import {Component, Directive, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
 
-import {IonicConfig} from '../../config/config';
-import {IonicForm} from '../../util/form';
+import {Config} from '../../config/config';
+import {Form} from '../../util/form';
 import {Label} from './label';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';
 import * as dom  from '../../util/dom';
-import {IonicPlatform} from '../../platform/platform';
+import {Platform} from '../../platform/platform';
 
 
 /**
@@ -27,13 +27,13 @@ import {IonicPlatform} from '../../platform/platform';
 export class TextInput {
 
   constructor(
-    form: IonicForm,
+    form: Form,
     elementRef: ElementRef,
-    config: IonicConfig,
+    config: Config,
     renderer: Renderer,
     app: IonicApp,
     zone: NgZone,
-    platform: IonicPlatform,
+    platform: Platform,
     @Optional() @Host() scrollView: Content
   ) {
     renderer.setElementClass(elementRef, 'item', true);
@@ -403,7 +403,7 @@ export class TextInputElement {
 })
 class InputScrollAssist {
 
-  constructor(form: IonicForm, textInput: TextInput) {
+  constructor(form: Form, textInput: TextInput) {
     this.form = form;
     this.textInput = textInput;
   }

ionic/components/toolbar/toolbar.ts

@@ -1,7 +1,7 @@
 import {Component, Directive, Host, ElementRef, Renderer, Optional, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonicConfig} from '../../config/config';
+import {Config} from '../../config/config';
 import {MenuToggle} from '../menu/menu-toggle';
 import {Navbar} from '../nav-bar/nav-bar';
 
@@ -13,7 +13,7 @@ export class ToolbarBase extends Ion  {
 
   constructor(
     elementRef: ElementRef,
-    config: IonicConfig
+    config: Config
   ) {
     super(elementRef, config);
     this.itemRefs = [];
@@ -69,7 +69,7 @@ export class ToolbarBase extends Ion  {
 export class Toolbar extends ToolbarBase {
   constructor(
     elementRef: ElementRef,
-    config: IonicConfig,
+    config: Config,
     renderer: Renderer
   ) {
     super(elementRef, config);