Fixes for john's comments

Author: shyamseshadri

chapter4/guthub/app/index.html

@@ -4,7 +4,6 @@
   <title>GutHub - Create and Share</title>
   <script src="scripts/vendor/angular.min.js"></script>
   <script src="scripts/vendor/angular-resource.min.js"></script>
-  <script src="scripts/vendor/showdown.js"></script>
   <script src="scripts/directives/directives.js"></script>
   <script src="scripts/services/services.js"></script>
   <script src="scripts/controllers/controllers.js"></script>

chapter4/guthub/app/scripts/controllers/controllers.js

@@ -1,52 +1,56 @@
 'use strict';
 
-var app = angular.module('guthub', ['directives', 'services']);
+var app = angular.module('guthub',
+    ['guthub.directives', 'guthub.services']);
 
 app.config(['$routeProvider', function($routeProvider) {
     $routeProvider.
       when('/', {
         controller: 'ListCtrl',
         resolve: {
-          recipes: function(RecipesLoader) {
-            return RecipesLoader();
+          recipes: function(MultiRecipeLoader) {
+            return MultiRecipeLoader();
           }
         },
         templateUrl:'/views/list.html'
       }).when('/edit/:recipeId', {
-        controller: 'EditRecipeCtrl',
+        controller: 'EditCtrl',
         resolve: {
           recipe: function(RecipeLoader) {
             return RecipeLoader();
           }
         },
         templateUrl:'/views/recipeForm.html'
       }).when('/view/:recipeId', {
-        controller: 'ViewRecipeCtrl',
+        controller: 'ViewCtrl',
         resolve: {
           recipe: function(RecipeLoader) {
             return RecipeLoader();
           }
         },
         templateUrl:'/views/viewRecipe.html'
       }).when('/new', {
-        controller: 'NewRecipeCtrl',
+        controller: 'NewCtrl',
         templateUrl:'/views/recipeForm.html'
       }).otherwise({redirectTo:'/'});
 }]);
 
-app.controller('ListCtrl', ['$scope', 'recipes', function($scope, recipes) {
+app.controller('ListCtrl', ['$scope', 'recipes',
+    function($scope, recipes) {
   $scope.recipes = recipes;
 }]);
 
-app.controller('ViewRecipeCtrl', ['$scope', '$location', 'recipe', function($scope, $location, recipe) {
+app.controller('ViewCtrl', ['$scope', '$location', 'recipe',
+    function($scope, $location, recipe) {
   $scope.recipe = recipe;
 
   $scope.edit = function() {
     $location.path('/edit/' + recipe.id);
   };
 }]);
 
-app.controller('EditRecipeCtrl', ['$scope', '$location', 'recipe', function($scope, $location, recipe) {
+app.controller('EditCtrl', ['$scope', '$location', 'recipe',
+    function($scope, $location, recipe) {
   $scope.recipe = recipe;
 
   $scope.save = function() {
@@ -61,8 +65,11 @@ app.controller('EditRecipeCtrl', ['$scope', '$location', 'recipe', function($sco
   };
 }]);
 
-app.controller('NewRecipeCtrl', ['$scope', '$location', 'Recipe', function($scope, $location, Recipe) {
-  $scope.recipe = new Recipe({ingredients:[{}]});
+app.controller('NewCtrl', ['$scope', '$location', 'Recipe',
+    function($scope, $location, Recipe) {
+  $scope.recipe = new Recipe({
+    ingredients: [ {} ]
+  });
 
   $scope.save = function() {
     $scope.recipe.$save(function(recipe) {
@@ -71,7 +78,8 @@ app.controller('NewRecipeCtrl', ['$scope', '$location', 'Recipe', function($scop
   };
 }]);
 
-app.controller('IngredientsCtrl', ['$scope', function($scope) {
+app.controller('IngredientsCtrl', ['$scope',
+    function($scope) {
   $scope.addIngredient = function() {
     var ingredients = $scope.recipe.ingredients;
     ingredients[ingredients.length] = {};

chapter4/guthub/app/scripts/directives/directives.js

@@ -1,24 +1,9 @@
 'use strict';
 
-var directives = angular.module('directives', []);
+var directives = angular.module('guthub.directives', []);
 
-directives.directive('markdown', function() {
-  var showdown = new Showdown.converter();
-  return {
-    restrict: 'E',
-    scope: {content: '&content'},
-    link: function(scope, element, attrs) {
-      scope.$watch(scope.content, function(value) {
-        if (value) {
-          var htmlText = showdown.makeHtml(value);
-          element.html(htmlText);
-        }
-      });
-    }
-  };
-});
-
-directives.directive('butterbar', ['$rootScope', function($rootScope) {
+directives.directive('butterbar', ['$rootScope',
+    function($rootScope) {
   return {
     link: function(scope, element, attrs) {
       element.addClass('hide');
@@ -34,7 +19,8 @@ directives.directive('butterbar', ['$rootScope', function($rootScope) {
   };
 }]);
 
-directives.directive('focus', function() {
+directives.directive('focus',
+    function() {
   return {
     link: function(scope, element, attrs) {
       element[0].focus();

chapter4/guthub/app/scripts/services/services.js

@@ -1,12 +1,15 @@
 'use strict';
 
-var services = angular.module('services', ['ngResource']);
+var services = angular.module('guthub.services',
+    ['ngResource']);
 
-services.factory('Recipe', ['$resource', function($resource) {
+services.factory('Recipe', ['$resource',
+    function($resource) {
   return $resource('/recipes/:id', {id: '@id'});
 }]);
 
-services.factory('RecipesLoader', ['Recipe', '$q', function(Recipe, $q) {
+services.factory('MultiRecipeLoader', ['Recipe', '$q',
+    function(Recipe, $q) {
   return function() {
     var delay = $q.defer();
     Recipe.query(function(recipes) {
@@ -18,7 +21,8 @@ services.factory('RecipesLoader', ['Recipe', '$q', function(Recipe, $q) {
   };
 }]);
 
-services.factory('RecipeLoader', ['Recipe', '$route', '$q', function(Recipe, $route, $q) {
+services.factory('RecipeLoader', ['Recipe', '$route', '$q',
+    function(Recipe, $route, $q) {
   return function() {
     var delay = $q.defer();
     Recipe.get({id: $route.current.params.recipeId}, function(recipe) {

chapter4/guthub/app/views/recipeForm.html

@@ -3,7 +3,7 @@ <h2>Edit Recipe</h2>
   <div class="control-group">
     <label class="control-label" for="title">Title:</label>
     <div class="controls">
-      <input ng-model="recipe.title" class="input-xlarge" id="title">
+      <input ng-model="recipe.title" class="input-xlarge" id="title" focus>
     </div>
   </div>
 

chapter4/guthub/app/views/viewRecipe.html

@@ -2,6 +2,7 @@ <h2>{{recipe.title}}</h2>
 
 <div>{{recipe.description}}</div>
 
+<h3>Ingredients</h3>
 <ul class="unstyled">
   <li ng-repeat="ingredient in recipe.ingredients">
     <span>{{ingredient.amount}}</span>
@@ -10,7 +11,8 @@ <h2>{{recipe.title}}</h2>
   </li>
 </ul>
 
-<markdown content="recipe.instructions"></markdown>
+<h3>Instructions</h3>
+<div>{{recipe.instructions}}</div>
 
 <form ng-submit="edit()" class="form-horizontal">
   <div class="form-actions">

chapter4/guthub/test/spec/controllersSpec.js

@@ -29,14 +29,14 @@ describe('Controllers', function() {
     });
   });
 
-  describe('RecipesLoader', function() {
+  describe('MultiRecipeLoader', function() {
     var mockBackend, recipe, loader;
     // The _$httpBackend_ is the same as $httpBackend. Only written this way to
     // differentiate between injected variables and local variables
-    beforeEach(inject(function(_$httpBackend_, Recipe, RecipesLoader) {
+    beforeEach(inject(function(_$httpBackend_, Recipe, MultiRecipeLoader) {
       recipe = Recipe;
       mockBackend = _$httpBackend_;
-      loader = RecipesLoader;
+      loader = MultiRecipeLoader;
     }));
 
     it('should load list of recipes', function() {
@@ -64,7 +64,7 @@ describe('Controllers', function() {
       location = $location;
       $scope = $rootScope.$new();
 
-      ctrl = $controller('EditRecipeCtrl', {
+      ctrl = $controller('EditCtrl', {
         $scope: $scope,
         $location: $location,
         recipe: new Recipe({id: 1, title: 'Recipe'})

chapter4/guthub/web-server.js

@@ -11,14 +11,17 @@ app.configure(function(){
 
 var recipes_map = {
   '1': {
-    id: 1,
-    'title': 'Recipe 1',
-    'description': 'Description 1',
-    'instructions': 'Instruction 1',
-    ingredients: [
-      {amount: 3, amountUnits: 'pounds', ingredientName: 'Awesomeness'},
-      {amount: 5, amountUnits: 'stuff', ingredientName: 'Good stuff'}
-    ]
+    "id": "1",
+    "title": "Cookies",
+    "description": "Delicious, crisp on the outside, chewy on the outside, oozing with chocolatey goodness cookies. The best kind",
+    "ingredients": [
+      {
+        "amount": "1",
+        "amountUnits": "packet",
+        "ingredientName": "Chips Ahoy"
+      }
+    ],
+    "instructions": "1. Go buy a packet of Chips Ahoy\n2. Heat it up in an oven\n3. Enjoy warm cookies\n4. Learn how to bake cookies from somewhere else"
   },
   '2': {
     id: 2,