Hacking Angular Stuff

Gruntfile.js

@@ -33,6 +33,7 @@ module.exports = function(grunt) {
       distAngular: {
         src: [
           'js/ext/angular/src/ionicAngular.js',
+          'js/ext/angular/src/service/**/*.js',
           'js/ext/angular/src/directive/**/*.js'
         ],
         dest: 'dist/<%= pkg.name %>-angular.js'

dist/ionic-angular.js

@@ -1,5 +1,21 @@
 angular.module('ionic.ui', ['ionic.ui.content', 'ionic.ui.tabs', 'ionic.ui.nav', 'ionic.ui.sideMenu']);
 ;
+angular.module('ionic.service', [])
+
+.factory('TemplateLoader', ['$q', '$http', '$templateCache', function($q, $http, $templateCache) {
+  return {
+    load: function(url) {
+      var deferred = $q.defer();
+
+      $http.get(url, { cache: $templateCache }).success(function(html) {
+        deferred.resolve(html && html.trim());
+      });
+
+      return deferred.promise;
+    }
+  }
+}]);
+;
 angular.module('ionic.ui.content', {})
 
 // The content directive is a core scrollable content area
@@ -24,13 +40,26 @@ angular.module('ionic.ui.content', {})
   }
 })
 ;
-angular.module('ionic.ui.nav', [])
+angular.module('ionic.ui.nav', ['ionic.service'])
 
-.controller('NavCtrl', function($scope, $element, $compile) {
+.controller('NavCtrl', ['$scope', '$element', '$compile', 'TemplateLoader', function($scope, $element, $compile, TemplateLoader) {
   var _this = this;
 
   angular.extend(this, ionic.controllers.NavController.prototype);
 
+  this.pushFromTemplate = function(tmpl) {
+    data = TemplateLoader.load(tmpl).then(function(data) {
+      console.log('Nav loaded template', data);
+
+      var childScope = $scope.$new();
+      childScope.isVisible = true;
+      
+      $compile(data)(childScope, function(cloned, scope) {
+        $element.append(cloned);
+      });
+    });
+  }
+
   ionic.controllers.NavController.call(this, {
     content: {
     },
@@ -38,34 +67,28 @@ angular.module('ionic.ui.nav', [])
       shouldGoBack: function() {
       },
       setTitle: function(title) {
-        $scope.title = title;
+        $scope.navController.title = title;
       },
       showBackButton: function(show) {
       },
     }
   });
 
-  $scope.controllers = this.controllers;
+  $scope.pushController = function(scope) {
-
+    _this.push(scope);
-  $scope.getTopController = function() {
+  };
-    return $scope.controllers[$scope.controllers.length-1];
-  }
-
-  $scope.pushController = function(controller) {
-    _this.push(controller);
-  }
 
   $scope.navController = this;
-})
+}])
 
-.directive('navController', function() {
+.directive('navCtrl', function() {
   return {
     restrict: 'E',
     replace: true,
     transclude: true,
     controller: 'NavCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><div ng-transclude></div></div>',
+    template: '<div class="view" ng-transclude></div>',
     compile: function(element, attr, transclude, navCtrl) {
       return function($scope, $element, $attr) {
       };
@@ -100,6 +123,15 @@ angular.module('ionic.ui.nav', [])
       scope.title = attrs.title;
       scope.isVisible = true;
       scope.pushController(scope);
+
+      scope.$watch('isVisible', function(value) {
+        console.log('Visiblity changed', value);
+        if(value) {
+          element[0].classList.remove('hidden');
+        } else {
+          element[0].classList.add('hidden');
+        }
+      });
     }
   }
 });
@@ -164,7 +196,7 @@ angular.module('ionic.ui.sideMenu', [])
   $scope.contentTranslateX = 0;
 })
 
