ecowden

<!-- $scope.recentTimesheets is set from an Angular $resource call.  
     It's value will be an empty array (or object) until the call returns from the server.
     The repeater will be blank until it returns, but the <h3>RecentTimecards will show up unless we do something.
     The effect is a rather ungainly page that loads in little sections.  Using ng-show, we can clean it
     up and make sure that everything loads together.
-->
<div ng-show="recentTimesheets.length > 0">
    <h3>Recent Timecards</h3>
    <ul class="nav nav-tabs nav-stacked">
        <li ng-repeat="recentTimesheet in recentTimesheets">

ecowden

/*
 * Observe the "recentTimesheets" scope variable and calculate a derived value when
 * it changes.
 * 
 * The last parameter (true, in this case) instructs the watch to use object equality.
 * If we set this to false or omitted it, the watch expression would use reference
 * equality instead. This can make a huge difference!  For instance, if you are using
 * an Angular $resource to set the watched variable, the $resource.xxx() methods
 * return an empty object immediately, then populate it when the XHR returns.
 *

ecowden

/*
 * Let's say we have a $resource and we want to do some things with it that take time.  
 * Say, saving and submitting - and we have a button for each.  When the user clicks either
 * button, we want to disable both and change the icon of the clicked one to a spinning busy icon.
 * 
 * We'll use a 'isBusy' flag to drive when buttons are disabled, and isSaving and isSubmitting 
 * for each individual action.  Then the ng-class directive gives us an easy way to swap 
 * Font Awesome icon classes.
 *
 * Note that you can add the 'icon-spin' class to any Font Awesome (v3.0) icon to make it spin.

ecowden

/*
 * SugarJS is a super handy tool for common JavaScript functions.
 * 
 * Recently, we needed to find Mondays.  This Monday, next Monday, three Mondays ago...Mondays 
 * for everyone!  SugarJS made this kind of logic dead simple.  Here is one way to 
 * tackle the problem.
 */

var thisMonday = Date.create().beginningOfWeek().addDays(1);
var eightMondaysAgo = Date.create().rewind({days: 7 * 8}).beginningOfWeek().addDays(1);

ecowden

<!--
  If pictures are worth a thousand words, here's a spiffy way to associate
  icons with your input elements.

  Use it.  It's pretty.

  For detailed examples and images, see:
    http://twitter.github.com/bootstrap/base-css.html#forms
-->

ecowden

/*
 * Let's say we have a collaborater with a 'show' function.  The instance under test is going to invoke
 * this function and pass two arguments: 'parameters' and a callback function.  We often want to either
 * do some inspection on the 'parameters' to make sure they're right, or invoke the callback to verify
 * behavior after the callback, such as after an XHR returns.
 */
describe("someFunctionThatInvokesOurCollaborator", function () {

  var instance,
      TemplateResource;

ecowden

/*
 * Decide on your cache-busting strategy.  In this example, we use the current timestamp, which will
 * force a change every time the app is visited, but not every time the partial is loaded within a 
 * visit.  Even better would be to use a hash of the file's contents to ensure that the file is always
 * reloaded when the file changes and never reloaded when it isn't.
 */
var cacheBustSuffix = Date.now();

// Optionally, expose the cache busting value as a constant so other parts of your app can use it.
ngModule.constant("cacheBustSuffix", cacheBustSuffix);

ecowden

/*
 * Setting cache headers appropriately is both a performance issue and is necessary 
 * to avoid a slew of bugs from when files or data change over time.
 *
 * For this example, I'm using the Grails cache-headers plugin:
 * http://grails.org/plugin/cache-headers
 */

/*
 * First, we've designated two cache categories in the Config.groovy.  This lets us centralize configuration

ecowden

/*
 * In your controller, create a function that compares the current location to a regular expression.
 */
$scope.routeMatches = function (fragment) {
  var matcher = new RegExp('^' + fragment + '$', ['i']);
  return matcher.test($location.path());
};

/*
 * In your partial, use the above function to assign an appropriate 'active' CSS class.

ecowden

ngModule.factory('contactSearchService', [
    'ContactResource',
    function (ContactResource) {
        // This is pretty much the most naive cache possible; do whatever makes sense for your use case.
        var lastQuery,
            lastResults;

        function invalidateCache() {
            //  Or similar mechanism...again, whatever makes sense for you.
            lastQuery = null;