Updates and fixes for version 2 of book

henrypoter · May 13, 2013 · 704afc9 · 704afc9
1 parent 0ec490c
commit 704afc9
Show file tree

Hide file tree

Showing 43 changed files with 478 additions and 627 deletions.
diff --git a/chapter1/order-form.html b/chapter1/order-form.html
@@ -1,32 +1,29 @@
-<!doctype html>
-<html lang='en' ng-app>
-  <head>
-    <title>Shopping Cart</title>
-  </head>
+<html ng-app>
+<head>
+  <title>Your Shopping Cart</title>
+</head>
+<body ng-controller='CartController'>
+<h1>Your Shopping Cart</h1>
+<div ng-repeat='item in items'>
+  <span>{{item.title}}</span>
+  <input ng-model='item.quantity'>
+  <span>{{item.price | currency}}</span>
+  <span>{{item.price * item.quantity | currency}}</span>
+  <button ng-click="remove($index)">Remove</button>
+</div>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
+<script>
+  function CartController($scope) {
+    $scope.items = [
+      {title: 'Paint pots', quantity: 8, price: 3.95},
+      {title: 'Polka dots', quantity: 17, price: 12.95},
+      {title: 'Pebbles', quantity: 5, price: 6.95}
+    ];
 
-  <body ng-controller="CartCtrl">
-  <h1>Your Shopping Cart</h1>
-
-  <div ng-repeat="item in items">
-    <span>{{item.title}}</span>
-    <input ng-model="item.quantity">
-    <span>{{item.price | currency}}</span>
-    <span>{{item.price * item.quantity | currency}}</span>
-    <button ng-click="remove($index)">Remove</button>
-  </div>
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
-  <script>
-    function CartCtrl($scope) {
-      $scope.items = [
-        {title: 'Paint pots', quantity: 8, price: 3.95},
-        {title: 'Polka dots', quantity: 17, price: 12.95},
-        {title: 'Pebbles', quantity: 5, price: 6.95}
-      ];
-
-      $scope.remove = function(index) {
-        $scope.items.splice(index, 1);
-      }
-    }
-  </script>
-  </body>
-</html>
+    $scope.remove = function(index) {
+      $scope.items.splice(index, 1);
+    };
+  }
+</script>
+</body>
+</html>
diff --git a/chapter2/1.dataBinding.html b/chapter2/1.dataBinding.html
@@ -1,15 +1,15 @@
-<html ng-app=>
+<html ng-app>
 <body ng-controller="TextController">
-<p>{{someText.message}}</p>
+<p>{{someText}}</p>
 
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
+<script
+    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
+</script>
 
 <script>
   function TextController($scope) {
-    var someText = {};
-    someText.message = 'You have started your journey.';
-    $scope.someText = someText;
+    $scope.someText = 'You have started your journey.';
   }
 </script>
 </body>
-</html>
+</html>
diff --git a/chapter2/2.dataBinding - proper form.html b/chapter2/2.dataBinding - proper form.html
@@ -1,18 +1,20 @@
 <html ng-app='myApp'>
-<body ng-controller="TextController">
+<body ng-controller='TextController'>
 <p>{{someText.message}}</p>
 
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
+<script
+    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
+</script>
 
 <script>
   var myAppModule = angular.module('myApp', []);
 
   myAppModule.controller('TextController',
-      function TextController($scope) {
-    var someText = {};
-    someText.message = 'You have started your journey.';
-    $scope.someText = someText;
-  });
+      function($scope) {
+        var someText = {};
+        someText.message = 'You have started your journey.';
+        $scope.someText = someText;
+      });
 </script>
 </body>
-</html>
+</html>
diff --git a/chapter2/aMail/angular.min.js b/chapter2/aMail/angular.min.js
diff --git a/chapter2/aMail/controllers.js b/chapter2/aMail/controllers.js
@@ -1,49 +1,53 @@
+// Create a module for our core AMail services
 var aMailServices = angular.module('AMail', []);
 
