Angular cleanup and content working

dist/ionic-simple.js

@@ -0,0 +1,203 @@
+
+(function(window, document, ionic) {
+
+  ionic.Components = [];
+
+  ionic.registerComponent = function(instance) {
+    ionic.Components.push(instance);
+  };
+
+  ionic.component = function(el) {
+    if(el) {
+      if(el.component) {
+        // this element has already been initialized as a component
+        return el.component;
+      }
+      for(var x = 0; x < ionic.Components.length; x++) {
+        if( ionic.Components[x].isComponent(el) ) {
+          // this element is a component, init its view
+          return ionic.Components[x].init(el);
+        }
+      }
+    }
+  };
+
+  function componentEvent(eventName, e) {
+    if (!e.gesture || !e.gesture.srcEvent || !e.gesture.srcEvent.target) return;
+
+    var 
+    component,
+    el = e.gesture.srcEvent.target; // get the original source event's target
+
+    while(el) {
+      // climb up the tree looking to see if the target
+      // is or is in a registered component. If its already
+      // been set that its NOT a component don't bother.
+      if(el.isComponent !== false) {
+        component = ionic.component(el);
+        if(component) {
+          component[eventName] && component[eventName](e.gesture.srcEvent);
+          return;
+        }
+        // not sure if this element is a component yet,
+        // keep climbing up the tree and check again
+        // remember that this element is not a component so 
+        // it can skip this process in the future
+        el.isComponent = false;
+      }
+      el = el.parentElement;
+    }
+  }
+
+  function onTap(e) {
+    componentEvent("tap", e);
+  }
+  ionic.on("tap", onTap, window);
+
+  function onDrag(e) {
+    componentEvent("drag", e);
+  }
+  ionic.on("drag", onDrag, window);
+
+  function onRelease(e) {
+    componentEvent("release", e);
+  }
+  ionic.on("release", onRelease, window);
+
+
+  function initalize() {
+    // remove the ready listeners
+    document.removeEventListener( "DOMContentLoaded", initalize, false );
+    window.removeEventListener( "load", initalize, false );
+
+    // trigger that the DOM is ready
+    ionic.trigger("domready");
+  }
+
+  // When the DOM is ready, initalize the webapp
+  if ( document.readyState === "complete" ) {
+    // DOM is already ready
+    setTimeout( initalize );
+  } else {
+    // DOM isn't ready yet, add event listeners
+    document.addEventListener( "DOMContentLoaded", initalize, false );
+    window.addEventListener( "load", initalize, false );
+  }
+
+})(this, document, ionic);;
+(function(ionic) {
+
+  ionic.registerComponent({
+
+    name: "listview",
+
+    isComponent: function(element) {
+      return false;
+    },
+
+    tap: function(e) {
+
+    }
+
+  });
+
+})(ionic);;
+(function(window, document, ionic) {
+
+  ionic.fn = {
+    val: function() {
+      var ret, x;
+      for(x = 0; x < this.length; x++) {
+        ret = this[x].component.val.apply(this[x].component, arguments);
+      }
+      return ret;
+    }
+  }
+
+  if (window.jQuery) {
+    // if jQuery is present then it should be the default
+    jq = window.jQuery;
+
+    // extend the methods which are in ionic.fn and in jQuery.fn
+    for(var name in ionic.fn) {
+      var jQueryFn = jq.fn[name];
+      jq.fn[name] = function() {
+        var 
+        x,
+        ret; // if incase this isn't an ionic component
+
+        for(x = 0; x < this.length; x++) {
+          ionic.component( this[x] );
+          if( this[x].component ) {
+            ret = this[x].component[name].apply(this[x].component, arguments);
+          }
+        }
+
+        // if this isn't an ionic component, run the usual jQuery fn
+        return jQueryFn.apply(this, arguments); 
+      }
+    }
+
+  } else {
+    // jQuery is not already present, so use our 'lil version instead
+    jq = {
+
+      init: function(selector, context) {
+        context = context || document;
+        var 
+        x,
+        dom = context.querySelectorAll(selector) || [];
+        for(x = 0; x < dom.length; x++) {
+          ionic.component( dom[x] );
+        }
+        dom.__proto__ = ionic.fn;
+        dom.selector = selector || '';
+        return dom;
+      }
+
+    };
+
+    $ = function(selector, context) {
+      return jq.init(selector, context);
+    }
+  }
+
+})(this, document, ionic);
+;
+(function(ionic) {
+
+  ionic.registerComponent({
+
+    isComponent: function(el) {
+      // this is a Toggle component if it has a "toggle" classname
+      return el.classList.contains("toggle");
+    },
+
+    init: function(el) {
+      if(el) {
+
+        // check if we've already created a Toggle instance for this element
+        if(!el.component) {
+
+          // find all the required elements that make up a toggle
+          var opts = { 
+            el: el,
+            checkbox: el.querySelector("input[type='checkbox']"),
+            track: el.querySelector(".track"),
+            handle: el.querySelector(".handle")
+          };
+
+          // validate its a well formed toggle with the required pieces
+          if(!opts.checkbox || !opts.track || !opts.handle) return;
+
+          // initialize an instance of a Toggle
+          el.component = new ionic.views.Toggle(opts);
+        }
+
+        return el.component;
+      }
+    }
+
+  });
+
+})(ionic);

