Fixes to date picker, and add server communication examples

niilaryea · Feb 10, 2013 · 2efae53 · 2efae53
1 parent b411e0f
commit 2efae53
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 3 deletions.
diff --git a/chapter8/datepicker/datepicker.js b/chapter8/datepicker/datepicker.js
@@ -3,6 +3,9 @@ angular.module('myApp.directives', []).
     return {
       restrict: 'A',       // Only allow this directive as an attribute
       require: '?ngModel', // Always use along with an ng-model
+      scope: {
+        select: '&'        // Bind the select function we refer to the right scope
+      },
       link: function(scope, element, attrs, ngModel) {
         if (!ngModel) return;
 
@@ -17,9 +20,9 @@ angular.module('myApp.directives', []).
 
         optionsObj.onSelect = function(dateTxt, picker) {
           updateModel(dateTxt);
-          if (attrs.onSelect) {
+          if (scope.select) {
             scope.$apply(function() {
-              scope[attrs.onSelect](dateTxt);
+              scope.select({date: dateTxt});
             });
           }
         };

diff --git a/chapter8/datepicker/index.html b/chapter8/datepicker/index.html
@@ -17,7 +17,7 @@
 </head>
 
 <body ng-controller="MainCtrl">
-<input id="dateField" datepicker ng-model="currentDate" on-select="updateMyText(date)">
+<input id="dateField" datepicker ng-model="$parent.currentDate" select="updateMyText(date)">
 <br/>
 {{myText}} - {{currentDate}}
 </body>

diff --git a/chapter8/server-communication/alertBar.js b/chapter8/server-communication/alertBar.js
@@ -0,0 +1,26 @@
+// <div alert-bar alertMessage="myMessageVar"></div>
+angular.module('myApp.directives', []).
+directive('alertBar', ['$parse', function($parse) {
+  return {
+    restrict: 'A',
+    template: '<div class="alert alert-error alert-bar" ng-show="errorMessage">' +
+      '<button type="button" class="close" ng-click="hideAlert()">x</button>' +
+      '{{errorMessage}}</div>',
+
+    link: function(scope, elem, attrs) {
+      var alertMessageAttr = attrs['alertmessage'];
+      scope.errorMessage = null;
+
+      scope.$watch(alertMessageAttr, function(newVal) {
+        scope.errorMessage = newVal;
+      });
+      scope.hideAlert = function() {
+        scope.errorMessage = null;
+        // Also clear the error message on the bound variable
+        // Do this so that in case the same error happens again
+        // the alert bar will be shown again next time
+        $parse(alertMessageAttr).assign(scope, null);
+      };
+    }
+  };
+}]);
diff --git a/chapter8/server-communication/services.js b/chapter8/server-communication/services.js
@@ -0,0 +1,74 @@
+var servicesModule = angular.module('myApp.services', []);
+
+servicesModule.factory('errorService', function() {
+  return {
+    errorMessage: null,
+    setError: function(msg) {
+      this.errorMessage = msg;
+    },
+    clear: function() {
+      this.errorMessage = null;
+    }
+  };
+});
+
+servicesModule.config(function ($httpProvider) {
+  $httpProvider.responseInterceptors.push('errorHttpInterceptor');
+});
+
+// register the interceptor as a service, intercepts ALL angular ajax http calls
+servicesModule.factory('errorHttpInterceptor', function ($q, $location, ErrorService, $rootScope) {
+  return function (promise) {
+    return promise.then(function (response) {
+      return response;
+    }, function (response) {
+      if (response.status === 401) {
+        $rootScope.$broadcast('event:loginRequired');
+      } else if (response.status >= 400 && response.status < 500) {
+        ErrorService.setError('Server was unable to find what you were looking for... Sorry!!');
+      }
+      return $q.reject(response);
+    });
+  };
+});
+
+servicesModule.factory('Authentication', function() {
+  return {
+    getTokenType: function() {
+      return 'Awesome';
+    },
+    getAccessToken: function() {
+      // Fetch from the server in real life
+      return 'asdads131321asdasdasdas';
+    }
+  };
+});
+
+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['Authorization'] = Authentication.getTokenType() + ' ' + Authentication.getAccessToken();
+  };
+
+  // Do this for each $http call
+  angular.forEach(['get', 'delete', 'head', 'jsonp'], function(name) {
+    authHttp[name] = function(url, config) {
+      config = config || {};
+      extendHeaders(config);
+      return $http[name](url, config);
+    };
+  });
+
+  angular.forEach(['post', 'put'], function(name) {
+    authHttp[name] = function(url, data, config) {
+      config = config || {};
+      extendHeaders(config);
+      return $http[name](url, data, config);
+    };
+  });
+
+  return authHttp;
+});