Week 6 - Style Guide

This week we will refactor our code based on an opinionated style guide by Todd Moto that was suggested during the keynote speech of the ng-conf 2015 conference (AngularJS conference).  The main benefits of applying the style guide will be to make the code more supportable over the long-term.

note: Originally, was going to do this in one week, but due to the amount of changes, opted to break it into two.  Also, this week is a little different as it has less guidance (might require one to "cheat" and review the final result).

Assignment

Fork the fiddle "AngularJS: A Walk-Through - Week 5" and Name it "AngularJS: A Walk-Through - Week 6" "Update" it and "Set as base".

Assignment

First, we are going follow a different (small) guide as to how to organize code into modules (and folders / files): Code Organization in Large AngularJS and JavaScript Applications <http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript> Re-organize the fiddle into three modules (and folders / files) with each component in a separate file: app marketing (for the about components) store (for the store components) The final file structure (remember, we are using comments to delineate files in JSFIDDLE) ends up being: app.js index.html marketing about.controller.js about.html marketing.module.js store gems.services.js product-description.directive.js product-description.html product-gallery.directive.js product-gallery.html product-reviews.directive.js product-reviews.html product-specs.directive.js product-spec.html product-tabs.directive.js product-tabs.html store.controller.js store.html store.module.js

Assignment

Read through the first four sections (Modules - Directives) of the following style guide and apply fixes to the fiddle. AngularJS StyleGuide by Todd Motto <https://github.com/toddmotto/angularjs-styleguide> Hints: Modules / Definitions: One will need to change up the fiddle to not use the setting and getter syntax. Modules / Methods: One will need to change up the fiddle to pass functions into modules (rather than anonymous function callbacks). Controllers / controllerAs syntax: Not much to do here as we did not use the older AngularJS binding with "$scope".  But, we do want consistent and unique names (instead of just "vm") in the "controllerAs" syntax; recommend something like "StoreController as storeVM". Controllers / controllerAs 'vm': Need to use "vm" to capture the "this" context.  Some other conventions to consider: Modules are named lowerCamelCase. Controllers are named UpperCamelCase (as they are constructors). Factories are named lowerCamelCase. Directives are named lowerCamelCase.

Sample of Week Result

The result of this week is an AngularJS app, "AngularJS: A Walk-Through - Week 6" that will be used as a starting point for the next week. AngularJS: A Walk-Through - Week 6 <http://jsfiddle.net/sckmkny/xqy23z1e/>