+// Set up our mappings between URLs, templates, and controllers
 function emailRouteConfig($routeProvider) {
   $routeProvider.
-  when('/', {
-    controller: ListController,
-    templateUrl: 'list.html'
-  }).
-  when('/view/:id', {
-    controller: DetailController,
-    templateUrl: 'detail.html'
-  }).
-  otherwise({
-    redirectTo: '/'
-  });
+    when('/', {
+      controller: ListController,
+      templateUrl: 'list.html'
+    }).
+// Notice that for the detail view, we specify a parameterized URL component
+// by placing a colon in front of the id
+    when('/view/:id', {
+      controller: DetailController,
+      templateUrl: 'detail.html'
+    }).
+    otherwise({
+      redirectTo: '/'
+    });
 }
 
+// Set up our route so the AMail service can find it
 aMailServices.config(emailRouteConfig);
 
+// Some fake emails
 messages = [{
-  id: 0,
-  sender: '[email protected]',
-  subject: 'Hi there, old friend',
-  date: 'Dec 7, 2013 12:32:00',
-  recipients: ['[email protected]'],
-  message: 'Hey, we should get together for lunch sometime and catch up.  There are many things we should collaborate on this year.'
+  id: 0, sender: '[email protected]', subject: 'Hi there, old friend',
+  date: 'Dec 7, 2013 12:32:00', recipients: ['[email protected]'],
+  message: 'Hey, we should get together for lunch sometime and catch up.'
+    +'There are many things we should collaborate on this year.'
 }, {
-  id: 1,
-  sender: '[email protected]',
+  id: 1,  sender: '[email protected]',
   subject: 'Where did you leave my laptop?',
-  date: 'Dec 7, 2013 8:15:12',
-  recipients: ['[email protected]'],
-  message: 'I thought you were going to put it in my desk drawer.  But it does not seem to be there.'
+  date: 'Dec 7, 2013 8:15:12', recipients: ['[email protected]'],
+  message: 'I thought you were going to put it in my desk drawer.'
+    +'But it does not seem to be there.'
 }, {
-  id: 2,
-  sender: '[email protected]',
-  subject: 'Lost python',
-  date: 'Dec 6, 2013 20:35:02',
-  recipients: ['[email protected]'],
-  message: "Nobody panic, but my pet python is missing from her cage.  She doesn't move too fast, so just call me if you see her."
-}, ];
+  id: 2, sender: '[email protected]', subject: 'Lost python',
+  date: 'Dec 6, 2013 20:35:02', recipients: ['[email protected]'],
+  message: 'Nobody panic, but my pet python is missing from her cage.'
+    +'She doesn\'t move too fast, so just call me if you see her.'
+} ];
 
+// Publish our messages for the list template
 function ListController($scope) {
   $scope.messages = messages;
 }
 
+// Get the message id from the route (parsed from the URL) and use it to
+// find the right message object.
 function DetailController($scope, $routeParams) {
   $scope.message = messages[$routeParams.id];
 }
diff --git a/chapter2/aMail/detail.html b/chapter2/aMail/detail.html
@@ -1,6 +1,9 @@
 <div><strong>Subject:</strong> {{message.subject}}</div>
 <div><strong>Sender:</strong> {{message.sender}}</div>
 <div><strong>Date:</strong> {{message.date}}</div>
-<div><strong>To:</strong><span ng-repeat='recipient in message.recipients'>{{recipient}} </span>
+<div>
+  <strong>To:</strong>
+  <span ng-repeat='recipient in message.recipients'>{{recipient}} </span>
+</div>
 <div>{{message.message}}</div>
-<a href='#/'>Back to message list</a>
+<a href='#/'>Back to message list</a>
diff --git a/chapter2/aMail/index.html b/chapter2/aMail/index.html
@@ -1,12 +1,11 @@
 <!doctype html>
 <html ng-app="AMail">
   <head>
-    <!--script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script-->
-    <script src='angular.min.js'></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
     <script src='controllers.js'></script>
   </head>
   <body>
     <h1>A-Mail</h1>
     <div ng-view></div>
   </body>
-</html>
+</html>
diff --git a/chapter2/aMail/list.html b/chapter2/aMail/list.html
@@ -6,7 +6,7 @@
   </tr>
   <tr ng-repeat='message in messages'>
     <td>{{message.sender}}</td>
-    <td><a href='#/view/{{message.id}}'>{{message.subject}}</td>
+    <td><a ng-href='#/view/{{message.id}}'>{{message.subject}}</a></td>
     <td>{{message.date}}</td>
   </tr>
