the tab who loved me

gulpfile.js

@@ -139,7 +139,7 @@ gulp.task('bundle.deps', function() {
   return builder.loadConfig('config.js').then(function(){
     // add ionic and angular2 build paths, since config.js is loaded at runtime from
     // tests we don't want to put them there
-    builder.config({ 
+    builder.config({
       baseURL: 'file:' + process.cwd(),
       paths : {
         "ionic/*": "dist/js/es6/ionic/*.js",
@@ -157,7 +157,7 @@ gulp.task('examples', function() {
   var buildTest = lazypipe()
              .pipe(traceur, traceurOptions)
              //.pipe(babel, babelOptions) Let SystemJS load index.js at runtime, saves build time
-           
+
   // Get each test folder with gulp.src
   return gulp.src('ionic/components/*/test/*/**/*')
     .pipe(cache('examples', { optimizeMemory: true }))
@@ -169,7 +169,7 @@ gulp.task('examples', function() {
     .pipe(gulp.dest('dist/examples/'))
 
   function createIndexHTML() {
-    var indexContents = _.template( 
+    var indexContents = _.template(
       fs.readFileSync('scripts/e2e/ionic.template.html')
     )({
       buildConfig: buildConfig
@@ -400,6 +400,10 @@ function doubleCheckDistFiles() {
   if (!fs.existsSync('../angular-ionic/dist/js/dev/es5/fonts')) {
     gulp.start('old.fonts');
   }
+
+  if (!fs.existsSync('../angular-ionic/dist/js/dev/es5/polyfills')) {
+    gulp.start('old.polyfills');
+  }
 }
 
 gulp.task('old.clean', function(done) {

ionic/components/nav/nav-base.js

@@ -27,8 +27,6 @@ export class NavBase {
       injector: Injector
     ) {
 
-    console.log('NavBase, parent NavBase:', parentNavBase);
-
     this.compiler = compiler;
     this.elementRef = elementRef;
     this.domElement = elementRef.domElement;
@@ -45,11 +43,8 @@ export class NavBase {
     this.childIds = -1;
   }
 
-  initial(initial) {
-    console.log('initial')
-    if (initial) {
-      this.push(initial);
-    }
+  initial(ComponentClass) {
+    this.push(ComponentClass);
   }
 
   setPaneAnchor(elementRef) {
@@ -198,10 +193,12 @@ export class NavBase {
   }
 
   select(enteringItem, opts = {}) {
-    if (!enteringItem || this.isTransitioning()) {
+    if (!enteringItem || !enteringItem.instance || this.isTransitioning()) {
       return;
     }
 
+    enteringItem.instance.loadInitial();
+
     opts.animation = 'none';
 
     let leavingItem = this.getActive() || new NavItem();
@@ -442,15 +439,24 @@ export class NavBase {
     return null;
   }
 
-  findByInstance(instance) {
-    for (let i = 0, ii = this.items.length; i < ii; i++) {
-      if (this.items[i].instance === instance) {
-        return this.items[i];
+  getByInstance(instance) {
+    if (instance) {
+      for (let i = 0, ii = this.items.length; i < ii; i++) {
+        if (this.items[i].instance === instance) {
+          return this.items[i];
+        }
       }
     }
     return null;
   }
 
+  getByIndex(index) {
+    if (index < this.items.length && index > -1) {
+      return this.items[index];
+    }
+    return null;
+  }
+
   getPrevious(item) {
     if (item) {
       return this.items[ this.items.indexOf(item) - 1 ];
@@ -493,10 +499,6 @@ export class NavBase {
     return this.items.length;
   }
 
-  isActive(item) {
-    return (item && item.state === ACTIVE_STATE);
-  }
-
   clear() {
     let pops = [];
     for (let item of this.items) {
@@ -517,6 +519,14 @@ export class NavBase {
     return instances
   }
 
+  isActive(item) {
+    return (item && item.state === ACTIVE_STATE);
+  }
+
+  isStagedEntering(item) {
+    return (item && item.state === STAGED_ENTERING_STATE);
+  }
+
   width() {
     return this.domElement.offsetWidth;
   }

ionic/components/nav/nav-item.js

@@ -63,15 +63,14 @@ export class NavItem {
         let hostViewRef = viewContainer.create(componentProtoViewRef, -1, null, injector);
 
         let newLocation = new ElementRef(hostViewRef, 0);
-        this.instance = this.navBase.loader._viewManager.getComponent(newLocation);
+
+        this.setInstance( this.navBase.loader._viewManager.getComponent(newLocation) );
+        this.setViewElement( hostViewRef._view.render._view.rootNodes[0] );
 
         this.disposals.push(() => {
           viewContainer.remove( viewContainer.indexOf(hostViewRef) );
         });
 
-        this.viewEle = hostViewRef._view.render._view.rootNodes[0];
-        this.viewEle.classList.add('nav-item');
-
         let context = {
           boundElementIndex: 0,
           parentView: {
@@ -97,6 +96,15 @@ export class NavItem {
     });
   }
 
+  setInstance(instance) {
+    this.instance = instance;
+  }
+
+  setViewElement(viewEle) {
+    this.viewEle = viewEle;
+    viewEle && viewEle.classList.add('nav-item');
+  }
+
   cache() {
     this.didCache();
   }

ionic/components/tabs/tab.js

@@ -1,5 +1,5 @@
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
-import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Directive, Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {Optional} from 'angular2/src/di/annotations_impl'
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
@@ -55,7 +55,8 @@ export class Tab {
     this.parentNavBase = parentNavBase;
 
     this.item = new NavItem(parentNavBase);
-    this.item.instance = this
+    this.item.setInstance(this);
+    this.item.setViewElement(elementRef.domElement);
     tabs.add(this.item);
 
     this.panelId = 'tab-panel-' + this.item.id;
@@ -70,8 +71,19 @@ export class Tab {
 
     this.domElement = elementRef.domElement;
     this.config = Nav.config.invoke(this);
+  }
 
-    console.log('Tab constructor', this.item.id, ' parentNavBase:', parentNavBase);
+  onInit() {
+    if ( this.parentNavBase.isActive(this.item) || this.parentNavBase.isStagedEntering(this.item) ) {
+      this.loadInitial();
+    }
+  }
+
+  loadInitial() {
+    if (this.initial && !this._loaded) {
+      this.navBase.initial(this.initial);
+      this._loaded = true;
+    }
   }
 
   get isSelected() {

ionic/components/tabs/tabs.js

@@ -59,7 +59,7 @@ export class Tabs {
     this.navBase.add(tabItem);
 
     if (this.navBase.length() === 1) {
-      this.select(tabItem.instance);
+      this.select(0);
     }
   }
 
@@ -67,8 +67,14 @@ export class Tabs {
     return this.navBase.instances();
   }
 
-  select(tabInstance) {
-    this.navBase.select( this.navBase.findByInstance(tabInstance) );
+  select(tab) {
+    let item = null;
+    if (typeof tab === 'number') {
+      item = this.navBase.getByIndex(tab);
+    } else {
+      item = this.navBase.getByInstance(tab)
+    }
+    this.navBase.select(item);
   }
 
 }