dist/ionic.js

@@ -4,67 +4,50 @@ window.ionic = {
   controllers: {},
   views: {}
 };
-;(function(ionic) {
+;
+(function(ionic) {
+  ionic.Animator = {
+    animate: function(element, className, fn) {
+      return {
+        leave: function() {
+          var endFunc = function() {
+            console.log('Animation finished for element', element);
 
-  ionic.Platform = {
-    detect: function() {
-      var platforms = [];
+            element.classList.remove('leave');
+            element.classList.remove('leave-active');
 
-      this._checkPlatforms(platforms);
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
 
-      for(var i = 0; i < platforms.length; i++) {
-        document.body.classList.add('platform-' + platforms[i]);
-      }
+          element.classList.add('leave');
+          element.classList.add('leave-active');
+          return this;
+        },
+        enter: function() {
+          var endFunc = function() {
+            console.log('Animation finished for element', element);
 
-    },
-    _checkPlatforms: function(platforms) {
-      if(this.isCordova()) {
-        platforms.push('cordova');
-      }
-      if(this.isIOS7()) {
-        platforms.push('ios7');
-      }
-    },
+            element.classList.remove('enter');
+            element.classList.remove('enter-active');
 
-    // Check if we are running in Cordova, which will have
-    // window.device available.
-    isCordova: function() {
-      return (window.cordova || window.PhoneGap || window.phonegap);
-      //&& /^file:\/{3}[^\/]/i.test(window.location.href) 
-      //&& /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
-    },
-    isIOS7: function() {
-      if(!window.device) {
-        return false;
-      }
-      return parseFloat(window.device.version) >= 7.0;
-    }
-  }
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
 
-  ionic.Platform.detect();
-})(window.ionic);
-;(function(ionic) {
-  
-  ionic.Utils = {
-    /**
-     * extend method,
-     * also used for cloning when dest is an empty object
-     * @param   {Object}    dest
-     * @param   {Object}    src
-     * @parm	{Boolean}	merge		do a merge
-     * @returns {Object}    dest
-     */
-    extend: function extend(dest, src, merge) {
-      for (var key in src) {
-        if(dest[key] !== undefined && merge) {
-          continue;
+          element.classList.add('enter');
+          element.classList.add('enter-active');
+
+          return this;
         }
-        dest[key] = src[key];
-      }
-      return dest;
-    },
-  }
-})(window.ionic);
+      };
+    }
+  };
+})(ionic);
 ;/**
  * ion-events.js
  *
@@ -270,6 +253,8 @@ window.ionic = {
     if(this === this.window) {
       // this is a window, then only allow the Tap gesture to be added
       ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap);
+      ionic.Gestures.detection.register(ionic.Gestures.gestures.Drag);
+      ionic.Gestures.detection.register(ionic.Gestures.gestures.Release);
     } else {
       // everything else but the window
       for(var name in ionic.Gestures.gestures) {
@@ -1610,61 +1595,121 @@ window.ionic = {
   };
 })(window.ionic);
 ;(function(ionic) {
-  ionic.Animator = {
-    animate: function(element, className, fn) {
-      return {
-        leave: function() {
-          var endFunc = function() {
-            console.log('Animation finished for element', element);
 
-            element.classList.remove('leave');
-            element.classList.remove('leave-active');
+  ionic.Platform = {
+    detect: function() {
+      var platforms = [];
 
-            element.removeEventListener('webkitTransitionEnd', endFunc);
-            element.removeEventListener('transitionEnd', endFunc);
-          };
-          element.addEventListener('webkitTransitionEnd', endFunc);
-          element.addEventListener('transitionEnd', endFunc);
+      this._checkPlatforms(platforms);
 
-          element.classList.add('leave');
-          element.classList.add('leave-active');
-          return this;
-        },
-        enter: function() {
-          var endFunc = function() {
-            console.log('Animation finished for element', element);
+      for(var i = 0; i < platforms.length; i++) {
+        document.body.classList.add('platform-' + platforms[i]);
+      }
 
-            element.classList.remove('enter');
-            element.classList.remove('enter-active');
-
-            element.removeEventListener('webkitTransitionEnd', endFunc);
-            element.removeEventListener('transitionEnd', endFunc);
-          };
-          element.addEventListener('webkitTransitionEnd', endFunc);
-          element.addEventListener('transitionEnd', endFunc);
-
-          element.classList.add('enter');
-          element.classList.add('enter-active');
-
-          return this;
-        }
-      };
-    }
-  };
-})(window.ionic);
-;(function(ionic) {
-  ionic.ViewController = function(options) {
-    this.init();
-  };
-
-  ionic.ViewController.prototype = {
-    // Initialize this view controller
-    init: function() {
     },
-    // Destroy this view controller, including all child views
-    destroy: function() {
+    _checkPlatforms: function(platforms) {
+      if(this.isCordova()) {
+        platforms.push('cordova');
+      }
+      if(this.isIOS7()) {
+        platforms.push('ios7');
+      }
+    },
+
+    // Check if we are running in Cordova, which will have
+    // window.device available.
+    isCordova: function() {
+      return (window.cordova || window.PhoneGap || window.phonegap);
+      //&& /^file:\/{3}[^\/]/i.test(window.location.href) 
+      //&& /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
+    },
+    isIOS7: function() {
+      if(!window.device) {
+        return false;
+      }
+      return parseFloat(window.device.version) >= 7.0;
     }
-  };
+  }
+
+  ionic.Platform.detect();
+})(window.ionic);
+;(function(window, document, ionic) {
+
+  // polyfill use to simulate native "tap"
+  function inputTapPolyfill(ele, e) {
+    if(ele.type === "radio" || ele.type === "checkbox") {
+      ele.checked = !ele.checked;
+    } else if(ele.type === "submit" || ele.type === "button") {
+      ele.click();
+    } else {
+      ele.focus();
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  }
+
+  function tapPolyfill(e) {
+    // if the source event wasn't from a touch event then don't use this polyfill
+    if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
+
+    var 
+    e = e.gesture.srcEvent, // evaluate the actual source event, not the created event by gestures.js
+    ele = e.target;
+
+    while(ele) {
+      if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
+        return inputTapPolyfill(ele, e);
+      } else if( ele.tagName === "LABEL" ) {
+        if(ele.control) {
+          return inputTapPolyfill(ele.control, e);
+        }
+      } else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) {
+        ele.click();
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+      ele = ele.parentElement;
+    }
+
+    // they didn't tap one of the above elements
+    // if the currently active element is an input, and they tapped outside
+    // of the current input, then unset its focus (blur) so the keyboard goes away
+    var activeElement = document.activeElement;
+    if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) {
+      activeElement.blur();
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+  }
+
+  // global tap event listener polyfill for HTML elements that were "tapped" by the user
+  ionic.on("tap", tapPolyfill, window);
+
+})(this, document, ionic);
+;(function(ionic) {
+  
+  ionic.Utils = {
+    /**
+     * extend method,
+     * also used for cloning when dest is an empty object
+     * @param   {Object}    dest
+     * @param   {Object}    src
+     * @parm	{Boolean}	merge		do a merge
+     * @returns {Object}    dest
+     */
+    extend: function extend(dest, src, merge) {
+      for (var key in src) {
+        if(dest[key] !== undefined && merge) {
+          continue;
+        }
+        dest[key] = src[key];
+      }
+      return dest;
+    },
+  }
 })(window.ionic);
 ;
 (function(ionic) {
@@ -1710,7 +1755,8 @@ window.ionic = {
   };
 
 })(ionic);
