Another Round of Applying a Style Guide (Todd Motto)

At ng-conf 2015, the keynote speakers mentioned another style guide <https://github.com/toddmotto/angularjs-styleguide> by Todd Motto that nicely extends on the previous style guide we used.

Most of the changes are simple, but one (route resolve) requires a little more explanation. See <http://www.johnpapa.net/route-resolve-and-controller-activate-in-angularjs/>.  This also, introduces another style guide by John Papa <https://github.com/johnpapa/angular-styleguide>.

One interesting thing that happens when one goes through the style guides, one learns something basic that for some reason you never thought about before.  One example is Function Hoisting as described in <http://www.w3schools.com/js/js_function_definition.asp>.

The result with these two style guide applied is at <http://jsfiddle.net/sckmkny/r19b5fvy/>.

Creating a Customized Directive

In the example, we have repeated (and longish) HTML in the partials (see below). We are going to create a customized directive to streamline the partials.  Again, this is a somewhat manufactured example as the HTML is not that terribly long.

HTML

 
<div class="panel-heading">
     <h3 class="panel-title"><button class="btn btn-default" ng-click="login.navigate('/')"><span class="glyphicon glyphicon-chevron-left"></span> Back</button> Login</h3>                
</div>

A good place to learn about custom directives is through the Code School course on AngularJS <https://www.codeschool.com/courses/shaping-up-with-angular-js>.

The change amounts to creating a directive (and supporting HTML partial) as follows:

JavaScript

// app/directives/screenHeading.js
(function() {
angular.module('myApp').
directive('screenHeading', function() {
 return {
  restrict: 'A',
  templateUrl: 'partials/screenHeading.html',
  scope: {
   centerName: '@',
   leftName: '@',
   leftIcon: '@',
   leftFunction: '&',
   rightName: '@',
   rightIcon: '@',
   rightFunction: '&'
  },
  bindToController: true,
  controllerAs: 'screenHeading',
  controller: function() {
  }
 };
});
})();    
// EOF

HTML

 
    <!-- partials/screenHeading.html (obmit work-around script tag) -->
    <script type="text/ng-template" id="partials/screenHeading.html">    
        <table style="width: 100%">
            <tr>
                <td style="text-align: left; vertical-align: middle; width: 20%;">
                    <button type="button" class="btn btn-default btn-sm" ng-if="screenHeading.leftName" ng-click="screenHeading.leftFunction()"><span class="glyphicon {{screenHeading.leftIcon}}" ng-if="screenHeading.leftIcon"></span> {{screenHeading.leftName}}</button> 
                    <span ng-if="!screenHeading.leftName">&nbsp;</span>
                </td>
                <td style="text-align: center; vertical-align: middle; width: 60%;">
                    <strong>{{screenHeading.centerName}}</strong>
                </td>
                <td style="text-align: right; vertical-align: middle; width: 20%;">
                    <button type="button" class="btn btn-default btn-sm" ng-if="screenHeading.rightName" ng-click="screenHeading.rightFunction()"><span class="glyphicon {{screenHeading.rightIcon}}" ng-if="screenHeading.rightIcon"></span> {{screenHeading.rightName}}</button> 
                    <span ng-if="!screenHeading.rightName">&nbsp;</span>
                </td>
            </tr>
        </table>
    </script>
    <!-- EOF -->

Finally the directive (replacing existing the existing panel-headings)  is used in each of the pages as follows:

On the home page (no back button):

HTML

<div class="panel-heading" 
     ng-attr-screen-heading 
     ng-attr-center-name="Home"
>
</div>

On the other pages, e.g., login (with back button)

HTML

       
<div class="panel-heading" 
     ng-attr-screen-heading 
     ng-attr-center-name="Login"
     ng-attr-left-name="back"
     ng-attr-left-icon="glyphicon-chevron-left"
     ng-attr-left-function="login.navigate('/')"
>
</div>