-</table>
+</table>
diff --git a/chapter2/tableWithIndexLabels.html → chapter2/albumList.html b/chapter2/tableWithIndexLabels.html → chapter2/albumList.html
@@ -6,17 +6,19 @@
   <body>
     <table ng-controller='AlbumController'>
       <tr ng-repeat='track in album'>
-        <td>{{$index}}</td>
+        <td>{{$index + 1}}</td>
         <td>{{track.name}}</td>
         <td>{{track.duration}}</td>
       </tr>
     </table>
     <script>
+      var album = [{name:'Southwest Serenade', duration: '2:34'},
+                   {name:'Northern Light Waltz', duration: '3:21'},
+                   {name:'Eastern Tango', duration: '17:45'}];
+
       function AlbumController($scope) {
-        $scope.album = [{name:'Southwest Serenade', duration: '2:34'},
-                     {name:'Northern Light Waltz', duration: '3:21'},
-                     {name:'Eastern Tango', duration: '17:45'}];
+        $scope.album = album;
       }
     </script>
   </body>
-</html>
+</html>
diff --git a/chapter2/deathRayMenu.html b/chapter2/deathRayMenu.html
@@ -6,20 +6,22 @@
   <body>
     <div ng-controller='DeathrayMenuController'>
       <button ng-click='toggleMenu()'>Toggle Menu</button>
-      <ul ng-show='showMenu'>
+      <ul ng-show='menuState.show'>
         <li ng-click='stun()'>Stun</li>
         <li ng-click='disintegrate()'>Disintegrate</li>
         <li ng-click='erase()'>Erase from history</li>
       </ul>
-    <div/>
+    </div>
     <script>
       function DeathrayMenuController($scope) {
-        $scope.showMenu = false;
+        $scope.menuState = { show: false };
 
         $scope.toggleMenu = function() {
-          $scope.showMenu = !$scope.showMenu;
+          $scope.menuState.show = !$scope.menuState.show;
         };
+
+        // death ray functions left as exercise to reader
       }
     </script>
   </body>
-</html>
+</html>
diff --git a/chapter2/errorsAndWarnings.html b/chapter2/errorsAndWarnings.html
@@ -6,7 +6,7 @@
     .error {
       background-color: red;
     }
-    
+
     .warning {
       background-color: yellow;
     }
@@ -32,11 +32,11 @@
         };
 
         $scope.showWarning = function() {
-          $scope.messageText = 'Just a warning.  Carry on.';
+          $scope.messageText = 'Just a warning.  Please carry on.';
           $scope.isWarning = true;
           $scope.isError = false;
         };
       }
     </script>
   </body>
-</html>
+</html>
diff --git a/chapter2/focusDirective.html b/chapter2/focusDirective.html
@@ -6,24 +6,35 @@
   </head>
 
   <body ng-controller="SomeController">
-    <button ng-click="message='unfocused button clicked'">Not focused</button>
-    <button focus ng-click="message='focused button clicked'">I'm very focused!</button>
-    <input ng-model='message'></input>
-  <script>
-    function SomeController($scope) {
-      $scope.message = 'nothing clicked yet';
-    }  
-
-    var appModule = angular.module('app', ['directives']);
-    var directivesModule = angular.module('directives', []);
-
-    angular.module('directives', []).directive('focus', function() {
-      return {
-        link: function(scope, element, attrs) {
-          element[0].focus();
-        }
-      };
-    });
-  </script>
+    <button ng-click="clickUnfocused()">
+      Not focused
+    </button>
+    <button ngbk-focus ng-click="clickFocused()">
+      I'm very focused!
+    </button>
+    <div>{{message.text}}</div>
+    <script>
+      function SomeController($scope) {
+        $scope.message = { text: 'nothing clicked yet' };
+
+        $scope.clickUnfocused = function() {
+          $scope.message.text = 'unfocused button clicked';
+        };
+
+        $scope.clickFocused = function() {
+          $scope.message.text = 'focus button clicked';
+        };
+      }
+
+      var appModule = angular.module('app', []);
+
+      appModule.directive('ngbkFocus', function() {
+        return {
+          link: function(scope, element, attrs, controller) {
+            element[0].focus();
+          }
+        };
+      });
+    </script>
   </body>
-</html>
+</html>