-.directive('sideMenuController', function() {
+.directive('sideMenuCtrl', function() {
   return {
     restrict: 'E',
     controller: 'SideMenuCtrl',

example/toderp2/index.html

@@ -35,25 +35,36 @@
     </nav-ctrl>
 
     <!-- Splash -->
-    <script id="/splash.html" type="text/ng-template">
+    <script id="splash.html" type="text/ng-template">
-      <div class="vc">
+      <div class="view" nav-content>
         <h1>Toderp</h1>
       </div>
     </script>
 
     <!-- Login -->
-    <script id="/login.html" type="text/ng-template">
+    <script id="login.html" type="text/ng-template">
-      <div></div>
+      <div class="view" nav-content ng-controller="LoginCtrl">
+        <h1>Login</h1>
+      </div>
     </script>
 
     <!-- Signup -->
-    <script id="/signup.html" type="text/ng-template">
+    <script id="signup.html" type="text/ng-template">
-      <div></div>
+      <div class="view" nav-content ng-controller="SignupCtrl"></div>
     </script>
 
     <!-- Tasks -->
-    <script id="/tasks.html" type="text/ng-template">
+    <script id="tasks.html" type="text/ng-template">
-      <side-menu-ctrl>
+      <side-menu-ctrl nav-content class="view" ng-controller="TasksCtrl">
+        <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">
           <header>
             <div class="toderp-logo"></div>
@@ -67,8 +78,6 @@
             </list>
           </content>
         </menu>
-        <view>
-        </view>
       </side-menu-ctrl>
     </script>
   </body>

example/toderp2/js/app.js

@@ -1,4 +1,13 @@
-angular.module('ionic.todo', ['ionic.todo.services', 'ionic.todo.controllers', 'firebase', 'ngRoute', 'ngAnimate'])
+angular.module('ionic.todo', [
+               'ionic.todo.services',
+               'ionic.todo.controllers',
+
+               'ionic.service', 
+
+               'ionic.ui.nav',
+               'ionic.ui.sideMenu',
+
+               'firebase', 'ngRoute', 'ngAnimate'])
 
 // Our Firebase URL
 .constant('FIREBASE_URL', 'https://ionic-todo-demo.firebaseio.com/');

example/toderp2/js/controllers.js

@@ -2,6 +2,14 @@ angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
 
 // The main controller for the application
 .controller('TodoCtrl', function($scope, $rootScope, AuthService) {
+  $scope.candy = 'yes';
+
+  $scope.navController.pushFromTemplate('splash.html');
+  $scope.navController.pushFromTemplate('login.html');
+  $scope.navController.pushFromTemplate('signup.html');
+  $scope.navController.pushFromTemplate('tasks.html');
+
+  console.log($scope);
   $rootScope.$on('angularFireAuth:login', function(evt, user) {
     $scope.display.screen = 'tasks';
   });
@@ -42,6 +50,9 @@ angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
   };
 })
 
+.controller('ProjectsCtrl', function($scope, angularFire, FIREBASE_URL) {
+})
+
 // The tasks controller (main app controller)
 .controller('TasksCtrl', function($scope, angularFire, FIREBASE_URL) {
   var taskRef = new Firebase(FIREBASE_URL + '/todos');

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

@@ -1,10 +1,23 @@
-angular.module('ionic.ui.nav', [])
+angular.module('ionic.ui.nav', ['ionic.service'])
 
-.controller('NavCtrl', function($scope, $element, $compile) {
+.controller('NavCtrl', ['$scope', '$element', '$compile', 'TemplateLoader', function($scope, $element, $compile, TemplateLoader) {
   var _this = this;
 
   angular.extend(this, ionic.controllers.NavController.prototype);
 
+  this.pushFromTemplate = function(tmpl) {
+    data = TemplateLoader.load(tmpl).then(function(data) {
+      console.log('Nav loaded template', data);
+
+      var childScope = $scope.$new();
+      childScope.isVisible = true;
+      
+      $compile(data)(childScope, function(cloned, scope) {
+        $element.append(cloned);
+      });
+    });
+  }
+
   ionic.controllers.NavController.call(this, {
     content: {
     },
@@ -12,25 +25,19 @@ angular.module('ionic.ui.nav', [])
       shouldGoBack: function() {
       },
       setTitle: function(title) {
-        $scope.title = title;
+        $scope.navController.title = title;
       },
       showBackButton: function(show) {
       },
     }
   });
 
-  $scope.controllers = this.controllers;
+  $scope.pushController = function(scope) {
-
+    _this.push(scope);
-  $scope.getTopController = function() {
+  };
-    return $scope.controllers[$scope.controllers.length-1];
-  }
-
-  $scope.pushController = function(controller) {
-    _this.push(controller);
-  }
 
   $scope.navController = this;
-})
+}])
 
 .directive('navCtrl', function() {
   return {
@@ -39,7 +46,7 @@ angular.module('ionic.ui.nav', [])
     transclude: true,
     controller: 'NavCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><div ng-transclude></div></div>',
+    template: '<div class="view" ng-transclude></div>',
     compile: function(element, attr, transclude, navCtrl) {
       return function($scope, $element, $attr) {
       };
@@ -74,6 +81,15 @@ angular.module('ionic.ui.nav', [])
       scope.title = attrs.title;
       scope.isVisible = true;
       scope.pushController(scope);
+
+      scope.$watch('isVisible', function(value) {
+        console.log('Visiblity changed', value);
+        if(value) {
+          element[0].classList.remove('hidden');
+        } else {
+          element[0].classList.add('hidden');
+        }
+      });
     }
   }
 });

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

@@ -58,7 +58,7 @@ angular.module('ionic.ui.sideMenu', [])
   $scope.contentTranslateX = 0;
 })
 
-.directive('sideMenuController', function() {
+.directive('sideMenuCtrl', function() {
   return {
     restrict: 'E',
     controller: 'SideMenuCtrl',

js/ext/angular/src/service/ionicTemplateLoad.js

@@ -0,0 +1,15 @@
+angular.module('ionic.service', [])
+
+.factory('TemplateLoader', ['$q', '$http', '$templateCache', function($q, $http, $templateCache) {
+  return {
+    load: function(url) {
+      var deferred = $q.defer();
+
+      $http.get(url, { cache: $templateCache }).success(function(html) {
+        deferred.resolve(html && html.trim());
+      });
+
+      return deferred.promise;
+    }
+  }
+}]);