Clean-up for release. Refactoring some of the code into directives.

Author: Josh-Hebb

bower.json

@@ -3,15 +3,15 @@
   "dependencies": {
     "angular": "1.6.7",
     "angular-contentful": "^2.2.0",
+    "angular-marked": "^1.2.2",
     "angular-sanitize": "^1.6.8",
-    "bootstrap": "^4.0.0",
     "angular-ui-router": "^1.0.13",
+    "bootstrap": "^4.0.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
+    "marked": "^0.3.12",
     "ngmap": "^1.18.4",
-    "tether": "^1.4.3",
-    "angular-marked": "^1.2.2",
-    "marked": "^0.3.12"
+    "tether": "^1.4.3"
   },
   "devDependencies": {}
 }

gulpfile.js

@@ -14,54 +14,23 @@ var gulp = require("gulp"),
 	connect = require("gulp-connect");
 	sass = require('gulp-sass');
 
-
 var pkg = require("./package.json"),
+	cssFile = "index.css", // CSS page name
+	root = ".", // index page path
+	pages = [ "index" ]; // list all pages
 
-	// CSS page name
-	cssFile = "index.css",
-
-	// index page path
-	root = ".",
-
-	// list all pages
-	pages = [
-		"index"
-	];
-
-var banner = [
-		"/* " + pkg.name + " v" + pkg.version + " " + dateformat(new Date(), "yyyy-mm-dd"),
-		" * " + pkg.homepage,
-		" * License: " + pkg.license,
-		" */\n\n"
-	].join("\n"),
-
+// Variable Definitions
+var banner = [ "/* " + pkg.name + " v" + pkg.version + " " + dateformat(new Date(), "yyyy-mm-dd"), " * " + pkg.homepage, " * License: " + pkg.license, " */\n\n" ].join("\n"),
 	paths = {
 		"tmpl": [root+"/src/**/*.html"],
 		"js": ["!**/*.tmp.js", "!**/*.test.js", "!"+root+"/src/**/*.min.js", root+"/src/**/*.js"],
 		"css": ["!"+root+"/src/**/*.min.scss", root+"/src/**/*.scss"]
 	},
 	ngModule = pkg.name;
 