-;(function(ionic) {
+;
+(function(ionic) {
 
   ionic.views.HeaderBar = function(opts) {
     this.el = opts.el;
@@ -1736,6 +1782,31 @@ window.ionic = {
     }
   };
 
+})(ionic);
+;
+(function(ionic) {
+
+  ionic.views.SideMenu = function(opts) {
+    this.el = opts.el;
+    this.width = opts.width;
+    this.isEnabled = opts.isEnabled || true;
+  };
+
+  ionic.views.SideMenu.prototype = {
+    getFullWidth: function() {
+      return this.width;
+    },
+    setIsEnabled: function(isEnabled) {
+      this.isEnabled = isEnabled;
+    },
+    bringUp: function() {
+      this.el.style.zIndex = 0;
+    },
+    pushDown: function() {
+      this.el.style.zIndex = -1;
+    }
+  };
+
 })(ionic);
 ;(function(ionic) {
 
@@ -1939,31 +2010,6 @@ ionic.views.TabBar.prototype = {
 
 })(window.ionic);
 ;
-(function(ionic) {
-
-  ionic.views.SideMenu = function(opts) {
-    this.el = opts.el;
-    this.width = opts.width;
-    this.isEnabled = opts.isEnabled || true;
-  };
-
-  ionic.views.SideMenu.prototype = {
-    getFullWidth: function() {
-      return this.width;
-    },
-    setIsEnabled: function(isEnabled) {
-      this.isEnabled = isEnabled;
-    },
-    bringUp: function() {
-      this.el.style.zIndex = 0;
-    },
-    pushDown: function() {
-      this.el.style.zIndex = -1;
-    }
-  };
-
-})(ionic);
-;
 (function(ionic) {
 
   ionic.views.Toggle = function(opts) {
@@ -1971,6 +2017,7 @@ ionic.views.TabBar.prototype = {
     this.checkbox = opts.checkbox;
     this.track = opts.track;
     this.handle = opts.handle;
+    this.openPercent = -1;
 
     // remember that this element, and all its children are apart of a component
     // and assign the component instance to each element so the lookups
@@ -1980,21 +2027,55 @@ ionic.views.TabBar.prototype = {
     this.track.isComponent = true;
     this.handle.component = this;
     this.handle.isComponent = true;
-
-    // ensure the handle is draggable
-    this.handle.draggable = true;
   };
 
   ionic.views.Toggle.prototype = {
 
     tap: function(e) {
-      e.stopPropa
-      return false;
+      this.val( !this.checkbox.checked );
+    },
+
+    drag: function(e) {
+      var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
+      var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
+
+      if(e.pageX >= slidePageRight - 4) {
+        this.val(true);
+      } else if(e.pageX <= slidePageLeft) {
+        this.val(false);
+      } else {
+        this.setOpenPercent( Math.round( (1 - ((slidePageRight - e.pageX) / (slidePageRight - slidePageLeft) )) * 100) );
+      }
+    },
+
+    setOpenPercent: function(openPercent) {
+      // only make a change if the new open percent has changed
+      if(this.openPercent < 0 || (openPercent < (this.openPercent - 3) || openPercent > (this.openPercent + 3) ) ) {
+        this.openPercent = openPercent;
+
+        if(openPercent === 0) {
+          this.val(false);
+        } else if(openPercent === 100) {
+          this.val(true);
+        } else {
+          var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
+          openPixel = (openPixel < 1 ? 0 : openPixel);
+          this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
+        }
+      }
+    },
+
+    release: function(e) {
+      this.val( this.openPercent >= 50 );
     },
 
     val: function(value) {
       if(value === true || value === false) {
+        if(this.handle.style.webkitTransform !== "") {
+          this.handle.style.webkitTransform = "";
+        }
         this.checkbox.checked = value;
+        this.openPercent = (value ? 100 : 0);
       }
       return this.checkbox.checked;
     }
@@ -2535,59 +2616,17 @@ ionic.controllers.TabBarController.prototype = {
 }
 
 })(window.ionic);
-;(function(window, document, ionic) {
+;(function(ionic) {
+  ionic.ViewController = function(options) {
+    this.init();
+  };
 
-  // polyfill use to simulate native "tap"
-  function inputTapPolyfill(ele, e) {
-    if(ele.type === "radio" || ele.type === "checkbox") {
-      ele.checked = !ele.checked;
-    } else if(ele.type === "submit" || ele.type === "button") {
-      ele.click();
-    } else {
-      ele.focus();
+  ionic.ViewController.prototype = {
+    // Initialize this view controller
+    init: function() {
+    },
+    // Destroy this view controller, including all child views
+    destroy: function() {
     }
-    e.stopPropagation();
-    e.preventDefault();
-    return false;
-  }
-
-  function tapPolyfill(e) {
-    // if the source event wasn't from a touch event then don't use this polyfill
-    if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
-
-    var 
-    e = e.gesture.srcEvent, // evaluate the actual source event, not the created event by gestures.js
-    ele = e.target;
-
-    while(ele) {
-      if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
-        return inputTapPolyfill(ele, e);
-      } else if( ele.tagName === "LABEL" ) {
-        if(ele.control) {
-          return inputTapPolyfill(ele.control, e);
-        }
-      } else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) {
-        ele.click();
-        e.stopPropagation();
-        e.preventDefault();
-        return false;
-      }
-      ele = ele.parentElement;
-    }
-
-    // they didn't tap one of the above elements
-    // if the currently active element is an input, and they tapped outside
-    // of the current input, then unset its focus (blur) so the keyboard goes away
-    var activeElement = document.activeElement;
-    if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) {
-      activeElement.blur();
-      e.stopPropagation();
-      e.preventDefault();
-      return false;
-    }
-  }
-
-  // global tap event listener polyfill for HTML elements that were "tapped" by the user
-  ionic.on("tap", tapPolyfill, window);
-
-})(this, document, ionic);
+  };
+})(window.ionic);

js/ext/angular/src/directive/ionicContent.js

@@ -0,0 +1,46 @@
+angular.module('ionic.ui.content', {})
+
+/*
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: '<div class="content"></div>'
+  }
+});
+*/
+
+/*
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      hasHeader: '@',
+      hasTabs: '@'
+    },
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
+  }
+})
+*/
+
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: true,
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}"></div>',
+    compile: function(element, attr, transclude, navCtrl) {
+      return function($scope, $element, $attr) {
+        $scope.hasHeader = attr.hasHeader;
+        $scope.hasTabs = attr.hasTabs;
+
+        var newScope = $scope.$parent.$new();
+
+        $element.append(transclude(newScope));
+      };
+    }
+  }
+})

