Applying an AngularJS Style Guide

While the AngularJS tutorial suggested a number of conventions, there a many that are not addressed. So rather than having to come up with our own conventions, we are going to follow a style guide <https://github.com/mgechev/angularjs-style-guide>.

The following topics from the style guide are applied to the example we have been following to produce the updated application: <http://jsfiddle.net/sckmkny/j1ah4up5/>.  BTW, there were just too many nitpicky changes to show all the code changes.

note: One topic, the $q (promises/deferred) service is sufficiently complicated that we will discuss it in another post.

Directory Structure

While the JSFIDDLE example is implemented in a single HTML page, comments are interspersed to explain what file the section would belong in.

+ app
   + controllers
      homeCtrl.js
      loginCtrl.js
      wineriesCtrl.js
      winesCtrl.js
index.html
+ partials
      home.html
      login.html
      wineries.html
      wines.html

Markup

Tedious but self-explanatory; basically just moving around things.

Self Executing Anonymous Functions

Actually, this idea was introduced by the Code Schools tutorial.  In this particular application, it is not needed as it does not introduce any global variables.  But as a good practice we wrap the JavaScript in each file with an self executing anonymous function <http://markdalgleish.com/2011/03/self-executing-anonymous-functions/> to prevent the accidental creation of global variables.

ngCloak

This is a simple directive to prevent the browser from showing the template before it is compiled <https://docs.angularjs.org/api/ng/directive/ngCloak>.