Angular on fire

app/js/app.js

@@ -1,5 +1,5 @@
 // Declare app level module which depends on ngRoute
-angular.module('NoteWrangler', ['ngRoute', 'ngResource', 'Gravatar'])
+angular.module('NoteWrangler', ['ngRoute', 'ngResource', 'Gravatar', 'firebase'])
 .config(function($gravatarProvider){
   $gravatarProvider.setSize(100);
 });

app/js/controllers/notes-index-controller.js

@@ -1,12 +1,17 @@
-angular.module('NoteWrangler').controller('NotesIndexController', function($scope, Note, Session) {
+angular.module('NoteWrangler')
+.controller('NotesIndexController', function($scope, Note, Session) {
   // Without NgResource
   // Note.all().success(function(data) {
   //   $scope.notes = data;
   // });
-  
+
   // With NgResource
   $scope.notes = Note.query();
 
+  // With Firebase
+  // $scope.notes = Note();
+
+
   Session.sessionData().success(function(sessionUser) {
     // Create a new User from the session user data
     $scope.loggedIn = !!sessionUser;

app/js/controllers/users-index-controller.js

@@ -1,13 +1,17 @@
-angular.module('NoteWrangler').controller('UsersIndexController', function($scope, User, $gravatar) {
-
+angular.module('NoteWrangler')
+.controller('UsersIndexController', function($scope, User, $gravatar) {
+
   // Without NgResource
   // User.all().success(function(data) {
   //   $scope.users = data;
   // });
-  
+
   // With NgResource
-  $scope.users = User.query();
-
+  // $scope.users = User.query();
+
+  // With Firebase
+  $scope.users = User();
+
   $scope.gravatarUrl = function(user) {
     return $gravatar.generate(user.email);
   }

app/js/resources/note.js

@@ -3,8 +3,30 @@ This is a way of handling ajax requests using NgResource, it performs a similar
 to the Note Service.
 */
 
-angular.module('NoteWrangler').factory('Note', function NoteFactory($resource) {  
-  return $resource('/notes/:id', {}, {
+// angular.module('NoteWrangler')
+// .factory('Note', function NoteFactory($resource) {
+//   return $resource('/notes/:id', {}, {
+//     update: {
+//       method: "PUT"
+//     }
+//   });
+// });
+
+// Firebase way
+// angular.module('NoteWrangler')
+// .factory('Note', function NoteFactory($firebaseArray) {
+//   return function(){
+//     // creating the snapshot of our data
+//     var ref = new Firebase('https://notewrangler.firebaseio.com/notes');
+//     // return a synchronized array
+//     return $firebaseArray(ref);
+//   };
+// });
+
+// Firebase - Normal restful call
+angular.module('NoteWrangler')
+.factory('Note', function NoteFactory($resource) {
+  return $resource('https://notewrangler.firebaseio.com/notes/:id.json', {}, {
     update: {
       method: "PUT"
     }

app/js/resources/user.js

@@ -3,10 +3,20 @@ This is a way of handling ajax requests using NgResource, it performs a similar
 to the UserService.
 */
 
-angular.module('NoteWrangler').factory('User', function UserFactory($resource) {  
-  return $resource('/users/:id', {}, {
-    update: {
-      method: "PUT"
-    }
-  });
+// angular.module('NoteWrangler')
+// .factory('User', function UserFactory($resource) {
+//   return $resource('/users/:id', {}, {
+//     update: {
+//       method: "PUT"
+//     }
+//   });
+// });
+//
+
+angular.module('NoteWrangler')
+.factory('User', function UserFactory($firebaseArray) {
+  return function(){
+    var ref = new Firebase('https://notewrangler.firebaseio.com/users');
+    return $firebaseArray(ref);
+  };
 });

app/js/services/note.js

@@ -5,6 +5,7 @@ This is for reference only, we favor using Note over this in the app.
 
 angular.module('NoteWrangler')
 .factory('Note', ['$http', function NoteFactory($http) {
+
   return {
     all: function() {
       return $http({method: 'GET', url: "/notes"});

app/server/views/index.html

@@ -26,10 +26,10 @@
             </div>
           </div>
 
-          <div class="nav-content-layout">
+          <!-- <div class="nav-content-layout">
             <nw-session></nw-session>
             <input class="form-input-search" type="text" placeholder="Search..." ng-model="search">
-          </div>
+          </div> -->
 
         </div>
       </div>
@@ -40,7 +40,7 @@
       </div>
     </div>
     <div class="main-wrapper">
-        <div ng-view></div>
+      <div ng-view></div>
     </div>
 
     <!-- Vendors -->
@@ -55,6 +55,11 @@
     <script src="/js/vendor/gravatar.js"></script>
     <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
 
+    <!-- Firebase -->
+    <script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
+    <!-- AngularFire -->
+    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
+
     <script src="/js/app.js"></script>
     <script src="/js/routes.js"></script>
 

app/templates/directives/nw-category-item.html

@@ -4,7 +4,7 @@
 
   <i class="icon left {{category.icon}}"></i>
   {{category.name}}
-  ({{categoryCount()}})
+  <!-- ({{categoryCount()}}) -->
 
   <i class="icon close"
      ng-if='isActive()'