justinobney · March 24, 2016 20:41 · Jul 3, 2014 · Jul 3, 2014 · Jul 3, 2014 · Jul 3, 2014
diff --git a/$watching.js b/$watching.js
@@ -4,7 +4,7 @@ app.controller('Ctrl1', function($scope, DataFactory) {
 
   // watch the collection for changes
   $scope.$watch(watchSource, function(current, previous){
-    this.items = current
+    this.items = current;
   });
 
   function watchSource(){

diff --git a/$watching.js b/$watching.js
@@ -3,7 +3,7 @@ app.controller('Ctrl1', function($scope, DataFactory) {
   this.items = DataFactory.items;
 
   // watch the collection for changes
-  $scope.$watch(warchSource, function(current, previous){
+  $scope.$watch(watchSource, function(current, previous){
     this.items = current
   });
 

diff --git a/collectionreset.js b/collectionreset.js
@@ -1,5 +1,5 @@
 svc.getDataStream = function() {
-  return $q.when(fakeHttpResponse())
+  return $q.when(fakeData)
     .then(function(data) {
       // here we are clearly reseting the data
       // to the response of the call.. Why doesn't

diff --git a/$watching.js b/$watching.js
@@ -1,6 +1,4 @@
-var app1 = angular.module('app1', []);
-
-app1.controller('Ctrl1', function($scope, DataFactory) {
+app.controller('Ctrl1', function($scope, DataFactory) {
   // bind the controller property to the service collection
   this.items = DataFactory.items;
 
@@ -14,7 +12,7 @@ app1.controller('Ctrl1', function($scope, DataFactory) {
   }  
 });
 
-app1.factory('DataFactory', function($q, $timeout) {
+app.factory('DataFactory', function($q, $timeout) {
   var svc = {};
   svc.items = [];
 

diff --git a/blog-ng-list-services1.js b/blog-ng-list-services1.js
@@ -1,7 +1,4 @@
-// create the application
-var app1 = angular.module('app1', []);
-
-app1.controller('Ctrl1', function(DataFactory) {
+app.controller('Ctrl1', function(DataFactory) {
   // bind the controller property to the service collection
   this.items = DataFactory.items;
 
@@ -15,7 +12,7 @@ app1.controller('Ctrl1', function(DataFactory) {
 });
 
 // sample "service" for getting data
-app1.factory('DataFactory', function($q, $timeout) {
+app.factory('DataFactory', function($q, $timeout) {
   var svc = {};
   svc.items = [];
 

diff --git a/blog-ng-list-services2.js b/blog-ng-list-services2.js
@@ -1,4 +1,4 @@
-app1.controller('Ctrl1', function(DataFactory) {
+app.controller('Ctrl1', function(DataFactory) {
   // bind the controller property to the service collection
   this.items = DataFactory.items;
 

diff --git a/final_structure.js b/final_structure.js
@@ -1,19 +1,19 @@
-var app1 = angular.module('app1', []);
+var app = angular.module('app', []);
 
-app1.controller('Ctrl1', function(DataFactory) {
+app.controller('Ctrl1', function(DataFactory) {
   this.items = DataFactory.items;
 
   DataFactory.getDataStream();
 });
 
-app1.controller('Ctrl2', function($timeout, DataFactory) {
+app.controller('Ctrl2', function($timeout, DataFactory) {
   // when this eventually fires and gets *remote* data again
   // our other controller will automatically sync up
   // without the need for the $watch function
   $timeout(DataFactory.getDataStream, 2000);
 });
 
-app1.factory('DataFactory', function($q) {
+app.factory('DataFactory', function($q) {
   var svc = {};
   svc.items = [];
 

diff --git a/final_structure.js b/final_structure.js
@@ -13,7 +13,7 @@ app1.controller('Ctrl2', function($timeout, DataFactory) {
   $timeout(DataFactory.getDataStream, 2000);
 });
 
-app1.factory('DataFactory', function($q, $timeout) {
+app1.factory('DataFactory', function($q) {
   var svc = {};
   svc.items = [];
 

diff --git a/$watching.js b/$watching.js
@@ -12,4 +12,26 @@ app1.controller('Ctrl1', function($scope, DataFactory) {
   function watchSource(){
     return DataFactory.items;
   }  
+});
+
+app1.factory('DataFactory', function($q, $timeout) {
+  var svc = {};
+  svc.items = [];
+
+  svc.getDataStream = function() {
+
+    var fakeData = [
+      { id: 1, name: 'name 1' },
+      { id: 2, name: 'name 2' },
+      { id: 4, name: 'name 4' }
+    ];
+
+    // using $q to fake async data grab
+    return $q.when(fakeData)
+      .then(function(data) {
+        svc.items = data;
+      });
+  };
+
+  return svc;
 });
diff --git a/blog-ng-list-services1.js b/blog-ng-list-services1.js
@@ -20,22 +20,19 @@ app1.factory('DataFactory', function($q, $timeout) {
   svc.items = [];
 
   svc.getDataStream = function() {
+
+    var fakeData = [
+      { id: 1, name: 'name 1' },
+      { id: 2, name: 'name 2' },
+      { id: 4, name: 'name 4' }
+    ];
+
     // using $q to fake async data grab
-    return $q.when(fakeHttpResponse())
+    return $q.when(fakeData)
       .then(function(data) {
         svc.items = data;
       });
   };
 
   return svc;
-
-  // ignore for demo purposes only.
-  function fakeHttpResponse() {
-    return [
-      { id: 1, name: 'name 1' },
-      { id: 2, name: 'name 2' },
-      { id: 3, name: 'name 3' },
-      { id: 4, name: 'name 4' }
-    ];
-  }
 });
diff --git a/final_structure.js b/final_structure.js
@@ -18,22 +18,20 @@ app1.factory('DataFactory', function($q, $timeout) {
   svc.items = [];
 
   svc.getDataStream = function() {
-    return $q.when(fakeHttpResponse())
+
+    var fakeData = [
+      { id: 1, name: 'name 1' },
+      { id: 2, name: 'name 2' },
+      { id: 4, name: 'name 4' }
+    ];
+
+    // using $q to fake async data grab
+    return $q.when(fakeData)
       .then(function(data) {
         // this is the magic
         angular.copy(data, svc.items);
       });
   };
 
   return svc;
-
-  // ignore for demo purposes only.
-  function fakeHttpResponse() {
-    return [
-      { id: 1, name: 'name 1' },
-      { id: 2, name: 'name 2' },
-      { id: 3, name: 'name 3' },
-      { id: 4, name: 'name 4' }
-    ];
-  }
 });
diff --git a/final_structure.js b/final_structure.js
@@ -6,6 +6,13 @@ app1.controller('Ctrl1', function(DataFactory) {
   DataFactory.getDataStream();
 });
 
+app1.controller('Ctrl2', function($timeout, DataFactory) {
+  // when this eventually fires and gets *remote* data again
+  // our other controller will automatically sync up
+  // without the need for the $watch function
+  $timeout(DataFactory.getDataStream, 2000);
+});
+
 app1.factory('DataFactory', function($q, $timeout) {
   var svc = {};
   svc.items = [];

diff --git a/$watching.js b/$watching.js
@@ -0,0 +1,15 @@
+var app1 = angular.module('app1', []);
+
+app1.controller('Ctrl1', function($scope, DataFactory) {
+  // bind the controller property to the service collection
+  this.items = DataFactory.items;
+
+  // watch the collection for changes
+  $scope.$watch(warchSource, function(current, previous){
+    this.items = current
+  });
+
+  function watchSource(){
+    return DataFactory.items;
+  }  
+});
diff --git a/final_structure.js b/final_structure.js
@@ -13,6 +13,7 @@ app1.factory('DataFactory', function($q, $timeout) {
   svc.getDataStream = function() {
     return $q.when(fakeHttpResponse())
       .then(function(data) {
+        // this is the magic
         angular.copy(data, svc.items);
       });
   };

diff --git a/final_structure.js b/final_structure.js
@@ -0,0 +1,31 @@
+var app1 = angular.module('app1', []);
+
+app1.controller('Ctrl1', function(DataFactory) {
+  this.items = DataFactory.items;
+
+  DataFactory.getDataStream();
+});
+
+app1.factory('DataFactory', function($q, $timeout) {
+  var svc = {};
+  svc.items = [];
+
+  svc.getDataStream = function() {
+    return $q.when(fakeHttpResponse())
+      .then(function(data) {
+        angular.copy(data, svc.items);
+      });
+  };
+
+  return svc;
+
+  // ignore for demo purposes only.
+  function fakeHttpResponse() {
+    return [
+      { id: 1, name: 'name 1' },
+      { id: 2, name: 'name 2' },
+      { id: 3, name: 'name 3' },
+      { id: 4, name: 'name 4' }
+    ];
+  }
+});
diff --git a/collectionreset.js b/collectionreset.js
@@ -0,0 +1,9 @@
+svc.getDataStream = function() {
+  return $q.when(fakeHttpResponse())
+    .then(function(data) {
+      // here we are clearly reseting the data
+      // to the response of the call.. Why doesn't
+      // it just databind?
+      svc.items = data;
+    });
+};
diff --git a/blog-ng-list-services1.js b/blog-ng-list-services1.js
@@ -17,7 +17,6 @@ app1.controller('Ctrl1', function(DataFactory) {
 // sample "service" for getting data
 app1.factory('DataFactory', function($q, $timeout) {
   var svc = {};
-
   svc.items = [];
 
   svc.getDataStream = function() {

diff --git a/blog-ng-list-services2.js b/blog-ng-list-services2.js
@@ -0,0 +1,8 @@
+app1.controller('Ctrl1', function(DataFactory) {
+  // bind the controller property to the service collection
+  this.items = DataFactory.items;
+
+  // but wouldn't it be so much better
+  // to just call it and let it work
+  DataFactory.getDataStream();
+});
diff --git a/blog-ng-list-services1.js b/blog-ng-list-services1.js
@@ -8,9 +8,7 @@ app1.controller('Ctrl1', function(DataFactory) {
   // invoke the call to get data
   DataFactory
     .getDataStream()
-    .then(function(data) {
-      // update the service collection
-      DataFactory.items = data;
+    .then(function() {
       // update the controller collection property
       this.items = DataFactory.items;
     }.bind(this));
@@ -26,7 +24,7 @@ app1.factory('DataFactory', function($q, $timeout) {
     // using $q to fake async data grab
     return $q.when(fakeHttpResponse())
       .then(function(data) {
-        return data;
+        svc.items = data;
       });
   };
 

diff --git a/blog-ng-list-services1.js b/blog-ng-list-services1.js
@@ -1,18 +1,25 @@
+// create the application
 var app1 = angular.module('app1', []);
 
 app1.controller('Ctrl1', function(DataFactory) {
+  // bind the controller property to the service collection
   this.items = DataFactory.items;
 
+  // invoke the call to get data
   DataFactory
     .getDataStream()
     .then(function(data) {
+      // update the service collection
       DataFactory.items = data;
+      // update the controller collection property
       this.items = DataFactory.items;
     }.bind(this));
 });
 
+// sample "service" for getting data
 app1.factory('DataFactory', function($q, $timeout) {
   var svc = {};
+
   svc.items = [];
 
   svc.getDataStream = function() {

diff --git a/blog-ng-list-services1.js b/blog-ng-list-services1.js
@@ -13,6 +13,7 @@ app1.controller('Ctrl1', function(DataFactory) {
 
 app1.factory('DataFactory', function($q, $timeout) {
   var svc = {};
+  svc.items = [];
 
   svc.getDataStream = function() {
     // using $q to fake async data grab

diff --git a/blog-ng-list-services1.js b/blog-ng-list-services1.js
@@ -0,0 +1,36 @@
+var app1 = angular.module('app1', []);
+
+app1.controller('Ctrl1', function(DataFactory) {
+  this.items = DataFactory.items;
+
+  DataFactory
+    .getDataStream()
+    .then(function(data) {
+      DataFactory.items = data;
+      this.items = DataFactory.items;
+    }.bind(this));
+});
+
+app1.factory('DataFactory', function($q, $timeout) {
+  var svc = {};
+
+  svc.getDataStream = function() {
+    // using $q to fake async data grab
+    return $q.when(fakeHttpResponse())
+      .then(function(data) {
+        return data;
+      });
+  };
+
+  return svc;
+
+  // ignore for demo purposes only.
+  function fakeHttpResponse() {
+    return [
+      { id: 1, name: 'name 1' },
+      { id: 2, name: 'name 2' },
+      { id: 3, name: 'name 3' },
+      { id: 4, name: 'name 4' }
+    ];
+  }
+});