Add examples for Chapter 8

trihm3011 · Feb 10, 2013 · b411e0f · b411e0f
1 parent 41100bb
commit b411e0f
Show file tree

Hide file tree

Showing 20 changed files with 16,592 additions and 0 deletions.
diff --git a/chapter8/datepicker/app.js b/chapter8/datepicker/app.js
@@ -0,0 +1,9 @@
+var app = angular.module('myApp', ['myApp.directives']);
+
+app.controller('MainCtrl', function($scope) {
+  $scope.myText = 'Not Selected';
+  $scope.currentDate = '';
+  $scope.updateMyText = function(date) {
+    $scope.myText = 'Selected';
+  };
+});
diff --git a/chapter8/datepicker/datepicker.js b/chapter8/datepicker/datepicker.js
@@ -0,0 +1,34 @@
+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
+      link: function(scope, element, attrs, ngModel) {
+        if (!ngModel) return;
+
+        var optionsObj = {};
+
+        optionsObj.dateFormat = 'mm/dd/yy';
+        var updateModel = function(dateTxt) {
+          scope.$apply(function () {
+            ngModel.$setViewValue(dateTxt);
+          });
+        };
+
+        optionsObj.onSelect = function(dateTxt, picker) {
+          updateModel(dateTxt);
+          if (attrs.onSelect) {
+            scope.$apply(function() {
+              scope[attrs.onSelect](dateTxt);
+            });
+          }
+        };
+
+        //updateModel();
+        ngModel.$render = function() {
+          element.datepicker('setDate', ngModel.$viewValue || '');
+        };
+        element.datepicker(optionsObj);
+      }
+    };
+  });
diff --git a/chapter8/datepicker/index.html b/chapter8/datepicker/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html ng-app="myApp">
+
+<head lang="en">
+  <meta charset="utf-8">
+  <title>AngularJS Datepicker</title>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
+
+  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
+  <script>
+    document.write('<base href="' + document.location + '" />');
+  </script>
+  <script src="datepicker.js"></script>
+  <script src="app.js"></script>
+</head>
+
+<body ng-controller="MainCtrl">
+<input id="dateField" datepicker ng-model="currentDate" on-select="updateMyText(date)">
+<br/>
+{{myText}} - {{currentDate}}
+</body>
+</html>
diff --git a/chapter8/file-upload/app.js b/chapter8/file-upload/app.js
@@ -0,0 +1,7 @@
+var app = angular.module('myApp', ['myApp.directives']);
+
+app.controller('MainCtrl', function($scope) {
+  $scope.uploadFinished = function(e, data) {
+    console.log('We just finished uploading this baby...');
+  };
+});
diff --git a/chapter8/file-upload/directives.js b/chapter8/file-upload/directives.js
@@ -0,0 +1,36 @@
+angular.module('myApp.directives', []).
+directive('fileupload', function() {
+  return {
+    restrict: 'A',
+    scope: {
+      done: '&',
+      progress: '&'
+    },
+    link: function(scope, element, attrs) {
+      var optionsObj = {
+        dataType: 'json'
+      };
+
+      if (scope.done) {
+        optionsObj.done = function() {
+          scope.$apply(function() {
+            scope.done({e: e, data: data});
+          });
+        };
+      }
+
+      if (scope.progress) {
+        optionsObj.progress = function(e, data) {
+          scope.$apply(function() {
+            scope.progress({e: e, data: data});
+          });
+        }
+      }
+
+      // the above could easily be done in a loop, to cover
+      // all API's that Fileupload provides
+
+      element.fileupload(optionsObj);
+    }
+  };
+});
diff --git a/chapter8/file-upload/index.html b/chapter8/file-upload/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html ng-app="myApp">
+
+<head lang="en">
+  <meta charset="utf-8">
+  <title>File Upload with AngularJS</title>
+  <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>
+  <script src="http://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
+
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
+  <script>
+    document.write('<base href="' + document.location + '" />');
+  </script>
+  <script src="app.js"></script>
+  <script src="directives.js"></script>
+</head>
+
+<body ng-controller="MainCtrl">
+File Upload:
+<input id="testUpload" type="file" fileupload name="files[]" data-url="/server/uploadFile" multiple done="uploadFinished(e, data)">
+</body>
+
+</html>