-// generate path of pages
-pages.forEach(function(page) {
-	var name = page + ".src.html";
-	paths[name] = paths[name] || [];
-	paths[name].push(root + "/" + name);
-
-	name = page + ".html";
-	paths[name] = paths[name] || [];
-	paths[name].push(root + "/" + name);
-});
-
-gulp.task("build", sync.sync([
-	// Build resources
-	["css", "js", "tmpl", "bower.json"],
-
-	// Build page sources
-	pages.map(function(page) { return page + ".src.html"; }),
-
-	// Build release pages
-	pages.map(function(page) { return page + ".html"; })
+gulp.task("build", sync.sync([ ["css", "js", "tmpl", "bower.json"], 
+	pages.map(function(page) { return page + ".src.html"; }), // Build page sources
+	pages.map(function(page) { return page + ".html"; }) // Build release pages
 ]));
 
 // Default Task - Build & Watch
@@ -71,7 +40,7 @@ gulp.task("default", sync.sync([ ["build"], ["watch"] ]));
 gulp.task("dev", ["watch"]);
 
 // gulp up (update npm & bower)
-gulp.task("up", ["update-npm", "update-bower"]);
+gulp.task("update", ["update-npm", "update-bower"]);
 
 // gulp CSS (compile sass, concat into single file and reload)
 gulp.task("css", function(done) {
@@ -89,8 +58,7 @@ gulp.task("js", function(done) {
 		.on("end", done);
 });
 
-// gulp tmpl 
-// All angular templates get put into a template cache 
+// gulp tmpl (build the template cache)
 gulp.task("tmpl", function(done) {
 	gulp.src(paths.tmpl)
 		.pipe(templatecache("angular-template.tmp.js", {
@@ -102,6 +70,7 @@ gulp.task("tmpl", function(done) {
 		.on("end", done);
 });
 
+// Watch the files for changes
 gulp.task("watch", function() { ["tmpl", "css", "js"]
 		.concat(pages.map(function(page) { return page + ".src.html"; }))
 		.forEach(function(i) {
@@ -124,6 +93,41 @@ gulp.task("watch", function() { ["tmpl", "css", "js"]
 	});
 });
 
+gulp.task("bower.json", function(done) {
+	gulp.src(["bower.json"])
+		.pipe(replace(/"name": "[^"]*"/, "\"name\": \"" + pkg.name + "\""))
+		.pipe(gulp.dest("./"))
+		.on("end", done);
+});
+
+gulp.task("update-npm", function(done) {
+	var cmd = "sh -c './node_modules/npm-check-updates/bin/npm-check-updates -u'";
+	run(cmd).exec().on("end", done);
+});
+
+gulp.task("update-bower", function(done) {
+	var bowerjson = require("./bower.json");
+	var deps = [];
+	var i, cmd;
+
+	for (i in bowerjson.dependencies) {
+		deps.push(i);
+	}
+
+	cmd = "bower install --save --force-latest " + deps.join(" ");
+	run(cmd).exec().on("end", done);
+});	
+
+// generate path of pages
+pages.forEach(function(page) {
+	var name = page + ".src.html";
+	paths[name] = paths[name] || [];
+	paths[name].push(root + "/" + name);
+
+	name = page + ".html";
+	paths[name] = paths[name] || [];
+	paths[name].push(root + "/" + name);
+});
 
 // generate task of pages
 pages.forEach(function(page) {
@@ -162,29 +166,4 @@ pages.forEach(function(page) {
 				.on("end", done);
 		});
 	})(page);
-});
-
-gulp.task("bower.json", function(done) {
-	gulp.src(["bower.json"])
-		.pipe(replace(/"name": "[^"]*"/, "\"name\": \"" + pkg.name + "\""))
-		.pipe(gulp.dest("./"))
-		.on("end", done);
-});
-
-gulp.task("update-npm", function(done) {
-	var cmd = "sh -c './node_modules/npm-check-updates/bin/npm-check-updates -u'";
-	run(cmd).exec().on("end", done);
-});
-
-gulp.task("update-bower", function(done) {
-	var bowerjson = require("./bower.json");
-	var deps = [];
-	var i, cmd;
-
-	for (i in bowerjson.dependencies) {
-		deps.push(i);
-	}
-
-	cmd = "bower install --save --force-latest " + deps.join(" ");
-	run(cmd).exec().on("end", done);
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-contentful-starter",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "AngularJS Contentful Starter Kit",
   "devDependencies": {
     "dateformat": "^1.0.11",

src/config/app.js

@@ -1,4 +1,10 @@
-// Initialize the Angular Module.
+/**
+ * AngularJS Starter Kit
+ * @author Josh Hebb
+ * 
+ */
+
+// Initialize the Angular Module and load any libraries.
 var app = angular.module("angular-contentful-starter", [
 	"ui.router",
   "contentful",
@@ -9,6 +15,8 @@ var app = angular.module("angular-contentful-starter", [
 
 // Configure Contentful with the space ID & API access token so we can query Contentful.
 app.config(function(contentfulProvider){
+
+  // You can get your option values from Contentful (https://www.contentful.com/developers/docs/references/authentication/)
   contentfulProvider.setOptions({
       space: 'hpty8kufn7nl',
       accessToken: '3cdfdbcbd12558162e4f8a4105674661f02f8c26afa9e8423e29703e8915427e'
@@ -20,7 +28,7 @@ app.config(['markedProvider', function (markedProvider) {
   markedProvider.setOptions({gfm: true});
 }]);
 
-// Send the user to the top of the page when we route them
+// Send the user to the top of the page when we route them anywhere.
 app.run(['$transitions', function ($transitions) {
   $transitions.onSuccess({}, function () {
       document.body.scrollTop = document.documentElement.scrollTop = 0;

src/config/route.js

@@ -8,86 +8,104 @@ app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $u
 		.state("home", {
 			url: "/",
 			templateUrl: "src/views/home.html",
+			// Inline Controller. Can be defined in this file, or it's own file and referenced by name.
+			controller: function ($scope, $stateParams, contentful) {
+				// Query the product lines from Contentful.
+				contentful	
+					.entries('content_type=productLine').then(
+						function (response) {
+							if (response.data && response.data.items && response.data.items.length > 0) {
+								$scope.productLines = response.data.items; } } );
+				// Query the blog articles from Contentful.
+				contentful
+					.entries('content_type=blogArticle&limit=3&order=-sys.updatedAt').then(
+						function (response) {
+							if (response.data && response.data.items && response.data.items.length > 0) {
+								$scope.articles = response.data.items; } } );
+				// Query the locations (shops) from Contentful.
+				contentful
+					.entries('content_type=event&limit=5&order=fields.date').then(
+						function (response) {
+							if (response.data && response.data.items && response.data.items.length > 0) {
+								$scope.stores = response.data.items; } } );
+				}
 		})
 
 		// Products Landing Page. Pulls a 'Line of Products' from contentful.
+		// i.e. /products/headphones
 		.state("products", {
 			url: "/products/:productLine",
 			templateUrl: "src/views/products.html",
-			// Inline Controller. Can be defined in this file, or it's own file and referenced by name.
 			controller: function ($scope, $stateParams, contentful) {
+				// Query the Product Lines from Contentful.
 				contentful
 					.entries('content_type=productLine&fields.urlSlug=' + $stateParams.productLine).then(
 						function (response) {
+							console.log(response);
 							if (response.data && response.data.items && response.data.items.length > 0) {
-								$scope.productLine = response.data.items[0].fields;
-							}
-						}
-					);
+								$scope.productLine = response.data.items[0].fields; } } );
 				}
 		})
 
-		// Product Landing Page (Single Product) accessed from a Product Line (i.e. /headphones/beats-by-dre/)
+		// Product Landing Page (Single Product) accessed from a Product Line 
+		// i.e. /products/headphones/beats-by-dre/
 		.state("product", {
 			url: "/products/:productLine/:product",
 			templateUrl: "src/views/product.html",
 			controller: function ($scope, $stateParams, contentful) {
+				// Query the Product from Contentful.
 				contentful
 					.entries('content_type=product&fields.urlSlug=' + $stateParams.product).then(
 						function (response) {
 							if (response.data && response.data.items && response.data.items.length > 0) {
-								$scope.product = response.data.items[0].fields;
-							}
-						}
-					);
+								$scope.product = response.data.items[0].fields; } } );
 				}
 		})
 
+		// Product Landing Page (Single Product) accessed outside of the context of a product line
+		// i.e. /product/beats-solo-3
 		.state("singleProduct", {
 			url: "/product/:product",
 			templateUrl: "src/views/product.html",
 			controller: function ($scope, $stateParams, contentful) {
+				// Query the Product from Contentful
 				contentful
 					.entries('content_type=product&fields.urlSlug=' + $stateParams.product).then(
 						function (response) {
 							if (response.data && response.data.items && response.data.items.length > 0) {
-								$scope.product = response.data.items[0].fields;
-							}
-						}
+								$scope.product = response.data.items[0].fields; } }
 					);
 				}
 		})
 
+		// Article Landing Page (single article).
+		// i.e. /article/contentful-intro
 		.state("article", {
 			url: "/article/:articleTitle",
 			templateUrl: "src/views/article.html",
 			controller: function ($scope, $stateParams, contentful) {
+				// Query the Article from Contentful.
 				contentful
 					.entries('content_type=blogArticle&fields.urlSlug=' + $stateParams.articleTitle).then(
 						function (response) {
 							if (response.data && response.data.items && response.data.items.length > 0) {
-								$scope.article = response.data.items[0].fields;
-							}
-						}
-					);
+								$scope.article = response.data.items[0].fields; } } );
 			}
 		})
 
+		// Location Landing Page (Store)
+		// i.e. /location/pasadena
 		.state("location", {
 			url: "/location/:locationTitle",
 			templateUrl: "src/views/location.html",
 			controller: function ($scope, $stateParams, contentful) {
+				// Query the Location from Contentful based on the URL Slug.
 				contentful
 					.entries('content_type=event&fields.urlSlug=' + $stateParams.locationTitle) .then(
 						function (response) {
 							if (response.data && response.data.items && response.data.items.length > 0) {
-								$scope.store = response.data.items[0].fields;
-							}
-						}
-					);
+								$scope.store = response.data.items[0].fields; } } );
 			}
 		});
 
-
-
 }]);

src/directives/carousel.js

@@ -1,5 +1,5 @@
 /**
- * Carousel.js
+ * carousel.js
  * 
  * Query banner objects to be rendered in the carousel with content from Contentful.
  * @Author Josh Hebb

src/directives/footer.js

@@ -1,3 +1,10 @@
+/**
+ * footer.js
+ * 
+ * Render out the footer.
+ * @Author Josh Hebb
+ * 
+ */
 app.directive("footerSection", function() {
 	return {
         restrict: 'E',

src/directives/header.js

@@ -0,0 +1,13 @@
+/**
+ * header.js
+ * 
+ * Render out the header. Simple :).
+ * @Author Josh Hebb
+ * 
+ */
+app.directive("header", function() {
+	return {
+        restrict: 'E',
+        templateUrl: "src/views/header.html"
+    }
+});

src/directives/navigation.js

@@ -1,3 +1,4 @@
+<!-- Featured List of Products (w/ border) -->
 <ul class="list-group">
     <li class="list-group-item" ng-repeat="product in products">
         <a href="#" ui-sref="singleProduct({ product: product.fields.urlSlug })">