Fixes for matias's comments

shyamseshadri · shyamseshadri · commit a1530b3bd1ba · 2013-02-11T10:54:29.000+05:30
diff --git a/chapter8/datepicker/datepicker.js b/chapter8/datepicker/datepicker.js
@@ -1,8 +1,13 @@
-angular.module('myApp.directives', []).
-  directive('datepicker', function() {
+angular.module('myApp.directives', [])
+  .directive('datepicker', function() {
     return {
-      restrict: 'A',       // Only allow this directive as an attribute
-      require: '?ngModel', // Always use along with an ng-model
+      // Enforce the angularJS default of restricting the directive to
+      // attributes only
+      restrict: 'A',
+      // Always use along with an ng-model
+      require: '?ngModel',
+      // This method needs to be defined and passed in from the
+      // passed in to the directive from the view controller
       scope: {
         select: '&'        // Bind the select function we refer to the right scope
       },
@@ -14,6 +19,8 @@ angular.module('myApp.directives', []).
         optionsObj.dateFormat = 'mm/dd/yy';
         var updateModel = function(dateTxt) {
           scope.$apply(function () {
+            // Call the internal AngularJS helper to
+            // update the two way binding
             ngModel.$setViewValue(dateTxt);
           });
         };
@@ -27,8 +34,8 @@ angular.module('myApp.directives', []).
           }
         };
 
-        //updateModel();
         ngModel.$render = function() {
+          // Use the AngularJS internal 'binding-specific' variable
           element.datepicker('setDate', ngModel.$viewValue || '');
         };
         element.datepicker(optionsObj);
diff --git a/chapter8/file-upload/index.html b/chapter8/file-upload/index.html
@@ -4,6 +4,7 @@
 <head lang="en">
   <meta charset="utf-8">
   <title>File Upload with AngularJS</title>
+  <!-- Because we are loading jQuery before AngularJS, Angular will use the jQuery library instead of its own jQueryLite implementation -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script src="http://raw.github.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
   <script src="http://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
@@ -19,6 +20,7 @@
 
 <body ng-controller="MainCtrl">
 File Upload:
+<!-- We will define uploadFinished in MainCtrl and attach it to the scope, so that it is available here -->
 <input id="testUpload" type="file" fileupload name="files[]" data-url="/server/uploadFile" multiple done="uploadFinished(e, data)">
 </body>
 
diff --git a/chapter8/pagination/pagination.js b/chapter8/pagination/pagination.js
@@ -1,6 +1,9 @@
 var app = angular.module('myApp.services', []);
 
 app.factory('Paginator', function() {
+  // Despite being a factory, the user of the service gets a new
+  // Paginator every time he calls the service. This is because
+  // we return a function that provides an object when executed
   return function(fetchFunction, pageSize) {
     pageSize = pageSize || 10;
     var paginator = {
diff --git a/chapter8/pagination/paginationSpec.js b/chapter8/pagination/paginationSpec.js
@@ -5,8 +5,8 @@ describe('Paginator Service', function() {
   var paginator;
 
   var items = [1, 2, 3, 4, 5, 6];
-  var fetchFn = function(offset, limit, cb) {
-    cb(items.slice(offset, offset + limit));
+  var fetchFn = function(offset, limit, callback) {
+    callback(items.slice(offset, offset + limit));
   };
 
   beforeEach(inject(function(Paginator) {
diff --git a/chapter8/server-communication/services.js b/chapter8/server-communication/services.js
@@ -44,12 +44,14 @@ servicesModule.factory('Authentication', function() {
   };
 });
 
+// This factory is only evaluated once, and authHttp is memoized. That is,
+// future requests to authHttp service return the same instance of authHttp
 servicesModule.factory('authHttp', function($http, Authentication) {
   var authHttp = {};
 
   // Append the right header to the request
   var extendHeaders = function(config) {
-    config.headers = config.headers | {};
+    config.headers = config.headers || {};
     config.headers['Authorization'] = Authentication.getTokenType() + ' ' + Authentication.getAccessToken();
   };
 
diff --git a/chapter8/socketio/app.js b/chapter8/socketio/app.js
@@ -1,5 +1,7 @@
 var app = angular.module('myApp', []);
 
+// We define a factory the socket service is instantiated only once, and
+// thus act as a singleton for the scope of the application
 app.factory('socket', function ($rootScope) {
   var socket = io.connect('http://localhost:8080');
   return {
diff --git a/chapter8/socketio/server.js b/chapter8/socketio/server.js
@@ -1,4 +1,5 @@
-var app = require('express')()
+var express = require('express')
+  , app = express()
   , server = require('http').createServer(app)
   , io = require('socket.io').listen(server);
 
diff --git a/chapter8/teams-list/index.html b/chapter8/teams-list/index.html
@@ -3,14 +3,11 @@
 
 <head lang="en">
   <meta charset="utf-8">
-  <title>Custom Plunker</title>
+  <title>Teams List App</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
   <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"></script>
-  <script>
-    document.write('<base href="' + document.location + '" />');
-  </script>
   <script src="services.js"></script>
   <script src="app.js"></script>
 </head>
@@ -30,16 +27,16 @@
       <div class="controls-row">
         <label for="sportComboBox" class="control-label">Sport:</label>
         <div class="controls">
-          <select id="sportComboBox" ng-model="filterService.filters.sport">
-            <option ng-repeat="sport in ['Basketball', 'Baseball', 'Football']">{{sport}}</option>
+          <select id="sportComboBox" ng-model="filterService.activeFilters.sport">
+            <option ng-repeat="sport in ['Basketball', 'Hockey', 'Football']">{{sport}}</option>
           </select>
         </div>
       </div>
 
       <div class="controls-row">
         <label for="cityComboBox" class="control-label">City:</label>
         <div class="controls">
-          <select id="cityComboBox" ng-model="filterService.filters.city">
+          <select id="cityComboBox" ng-model="filterService.activeFilters.city">
             <option ng-repeat="city in ['Dallas', 'Los Angeles', 'Boston', 'New York']">{{city}}</option>
           </select>
         </div>
@@ -48,7 +45,7 @@
       <div class="controls-row">
         <label class="control-label">Featured:</label>
         <div class="controls">
-          <input type="checkbox" ng-model="filterService.filters.featured" ng-false-value="" />
+          <input type="checkbox" ng-model="filterService.activeFilters.featured" ng-false-value="" />
         </div>
       </div>
     </form>
@@ -64,7 +61,7 @@
       </tr>
       </thead>
       <tbody id="teamListTable">
-      <tr ng-repeat="team in teamsList | filter:filterService.filters | filter:filterService.searchText">
+      <tr ng-repeat="team in teamsList | filter:filterService.activeFilters | filter:filterService.searchText">
         <td>{{team.name}}</td>
         <td>{{team.sport}}</td>
         <td>{{team.city}}</td>
diff --git a/chapter8/teams-list/services.js b/chapter8/teams-list/services.js
@@ -1,7 +1,7 @@
 angular.module('myApp.services', []).
   factory('filterService', function() {
     return {
-      filters: {},
+      activeFilters: {},
       searchText: ''
     };
   });
