better gulp watch

gulpfile.js

@@ -40,12 +40,17 @@ gulp.task('watch', function() {
     'polyfills',
 
     function() {
-      watch('ionic/**/*.js', function() {
-        gulp.start('ionic.copy.js');
+      watch('ionic/**/*.js', function(file) {
+        var splt = file.path.split('/');
+        var filename = splt[splt.length - 1];
+
+        var dest = file.path.replace(__dirname, '../angular-ionic/modules');
+        dest = dest.replace(filename, '')
+
+        return gulp.src(file.path).pipe(gulp.dest(dest));
       });
 
       watch('ionic/components/*/test/**/*', function() {
-        gulp.start('ionic.copy.js');
         gulp.start('ionic.examples');
       });
 

ionic/components/nav/nav-item.js

@@ -11,8 +11,8 @@ import {TabPane, NavPane, NavPaneSection} from './nav';
 
 export class NavItem {
 
-  constructor(nav, Component, params = {}) {
-    this.nav = nav;
+  constructor(navBase, Component, params = {}) {
+    this.navBase = navBase;
     this.Component = Component;
     this.params = params;
     this.id = util.nextUid();
@@ -32,7 +32,7 @@ export class NavItem {
 
   stage(callback) {
     // update if it's possible to go back from this nav item
-    //this.enableBack = !!this.nav.getPrevious(this);
+    //this.enableBack = !!this.navBase.getPrevious(this);
 
     if (this.instance) {
       // already compiled this view
@@ -40,29 +40,29 @@ export class NavItem {
     }
 
     // compile the Component
-    this.nav.compiler.compileInHost(this.Component).then(componentProtoViewRef => {
+    this.navBase.compiler.compileInHost(this.Component).then(componentProtoViewRef => {
 
       // 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 = getProtoViewStructure(componentProtoViewRef);
 
       // get the appropriate NavPane which this NavItem will fit into
-      this.nav.getPane(itemStructure, navPane => {
+      this.navBase.getPane(itemStructure, pane => {
 
         // create a new injector just for this NavItem
-        let injector = this.nav.injector.resolveAndCreateChild([
+        let injector = this.navBase.injector.resolveAndCreateChild([
           bind(NavBase).toValue(this.navBase),
-          bind(NavController).toValue(this.nav.navCtrl),
+          bind(NavController).toValue(this.navBase.navCtrl),
           bind(NavParams).toValue(new NavParams(this.params)),
           bind(NavItem).toValue(this)
         ]);
 
         // add the content of the view to the content area
-        let viewContainer = navPane.contentContainerRef;
+        let viewContainer = pane.contentContainerRef;
         let hostViewRef = viewContainer.create(componentProtoViewRef, -1, null, injector);
 
         let newLocation = new ElementRef(hostViewRef, 0);
-        this.instance = this.nav.loader._viewManager.getComponent(newLocation);
+        this.instance = this.navBase.loader._viewManager.getComponent(newLocation);
 
         this.disposals.push(() => {
           viewContainer.remove( viewContainer.indexOf(hostViewRef) );
@@ -79,7 +79,7 @@ export class NavItem {
         };
 
         // add only the sections it needs
-        let navbarViewContainer = navPane.sections.navbar.viewContainerRef;
+        let navbarViewContainer = pane.sections.navbar.viewContainerRef;
         if (navbarViewContainer && itemStructure.navbar && this.protos.navbar) {
           this.navbarView = navbarViewContainer.create(this.protos.navbar, -1, context, injector);
 

ionic/components/nav/nav-pane.js

@@ -12,10 +12,10 @@ import {Nav} from './nav';
   template: `
     <template nav-section-anchor></template>
     <section class="content-container">
-      <template view-anchor></template>
+      <template content-anchor></template>
     </section>
   `,
-  directives: [NavPaneSectionAnchor, NavViewAnchor]
+  directives: [NavPaneSectionAnchor, NavContentAnchor]
 })
 export class NavPane {
   constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) {
@@ -29,9 +29,6 @@ export class NavPane {
 }
 
 
-// Used to dynamically create new sections for a NavPane
-// This is simply a reference point to create new sections
-// Navbar, toolbar, and tabbar sections would be created next to this
 @Directive({
   selector: 'template[nav-section-anchor]'
 })
@@ -42,12 +39,10 @@ class NavPaneSectionAnchor {
 }
 
 
-// Where the content of the NavItem goes next to. All NavPanes have content.
-// This is simply a reference point to where content goes
 @Directive({
-  selector: 'template[view-anchor]'
+  selector: 'template[content-anchor]'
 })
-class NavViewAnchor {
+class NavContentAnchor {
   constructor(@Parent() navPane: NavPane, viewContainerRef: ViewContainerRef) {
     navPane.contentContainerRef = viewContainerRef;
   }

ionic/components/tabs/tab.js

@@ -35,36 +35,43 @@ import {IonicComponent} from 'ionic/config/component';
 })
 @View({
   template: `
-    <template view-anchor></template>
+    <template content-anchor></template>
     <content></content>
   `,
-  directives: [TabViewAnchor]
+  directives: [TabContentAnchor]
 })
 export class Tab {
   constructor(
       @Parent() tabs: Tabs,
       @Optional() parentNavBase: NavBase,
-      compiler:Compiler,
+      compiler: Compiler,
       elementRef: ElementRef,
       loader: DynamicComponentLoader,
-      injector: Injector
+      injector: Injector,
+      viewContainerRef: ViewContainerRef
     ) {
     this.navBase = new NavBase(parentNavBase, compiler, elementRef, loader, injector);
 
-    this.domElement = elementRef.domElement;
-    this.config = Nav.config.invoke(this);
+    this.viewContainerRef = viewContainerRef;
+
+    this.sections = parentNavBase;
+    this.navBase.panes['_n'] = this;
 
     this.isSelected = false;
     this.ariaHidden = true;
+
     tabs.addTab(this);
     this.panelId = 'tab-panel-' + this.id;
     this.labeledBy = 'tab-button-' + this.id;
 
-    console.log('Tab constructor', this.id);
+    this.domElement = elementRef.domElement;
+    this.config = Nav.config.invoke(this);
+
+    console.log('Tab constructor', this.id, ' parentNavBase:', parentNavBase);
   }
 
   onInit() {
-    //this.navBase.initial(this.initial);
+    this.navBase.initial(this.initial);
   }
 
   select(shouldSelect) {
@@ -79,18 +86,14 @@ export class Tab {
     this.ariaHidden = !shouldSelect;
   }
 
-  setPaneAnchor(elementRef) {
-    this.navBase.setPaneAnchor(elementRef);
-  }
-
 }
 
 
 @Directive({
-  selector: 'template[view-anchor]'
+  selector: 'template[content-anchor]'
 })
-class TabViewAnchor {
-  constructor(@Parent() tab: Tab, elementRef: ElementRef) {
-    tab.setPaneAnchor(elementRef);
+class TabContentAnchor {
+  constructor(@Parent() tab: Tab, viewContainerRef: ViewContainerRef) {
+    tab.contentContainerRef = viewContainerRef;
   }
 }

ionic/tabs.js

@@ -0,0 +1,107 @@
+import {Ancestor, Parent} from 'angular2/src/core/annotations_impl/visibility';
+import {Optional} from 'angular2/src/di/annotations_impl'
+import {Directive, Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
+import {Injector} from 'angular2/di';
+import {NgFor} from 'angular2/angular2';
+import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
+
+import {IonicComponent} from '../../config/component';
+import {Tab} from './tab';
+import {TabButton} from './tab-button';
+import {Icon} from '../icon/icon';
+import {Nav, NavPane} from '../nav/nav';
+import {NavBase} from '../nav/nav-base';
+import {NavItem} from '../nav/nav-item';
+
+
+let tabsId = -1;
+
+@Component({
+  selector: 'ion-tabs',
+  properties: [
+    'tabBarPlacement',
+    'tabBarIcons'
+  ],
+  lifecycle: [onInit]
+})
+@View({
+  template: `
+    <nav class="navbar-container tab-bar-container">
+      <div class="tab-bar" role="tablist">
+        <button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
+          <icon [name]="t.tabIcon" class="tab-button-icon"></icon>
+          <span class="tab-button-text">{{t.tabTitle}}</span>
+        </button>
+      </div>
+    </nav>
+    <section class="content-container">
+      <content></content>
+    </section>
+  `,
+  directives: [NgFor, TabButton, Icon]
+})
+export class Tabs {
+  constructor(
+    elementRef: ElementRef,
+    @Optional() parentNavBase: NavBase
+  ) {
+    this.id = ++tabsId;
+    this.tabIds = 0;
+    this.tabs = [];
+
+    this.domElement = elementRef.domElement;
+    this.config = Tabs.config.invoke(this);
+
+    console.log('Tabs constructor', this.id, ' parentNavBase:', parentNavBase);
+  }
+
+  onInit() {
+    if (this.tabs.length > 0) {
+      this.selectTab(this.tabs[0]);
+    }
+  }
+
+  addTab(tab) {
+    tab.id = this.id + '' + (++this.tabIds);
+    this.tabs.push(tab);
+  }
+
+  selectTab(tabToSelect) {
+    if (typeof tabToSelect === 'number') {
+      let index = tabToSelect;
+      tabToSelect = null;
+      if (index < this.tabs.length) {
+        tabToSelect = this.tabs[index];
+      }
+    }
+    if (!tabToSelect || this._selected === tabToSelect) return;
+
+    this.tabs.forEach(tab => {
+      tab.select( (tab === tabToSelect) );
+    });
+
+    this._selected = tabToSelect;
+  }
+
+}
+new IonicComponent(Tabs, {
+  properties: {
+    tabBarPlacement: {
+      defaults: {
+        ios: 'bottom',
+        android: 'top',
+        core: 'bottom'
+      }
+    },
+    tabBarIcons: {
+      defaults: {
+        ios: 'top',
+        android: 'top',
+        core: 'top'
+      }
+    }
+  }
+});