js/ext/angular/src/directive/ionicNav.js

@@ -1,24 +1,8 @@
-angular.module('ionic.ui', ['ngTouch'])
-
-.directive('content', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: true,
-    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}"></div>',
-    compile: function(element, attr, transclude, navCtrl) {
-      return function($scope, $element, $attr) {
-        $scope.hasHeader = attr.hasHeader;
-      };
-    }
-  }
-})
+angular.module('ionic.ui.nav', ['ionic.ui'])
 
 .controller('NavCtrl', function($scope, $element, $compile) {
   var _this = this;
 
-
   angular.extend(this, ionic.controllers.NavController.prototype);
 
   ionic.controllers.NavController.call(this, {
@@ -42,7 +26,6 @@ angular.module('ionic.ui', ['ngTouch'])
   }
 
   $scope.pushController = function(controller) {
-    //console.log('PUSHING OCNTROLLER', controller);
     _this.push(controller);
   }
 

js/ext/angular/src/directive/ionicSideMenu.js

@@ -1,4 +1,4 @@
-angular.module('ionic.ui', [])
+angular.module('ionic.ui.sideMenu', [])
 
 .controller('SideMenuCtrl', function($scope) {
   var _this = this;

js/ext/angular/src/directive/ionicTabBar.js

@@ -1,17 +1,4 @@
-angular.module('ionic.ui', [])
-
-.directive('content', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: {
-      hasHeader: '@',
-      hasTabs: '@'
-    },
-    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
-  }
-})
+angular.module('ionic.ui.tabs', ['ionic.ui.content'])
 
 .controller('TabsCtrl', function($scope) {
   var _this = this;

js/ext/angular/src/ionicContent.js

@@ -1,9 +0,0 @@
-angular.module('ionic.ui.content', {})
-
-.directive('content', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    template: '<div class="content"></div>'
-  }
-});

js/ext/angular/test/nav.html

@@ -48,7 +48,8 @@
     </nav-controller>
 
     <script src="../../../../dist/ionic.js"></script>
-    <script src="../src/ionicNav.js"></script>
+    <script src="../src/directive/ionicContent.js"></script>
+    <script src="../src/directive/ionicNav.js"></script>
     <script>
       var pageNumber = 0;
 

js/ext/angular/test/sideMenu.html

@@ -32,13 +32,13 @@
         </ul>
       </menu>
       <menu side="right">
-        <h2>Right</h2>
+        <h2>Items</h2>
       </menu>
     </side-menu-controller>
     <script src="../../../../dist/ionic.js"></script>
-    <script src="../src/ionicSideMenu.js"></script>
+    <script src="../src/directive/ionicSideMenu.js"></script>
     <script>
-      angular.module('sideMenuTest', ['ionic.ui'])
+      angular.module('sideMenuTest', ['ionic.ui.sideMenu'])
 
       /*
       var Controller = function(opts) {

js/ext/angular/test/subControllers.html

@@ -0,0 +1,129 @@
+<html ng-app="sideMenuTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Sub Controllers</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../../../dist/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+  </head>
+  <body>
+
+    <side-menu-controller>
+      <div class="full-section" side-menu-content>
+        <header class="bar bar-header bar-dark">
+          <a href="#" class="button"><i class="icon-reorder"></i></a>
+          <h1 class="title">Slide me</h1>
+        </header>
+        <div class="content has-header">
+          <h1>Slide me side to side!</h1>
+        </div>
+      </div>
+      <menu side="left">
+        <h2>Left</h2>
+        <ul class="list">
+          <a href="#" class="list-item" ng-repeat="item in list">
+            {{item.text}}
+          </a>
+        </ul>
+      </menu>
+      <menu side="right">
+        <h2>Items</h2>
+        <tab-controller>
+          <div title="Home" icon="icon-home" class="tab-content">
+            <header class="bar bar-header bar-dark">
+              <h1 class="title">Tab Bars</h1>
+            </header>
+            <content has-header="true" has-tabs="true">
+              <h1>Home</h1>
+              <ul class="list">
+                <a href="#" class="list-item" ng-repeat="item in items">
+                  {{item.title}}
+                </a>
+              </ul>
+            </content>
+          </div>
+
+          <div title="About" icon="icon-info" class="tab-content">
+            <header class="bar bar-header bar-success">
+              <h1 class="title">About</h1>
+            </header>
+            <content has-header="true" has-tabs="true">
+              <h1>About Us</h1>
+            </content>
+          </div>
+
+          <div title="Settings" icon="icon-gear" class="tab-content">
+            <header class="bar bar-header bar-dark">
+              <h1 class="title">Settings</h1>
+            </header>
+            <content has-header="true" has-tabs="true">
+              <h1>Settings</h1>
+            </content>
+          </div>
+        </tab-controller>
+      </menu>
+    </side-menu-controller>
+    <script src="../../../../dist/ionic.js"></script>
+    <script src="../src/ionicSideMenu.js"></script>
+    <script src="../src/ionicTabBar.js"></script>
+    <script>
+      angular.module('sideMenuTest', ['ionic.ui'])
+
+      /*
+      var Controller = function(opts) {
+        var _this = this;
+
+        this.el = opts.el;
+        this.animateClass = opts.animateClass;
+
+        // Bind release and drag listeners
+        window.ionic.onGesture('drag', function(e) {
+          _this.onDrag && _this.onDrag(e);
+        }, this.el);
+
+        window.ionic.onGesture('release', function(e) {
+          _this.endDrag && _this._endDrag(e);
+        }, this.el);
+      };
+      Controller.prototype = {
+        onDrag: function(e) {},
+        endDrag: function(e) {},
+        getTranslateX: function() {
+          var r = /translate3d\((-?.+)px/;
+          var d = r.exec(this.el.style.webkitTransform);
+
+          if(d && d.length > 0) {
+            return parseFloat(d[1]);
+          }
+          return 0;
+        },
+        setTranslateX: function(amount) {
+          this.el.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
+        },
+        enableAnimation: function() {
+          this.el.classList.add(this.animateClass);
+        },
+        disableAnimation: function() {
+          this.el.classList.remove(this.animateClass);
+        }
+      };
+
+      var l = new SideMenu({ el: document.getElementById('my-left-panel'), width: 270 });
+      var r = new SideMenu({ el: document.getElementById('my-right-panel'), width: 270 });
+      var c = new Controller({ el: document.createElement('content') });
+
+      var ctrl = new SideMenuController({
+        left: l,
+        right: r,
+        content: c
+      });
+      */
+    </script>
+  </body>
+</html>
+

js/ext/angular/test/tabs.html

@@ -50,7 +50,8 @@
     </tab-controller>
 
     <script src="../../../../dist/ionic.js"></script>
-    <script src="../src/ionicTabBar.js"></script>
+    <script src="../src/directive/ionicContent.js"></script>
+    <script src="../src/directive/ionicTabBar.js"></script>
     <script>
       angular.module('tabsTest', ['ionic.ui'])