Update guthub example and fix coding style

henrypoter · Feb 10, 2013 · 2f5e819 · 2f5e819
1 parent c0f9fcf
commit 2f5e819
Show file tree

Hide file tree

Showing 35 changed files with 2,373 additions and 14,895 deletions.
diff --git a/chapter3/sample-app/testacular.conf.js b/chapter3/sample-app/testacular.conf.js
@@ -13,14 +13,13 @@ files = [
   'test/vendor/angular-mocks.js',
   'app/scripts/*.js',
   'app/scripts/**/*.js',
-  'test/mock/**/*.js',
   'test/spec/**/*.js'
 ];
 
 
 // list of files to exclude
 exclude = [
-  
+
 ];
 
 

diff --git a/...guthub/img/glyphicons-halflings-white.png → ...ub/app/img/glyphicons-halflings-white.png b/...guthub/img/glyphicons-halflings-white.png → ...ub/app/img/glyphicons-halflings-white.png
diff --git a/chapter4/guthub/img/glyphicons-halflings.png → ...4/guthub/app/img/glyphicons-halflings.png b/chapter4/guthub/img/glyphicons-halflings.png → ...4/guthub/app/img/glyphicons-halflings.png
diff --git a/chapter4/guthub/app/index.html b/chapter4/guthub/app/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html   lang="en" ng-app="guthub">
+<head>
+  <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>
+  <link href="styles/bootstrap.css" rel="stylesheet">
+  <link href="styles/guthub.css" rel="stylesheet">
+</head>
+<body>
+  <header>
+    <h1>GutHub</h1>
+  </header>
+
+  <div butterbar>Loading...</div>
+
+  <div class="container-fluid">
+    <div class="row-fluid">
+      <div class="span2">
+        <!--Sidebar-->
+        <div id="focus"><a href="/#/new">New Recipe</a></div>
+        <div><a href="/#/">Recipe List</a></div>
+
+      </div>
+      <div class="span10">
+        <div ng-view></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/chapter4/guthub/app/scripts/controllers/controllers.js b/chapter4/guthub/app/scripts/controllers/controllers.js
@@ -0,0 +1,82 @@
+'use strict';
+
+var app = angular.module('guthub', ['directives', 'services']);
+
+app.config(['$routeProvider', function($routeProvider) {
+    $routeProvider.
+      when('/', {
+        controller: 'ListCtrl',
+        resolve: {
+          recipes: function(RecipesLoader) {
+            return RecipesLoader();
+          }
+        },
+        templateUrl:'/views/list.html'
+      }).when('/edit/:recipeId', {
+        controller: 'EditRecipeCtrl',
+        resolve: {
+          recipe: function(RecipeLoader) {
+            return RecipeLoader();
+          }
+        },
+        templateUrl:'/views/recipeForm.html'
+      }).when('/view/:recipeId', {
+        controller: 'ViewRecipeCtrl',
+        resolve: {
+          recipe: function(RecipeLoader) {
+            return RecipeLoader();
+          }
+        },
+        templateUrl:'/views/viewRecipe.html'
+      }).when('/new', {
+        controller: 'NewRecipeCtrl',
+        templateUrl:'/views/recipeForm.html'
+      }).otherwise({redirectTo:'/'});
+}]);
+
+app.controller('ListCtrl', ['$scope', 'recipes', function($scope, recipes) {
+  $scope.recipes = recipes;
+}]);
+
+app.controller('ViewRecipeCtrl', ['$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) {
+  $scope.recipe = recipe;
+
+  $scope.save = function() {
+    $scope.recipe.$save(function(recipe) {
+      $location.path('/view/' + recipe.id);
+    });
+  };
+
+  $scope.remove = function() {
+    delete $scope.recipe;
+    $location.path('/');
+  };
+}]);
+
+app.controller('NewRecipeCtrl', ['$scope', '$location', 'Recipe', function($scope, $location, Recipe) {
+  $scope.recipe = new Recipe({ingredients:[{}]});
+
+  $scope.save = function() {
+    $scope.recipe.$save(function(recipe) {
+      $location.path('/view/' + recipe.id);
+    });
+  };
+}]);
+
+app.controller('IngredientsCtrl', ['$scope', function($scope) {
+  $scope.addIngredient = function() {
+    var ingredients = $scope.recipe.ingredients;
+    ingredients[ingredients.length] = {};
+  };
+  $scope.removeIngredient = function(index) {
+    $scope.recipe.ingredients.splice(index, 1);
+  };
+}]);
diff --git a/chapter4/guthub/js/directives.js → ...thub/app/scripts/directives/directives.js b/chapter4/guthub/js/directives.js → ...thub/app/scripts/directives/directives.js
@@ -9,14 +9,16 @@ directives.directive('markdown', function() {
     scope: {content: '&content'},
     link: function(scope, element, attrs) {
       scope.$watch(scope.content, function(value) {
-        var htmlText = showdown.makeHtml(value);
-        element.html(htmlText);
+        if (value) {
+          var htmlText = showdown.makeHtml(value);
+          element.html(htmlText);
+        }
       });
     }
   };
 });
 
-directives.directive('butterbar', function($rootScope) {
+directives.directive('butterbar', ['$rootScope', function($rootScope) {
   return {
     link: function(scope, element, attrs) {
       element.addClass('hide');
@@ -30,12 +32,12 @@ directives.directive('butterbar', function($rootScope) {
       });
     }
   };
-});
+}]);
 
 directives.directive('focus', function() {
   return {
     link: function(scope, element, attrs) {
       element[0].focus();
     }
   };
-});
+});
diff --git a/chapter4/guthub/app/scripts/services/services.js b/chapter4/guthub/app/scripts/services/services.js
@@ -0,0 +1,31 @@
+'use strict';
+
+var services = angular.module('services', ['ngResource']);
+
+services.factory('Recipe', ['$resource', function($resource) {
+  return $resource('/recipes/:id', {id: '@id'});
+}]);
+
+services.factory('RecipesLoader', ['Recipe', '$q', function(Recipe, $q) {
+  return function() {
+    var delay = $q.defer();
+    Recipe.query(function(recipes) {
+      delay.resolve(recipes);
+    }, function() {
+      delay.reject('Unable to fetch recipes');
+    });
+    return delay.promise;
+  };
+}]);
+
+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) {
+      delay.resolve(recipe);
+    }, function() {
+      delay.reject('Unable to fetch recipe '  + $route.current.params.recipeId);
+    });
+    return delay.promise;
+  };
+}]);
diff --git a/chapter4/guthub/app/scripts/vendor/angular-resource.min.js b/chapter4/guthub/app/scripts/vendor/angular-resource.min.js