Tagangularjs

JavaScript Powered Stuff

CODE | SLIDES

What Did I Just Watch in That Video?

That video was the culmination of me experimenting with a Spark Core device, the Johnny Five library, a Sphero toy, and the Cylon.js library (along with some other JavaScripty stuff).

Here’s what is really going on in the video…

My computer is running a Node.JS application of my own creation called owLED (available on GitHub).

Connected to my computer is a Spark Core device (basically a wireless Arduino). Attached to the Spark Core are 2 LED lights – one red, one greenish-white – and a pushbutton, all connected with some wires via a breadboard. See the amateurish image below for something that resembles what I put together.

owLED_bb

The owLED Node.JS application does a few things…

1. Serves a page with a picture of an owl at http://localhost:3000
2. Creates a Socket.IO connection between the browser and the Node app
3. Loads a Johnny-Five module that blinks the LED lights when the button is pushed, then emits an event when the blinking is complete (along with the on/off status of each LED).
4. Loads a Cylon.js module to connect to Sphero. The module exposes a function to change Sphero’s color, and roll Sphero ‘forward’ a short distance.

With all these pieces working in concert, we have a (crappy) little game! When I push the button on the Spark Core, the LED lights blink randomly for a couple seconds then stop. The LEDs can be either on or off when the blinking sequence ends.

Meanwhile, in the browser, players try to guess if the LEDs will be on or off when the blinking ends. They do this by turning the Owl eyes ‘on’ or ‘off’. If the owl eyes match the LEDs, a point is scored. If a point is scored (by any player) Sphero rolls forward!

owledpic

Why Did You Do This?

I went to JSConf US this year (2014) and got a Spark Core device in my swag bag. We also spent a whole day playing around with NodeBots (I did the NodeRockets track)! In the spirit of community and learning and what-not, I decided to demo some of the cool stuff I learned about to the local Memphis Tech community at a Meetup event. The OwLED Guessing Game was what I came up with. It demo’d some cool JS libraries, and took advantage of what hardware I had available.

The presentation was on July 17th, 2014 and kinda flopped. Despite tons of preparation and ensuring that everything would work right, it didn’t. I only had a 15 minute speaking slot, and the Arduino I was using refused to blink during the live demo. It worked just fine an hour earlier, and of course, still works fine now, but alas. Murphy’s law was in full effect.

I Want to Try, But Don’t Have a Spark Core or Sphero…

No worries. The OWL portion can work on its own with the ‘owled-fake.js’ module swapped out for the ‘owled.js’ module. The Sphero code is on a separate branch from master in the GitHub repo. Take a look at the instructions in the README.

Also, there is alternate code in the ‘owled.js’ module for a regular Arduino Uno. A hastily drawn diagram is below…

ArduinoOWLED_bb

Anything Else?

Here’s all the things I used in a big list!

  • Node.JS – Acts as the ‘hub’
  • Express – Serves the web page
  • Socket.IO – Allows events to be ’emmitted’ between the browser and the server in real-time.
  • AngularJS – A nice front-end framework to build the client-side functionality.
  • Redis – Used to keep track of all the blinking outcomes (click the ☰ icon in the browser).
  • Spark Core – The original hardware device used.
  • VoodooSpark Firmware – The firmware used on the Spark Core.
  • Johnny Five – The Node.JS lib to interact with Arduinos.
  • Spark-IO Node Package – Spark Core adapter for Johnny Five.
  • Sphero – A remote controlled, programmable, wireless sphere.
  • Cylon.js – A pretty badass project for controlling hardware with JavaScript.
  • Cylon-Sphero – A Cylon adapter to control Sphero.
  • Fritzing – Used to draw the Arduino diagrams.
  • NodeBots – For inspiration.

AngularJS SignIt! – Custom directives and form controls

Note: This is a companion post to Example CRUD App – Starring AngularJS, Backbone, Parse, StackMob and Yeoman. If you haven’t read that yet, please do so, otherwise this might not make much sense.

The most prominent feature, by far, of AngularJS SignIt! is the signature pad. It’s a fixed-size canvas that can be drawn upon with a mouse pointer or finger. The code for this wonderful widget is provided as a jQuery plugin by Thomas Bradley. There are a few more features for the signature pad than I use in this app, and I encourage you to check out the full documentation if you get a chance. It’s pretty great.

In order to implement the signature pad into my form, It must be a required field, and have the data included with the other fields when the form is submitted. The sig pad works by creating objects of x/y coordinates that correspond to marks on the canvas. When drawing on the pad, all that data gets set into a hidden form field. The data from that field is what needs to get into the Angular scope, and get validated by Angular’s form validation routine. Oh, and Angular somehow needs to fire the custom validation function built into the signature pad.

Luckily, this is the type of thing directives were built for. Custom directives let you create custom html tags that get parsed and rendered by Angular. So to start out, I created a custom directive called sigpad that is used by placing <sigpad></sigpad> in my HTML. The sigpad tag then gets replaced by the directive’s template HTML. The template for the HTML5 signature pad is just the default snippet taken directly from the signature pad documentation. See below:

<div class="control sigPad">
  <div class="sig sigWrapper">
    <canvas class="pad" width="436" height="120" ng-mouseup="updateModel()"></canvas>
  </div>
</div>

The logic for the directive is defined in a separate Angular module (see directives.js for full code). Take a look at the code below, and be sure to review Angular’s documentation on directives. The Angular docs give a great conceptual overview, but the examples are a bit lacking. I reviewed the docs many, many times, and still needed some help from the mailing list to get this working correctly (thanks P.B. Darwin!).

My biggest stumbling block was not using ngModelController, and instead trying to manipulate scope data directly. When working with a form, Angular provides all sorts of awesome code to work with data and do some validation. Basically, it all went down like this…

Insert the sigpad directive into the form with

<sigpad ng-model='user.signature' clearBtn=".clearButton" name="signature" required></sigpad>

Now Angular knows to replace the sigpad element with the template defined earlier. After this happens, Angular runs the linking function which contains all the logic for the directive. The little snippet shown below is in the linking function. It uses jQuery to select the template element (passed into the linking function as ‘element’) and runs the signaturePad function from the signature pad API. This is what creates the actual, drawable canvas.

var sigPadAPI = $(element).signaturePad({
                             drawOnly:true,
                             lineColour: '#FFF'
                           });

The ng-model=’user.signature’ bit is key. This is how data is shared between the signature pad and Angular. Also, go back up and look at the template. You will see ng-mouseup="updateModel() as an attribute of the canvas element. This tells Angular to run the updateModel() function when your mouse click ends on the signature pad. The updateModel() function is defined in the linking function of the sigpad directive.

When the updateModel() function is executed, it will wait for a split second so the signature pad can finish writing data to its hidden form field, then it will assign all that data to the Angular model value of the directive. Sounds confusing, and it is. The signature pad is off doing its own thing, completely oblivious to the fact that it is in an AngularJS app. It is Angular’s responsibility to grab data from the sigpad to get that data into its own scope. That is what $setViewValue is for. It hands the signature data over to Angular, so when the form is submitted, Angular has it available in scope.

Below is the entire directive for the drawable signature pad. You can see that it relies heavily on the signature pad API, but only after certain events handled by Angular have occurred.

.directive('sigpad', function($timeout){
  return {
    templateUrl: 'views/sigPad.html',   // Use a template in an external file
    restrict: 'E',                      // Must use <sigpad> element to invoke directive
    scope : true,                       // Create a new scope for the directive
    require: 'ngModel',                 // Require the ngModel controller for the linking function
    link: function (scope,element,attr,ctrl) {

      // Attach the Signature Pad plugin to the template and keep a reference to the signature pad as 'sigPadAPI'
      var sigPadAPI = $(element).signaturePad({
                                  drawOnly:true,
                                  lineColour: '#FFF'
                                });
     
      // Clear the canvas when the 'clear' button is clicked
      $(attr.clearbtn).on('click',function (e) {
        sigPadAPI.clearCanvas();
      });
     
      $(element).find('.pad').on('touchend',function (obj) {
        scope.updateModel();
      });

      // when the mouse is lifted from the canvas, set the signature pad data as the model value
      scope.updateModel = function() {
        $timeout(function() {
          ctrl.$setViewValue(sigPadAPI.getSignature());
        });
      };      
     
      // Render the signature data when the model has data. Otherwise clear the canvas.
      ctrl.$render = function() {
        if ( ctrl.$viewValue ) {
          sigPadAPI.regenerate(ctrl.$viewValue);
        } else {
          // This occurs when signatureData is set to null in the main controller
          sigPadAPI.clearCanvas();
        }
      };
     
      // Validate signature pad.
      // See http://docs.angularjs.org/guide/forms for more detail on how this works.
      ctrl.$parsers.unshift(function(viewValue) {
        if ( sigPadAPI.validateForm() ) {
          ctrl.$setValidity('sigpad', true);
          return viewValue;
        } else {
          ctrl.$setValidity('sigpad', false);
          return undefined;
        }
      });      
    }
  };
})

And what about the tiny signatures that show up in the signatories list? Also a custom directive. This one is smaller, but still tricky. The signature is displayed as an image on-screen, but a canvas element is still required to generate the signature from raw data before it can be converted to an image.

The directive is implemented with <regensigpad sigdata={{signed.get('signature')}}></regensigpad>. The ‘signed’ value is a single signature in the signature collection pulled from the back-end when the user picks a petition. the signature data from signed is passed into the directive scope using scope: {sigdata:'@'}.

When a list of signatures is retrieved, each signature record (including first & last name, email, and signature data) goes into a table row using ngRepeat. The regensigpad directive is executed for each row. The linking function will create a canvas element and make a displayOnly signature pad from it. The signature drawing is regenerated from the data, and then the canvas is converted to PNG format.

This PNG data is then used in the pic scope value, which is bound to the ng-src of an img tag. This img tag is the directive’s template, and will be inserted into the page. The full code for this directive is below.

.directive('regensigpad',function() {
  return {
    template: '<img ng-src="{{pic}}" />',
    restrict: 'E',
    scope: {sigdata:'@'},
    link: function (scope,element,attr,ctrl) {
      // When the sigdata attribute changes...
      attr.$observe('sigdata',function (val) {
        // ... create a blank canvas template and attach the signature pad plugin
        var sigPadAPI = $('<div class="sig sigWrapper"><canvas class="pad" width="436" height="120"></canvas></div>').signaturePad({
                          displayOnly: true
                        });
        // regenerate the signature onto the canvas
        sigPadAPI.regenerate(val);
        // convert the canvas to a PNG (Newer versions of Chrome, FF, and Safari only.)
        scope.pic = sigPadAPI.getSignatureImage();
      });
    }
  };
});

But that’s not all! You might have noticed that the select box holding the names of each petition looks kinda fancy, and allows you to type stuff to filter the list. This fancy form control is the select2 widget which is based of the Chosen library.

I didn’t have to write my own directive for it though. The Angular-UI project has already done the honors. Angular-UI is an open-source companion suite for AngularJS. It provides a whole pile of custom directives, and even a few extra filters. Many of the directives are wrappers for other widgets and open source projects, like CodeMirror, Google Maps, Twitter Bootstrap modal windows, and many more. It’s definitely worth looking into for any AngularJS project.

AngularJS SignIt! – Interchangeable Parse, StackMob and Backbone Services

Note: This is a companion post to Example CRUD App – Starring AngularJS, Backbone, Parse, StackMob and Yeoman. If you haven’t read that yet, please do so, otherwise this might not make much sense.

The AngularJS SignIt! application basically has three different interactions with a web service – fetch petitions, save a signature, and fetch a list of signatures based on the selected petition. That’s it – a get, a save, and a query. Initially, I was only using Parse.com to store data, so it was possible to include Parse specific objects and methods in my controller to save and get data.

But then I remembered I have a StackMob account just sitting around doing nothing, and thought I should put it to good use. So now I have two (slightly) different options to store my signatures. Rather than jumbling up my controller with code specific to StackMob and Parse, I created a module to abstract the Parse and StackMob APIs into their own services. These services could then hide any code specific to Parse or StacMob behind a common interface used by the controller.

With the back-end(s) abstracted, all the controller needs to worry about is calling saveSignature, getPetitions, and getSignatures. Below is a severely truncated version of the Main Controller that shows the three methods in use. Notice there is no mention of Parse or StackMob.

var MainCtrl = ngSignItApp.controller('MainCtrl', function($scope,DataService) {

  // GET A LIST OF SIGNATURES FOR A PETITION
  $scope.getSignatures = function getSignatures (petitionId) {
    DataService.getSignatures(petitionId,function (results) {
      $scope.$apply(function() {
        $scope.signatureList = results;
      });
    });
  };

  // SAVE A SIGNATURE
  $scope.saveSignature = function saveSignature() {  
    DataService.saveSignature($scope.user, function() { //user is an object with firstName, lastName, email and signature attributes.
      $scope.getSignatures($scope.select2); //select2 is the value from the petition dropdown
    });  
  };

  // GET ALL PETITIONS
  DataService.getPetitions(function (results) {
    $scope.$apply(function() {
      $scope.petitionCollection = results;
      $scope.petitions = results.models;
    });
  });

});

If you look closely, you’ll see that each service method is prefixed with DataService. This is the injectable that provides either the StackMob service, or Parse service to the controller. Each of those services has an implementation of the getSignatures, saveSignature, and getPetitions. Take a look:

angular.module('DataServices', [])
// PARSE SERVICE
.factory('ParseService', function(){
    Parse.initialize("<PLEASE USE YOUR OWN APP KEY>", "<PLEASE USE YOUR OWN API KEY>");
    var Signature = Parse.Object.extend("signature");
    var SignatureCollection = Parse.Collection.extend({ model: Signature });
    var Petition = Parse.Object.extend("petition");
    var PetitionCollection = Parse.Collection.extend({ model: Petition });

    var ParseService = {

      // GET ALL PETITIONS
      getPetitions : function getPetitions(callback) {
        var petitions = new PetitionCollection();
        petitions.fetch({
          success: function (results) {
              callback(petitions);
          }
        });
      },

      // SAVE A SIGNATURE
      saveSignature : function saveSignature(data, callback){
        var sig = new Signature();
        sig.save( data, {
                  success: function (obj) {callback(obj);}
        });
      },

      // GET A LIST OF SIGNATURES FOR A PETITION
      getSignatures : function getSignatures(petitionId, callback) {
        var query = new Parse.Query(Signature);
        query.equalTo("petitionId", petitionId);
        query.find({
          success: function (results) {
            callback(results);
          }
        });
      }
   
    };

    return ParseService;
})
// STACKMOB SERVICE
.factory('StackMobService', function(){
    // Init the StackMob API. This information is provided by the StackMob app dashboard
    StackMob.init({
      appName: "ngsignit",
      clientSubdomain: "<PLEASE USE YOUR OWN SUBDOMAIN>",
      publicKey: "<PLEASE USE YOUR OWN PUBLICKEY>",
      apiVersion: 0
    });

    var Signature = StackMob.Model.extend( {schemaName:"signature"} );
    var SignatureCollection = StackMob.Collection.extend( { model: Signature } );
    var Petition = StackMob.Model.extend( {schemaName:"petition"} );
    var PetitionCollection = StackMob.Collection.extend( { model: Petition } );

    var StackMobService = {
     
      getPetitions : function getPetitions(callback) {
        var petitions = new PetitionCollection();
        var q = new StackMob.Collection.Query();
        petitions.query(q, {
          success: function (results) {
              callback(petitions.add(results));
          },
          error: function ( results,error) {
              alert("Collection Error: " + error.message);
          }
        });        
      },    

      saveSignature : function saveSignature(data, callback){
        var sigToSave = new Signature();
        sigToSave.set({
          firstname: data.firstName,
          lastname: data.lastName,
          petitionid: data.petitionId,
          email: data.email,
          signature: JSON.stringify(data.signature) //Also, StackMob does not allow arrays of objects, so we need to stringify the signature data and save it to a 'String' data field.
        });

        // Then save, as usual.
        sigToSave.save({},{
          success: function(result) {
            callback(result);
          },
          error: function(obj, error) {
            alert("Error: " + error.message);
          }
        });
      },

      getSignatures : function getSignatures(petitionId, callback) {
        var signatures = new SignatureCollection();
        var q = new StackMob.Collection.Query();
        var signatureArray = [];

        q.equals('petitionid',petitionId);

        signatures.query(q,{
          success: function(collection) {
            collection.each(function(item) {
              item.set({
                signature: JSON.parse(item.get('signature')),
                firstName: item.get('firstname'),
                lastName: item.get('lastname')
              });
              signatureArray.push(item);
            });
            callback(signatureArray);
          }
        });
      }
   
    };
    // The factory function returns StackMobService, which is injected into controllers.
    return StackMobService;
})

This is an abridged version of the DataServices module. To see the full code, as well as many more comments explaining the code, head over to GitHub. The main point to observe here is that each service has slightly different code for getSignatures, getPetitions, and saveSignature. Also, each service has its own initialization code for its respective back-end service. The controller could care less though, because as long as the service methods accept and provide data in the right format, it’s happy.

But how does the controller know which service to use? Well, if you paid attention to the controller code, you’ll see that ‘DataService’ is injected, which is not defined yet. In the full code, there is a service defined all the way at the bottom of the file. It looks like this:

.factory('DataService', function (ParseService,StackMobService,BackboneService,$location) {
  var serviceToUse = BackboneService;
  if ( $location.absUrl().indexOf("stackmob") > 0 || $location.absUrl().indexOf("4567") > 0 ) serviceToUse = StackMobService;
  if ( $location.path() === '/parse' ) serviceToUse = ParseService;

  return serviceToUse;
});

All the other services (ParseService, StackMobService, and BackboneService) are injected into this service. In case you are wondering, BackboneService is yet another back-end service that can be used in place of the others – see the full code for details. The code above simply examines the URL and decides which service get injected via DataService. If ‘parse’ appears as the url path (e.g. www.example.com/app/#/parse), then ParseService is returned. StackMob requires that HTML apps be hosted on their servers, so just check the domain name for ‘stackmob’ and return the StackMob service. If neither of these conditions occur, then the BackboneService is returned, and no data is saved.

In retrospect, I think what I’ve got here is the beginnings of an OO-like interface – where a set of functions are defined to form a contract with the client ensuring their existence. And the implementations of that interface are a set of adapters (or is it proxies?). If I had to do this over, I would use a proper inheritance pattern with DataService as the abstract parent, and the other services as the implementations or subclasses. One of these days I’ll get around to refactoring. One day…

Full Source: https://github.com/ericterpstra/ngSignIt

Example CRUD App – Starring AngularJS, Backbone, Parse, StackMob and Yeoman

AngularJS SignIt!

After finishing my first experimental project in AngularJS, I wanted to try saving data, rather than just retrieving it. Angular has some great mechanisms for creating forms, so I put together a small application to test out more of what Angular has to offer. Oh, and I also wanted to build this using Yeoman. More on that in a minute.

The app I ended up with is a petition signer. A user chooses a petition from the select-box, enters a first name, last name and email into the form, and then signs the signature pad either by drawing with the mouse, or using a finger on a touchscreen. Hitting the Save button will capture the information, and add it to the list of signatories for the selected petition. Pretty simple, no?

The really fun part comes when the data is saved. Depending on the url, the application will choose a place to save the data. If ‘parse’ shows up in the url path, then Parse.com is used as the back-end. If the application is hosted on StackMob’s server, then data is stored with StackMob.com. If neither of these things occur, then data is just saved to a temporary Backbone collection and cleared out when you refresh the page.

Try it out!

Please note that a modern browser is needed. This will not work on IE8 or lower. I have only tested it in the latest Chrome, Firefox 15, and Safari on iOS 5. YMMV with other browsers. If I find the time, I’ll add in the fixes for IE later on.

Get the Code: https://github.com/ericterpstra/ngSignIt

A few more things…

Aside from AngularJS, Parse, and StackMob, I threw in plenty of other nifty libraries and snippets to get this thing working and looking (kinda) nice.

  • The select2 component, wrapped in a directive provided by Angular-UI. Angular-UI is a great add-on library for AngularJS that provides some neat widgets and additional functionality to directives.
  • HTML5 SignaturePad jQuery plugin from Thomas Bradley.
  • Twitter Bootstrap responsive stylesheet (try it on mobile!)
  • A font-face generated from fontsquirrel.com using Estrya’s Handwriting font.
  • Stack of paper CSS3 snippet from CSS-Tricks.com

And, of course, Yeoman was involved. There is tons of functionality built into Yeoman for handling unit-tests, live compilation of SASS and CoffeeScript, dependency management, and other stuff. I basically just used it for it’s AngularJS scaffolding, and to download some libraries via Bower. It went something like this:

yeoman init angular ngSignIt
cd ngSignIt
yeoman install jquery
yeoman install json2
... etc ...

Then I went about building my application as usual. Upon completion, I ran

yeoman build

to package everything that is needed into the ‘dist’ folder, and plopped that on my web server. Done.

// TODO

In upcoming blog posts, I’ll go over some of the more interesting bits of code – namely the services module and custom directives. There are a fair number of comments in the code now, but I think a higher-level overview would add some value. Stay tuned.

UPDATE!

Here are the links to the follow-up articles:

Angular Cats! An AngularJS Adventure Anthology

Over the past couple weeks I’ve been teaching myself about the AngularJS javascript framework. It’s gone pretty well so far, and I think I have a pretty decent handle on the basics. I’ve been able to use the tools provided to put together a small application that uses the Petfinder.com API as a backend. It is a remake of an old Flex application I built in 2009 for the House of Mews pet shelter in Memphis, TN. The application allows the user to browse pictures and information on all the adoptable cats currently at the shelter. See the application in context at www.houseofmews.com (and please excuse the background music). You can also view the app by itself here.

In addition to remaking the old app, I took the remodeling a few steps further in order to try out a few more AngularJS features. The newer version of application stands on its own and has a few added features – most notably, deep linking.

While working on this, I created a series of blog posts to chronicle my progress (and show off). There are five posts in total, with the first three focused on the ‘remake’ app, and the last two posts detailing parts of the ‘remodeled’ app. If you are interested in learning AngularJS for yourself, definitely pay attention to the latter posts. The first three posts are choc full of newbie mistakes and bad practices. They are a great example of how not to build an Angular application.

All of the code is available on GitHub. I’ve already tweaked the code a bit, so it may not match 1:1 with the code pasted into the blog posts, but everything is commented and should be relatively easy to follow. Anyway, thanks for paying attention! Enjoy!

Parts 1 – 3: House of Mews redux (source: ngCatsHOM)

Parts 4 & 5: Angular Cats! (source: ngCats)

Angular Cats! Part 5 – Custom Directive

One more thing…

I took the liberty of making a custom directive out of the Twitter Bootstrap Carousel widget. You’ll see it in partials/catDeatil.html as . I’m not 100% certain I’m doing things the ‘correct angular way’, but it seems to work.

Demo | Code

The catCarousel.html partial:

<!-- The ngCarousel directive gets inserted here to fix a timing error between angularjs and bootstrap -->
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <!-- Give the first item in the collection the 'active' class -->
    <div ng-class="{item:true, active:$first}" ng-repeat="photo in pics">
      <img ng-src="{{photo}}">
    </div>
  </div>
  <!-- Carousel Arrow Buttons -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

The directive code:

The templateURL property specifies the HTML to insert into the directive tag. I’ve restricted the type of directive to an element name. It’s just easy that way. One caveat though, it that special considerations need to be made for this to be IE7/8 compatable.

The link function will take the value of the ‘pics’ attribute in the catcarousel HTML tag and assign it to the directive scope. Whenever the ‘cat’ object changes – either by clicking Next/Prev, or selecting a cat from the grid – the directive will update the ‘pics’ and call the carousel() function on the root element of the directive template.

angular.module('myDirectives', [])
.directive('catcarousel', function(){
  return {
    templateUrl: 'partials/catCarousel.html',
    restrict: 'EAC',
    link: function (scope,element,attr) {
      scope.$watch('cat', function () {
        scope.pics = scope.$eval(attr.pics);
        $(element).carousel({
          interval: 0
        });
      });
    }
  }
});

And that just about wraps it up. There’s plenty more code in the cat apps than outlined in these blog posts, so if anyone is interested, please take a look at the project on GitHub. I tried to add as many useful comments as I could. If any Angular experts run across this and are horrified by any of the code, please let me know! Thanks. Bye.

Angular Cats! Part 4 (Refactored) – Deep Linking, More Better Services

Demo | Code

During the creation of Angular Cats!, it didn’t take me long to realize that I was straying from best practices and the intentions of Angular’s creators. I dug myself a bit of technical debt in the name of expediency, and have now come to pay the piper. Over the past few days I’ve been refactoring major portions of the app, and wound up with almost an entirely new codebase. Large sections are still intact (e.g. the translator service), and functionality is basically the same, but a few key differences are present.

The largest change by far is the ability to deep link. Every cat has its own URL, and can be bookmarked.

To get the deep-link ball rolling, the following code was added to app.js:

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/cats/:page', {templateUrl: 'partials/catList.html', controller: CatListController});
    $routeProvider.when('/cat/:catId/:page', {templateUrl: 'partials/catDetail.html', controller: CatDetailController});
    $routeProvider.otherwise({redirectTo: '/cats/1'});
}])

The routes allow a user to go to a specific ‘page’ of cats in the cat list, or navigate to the details of any given cat – provided you know its ID. I also store the page number in the URL of the cat detail page so the user can navigate back to the page previously viewed when clicking ‘Back’ on the cat detail page.

In order to navigate around the application, the controllers now use the $location module, and will change the path according to the behavior of the user. The code below shows how the handler for clicking a cat to view details has changed.

Before (use events to change state):

// CatListController
$scope.getDetail = function() {
  eventBroadcast.broadcast('catClicked',{cat:this.cat});
};

//MainController
$scope.$on('catClicked',function() {
  switchView();
});
...
function switchView() {
  $scope.viewList = !$scope.viewList;
  $scope.viewDetail = !$scope.viewDetail;
}

After (use location to change state):

// CatListController
$scope.getDetail = function (catId) {
  $location.path('/cat/' + catId + "/" + $routeParams.page);
};

The CatsService module was completely overhauled to include a getCat() method in addition to getCats(), along with a few other useful methods. Oh, and this version actually has the ability to contact the live Petfinder.com API! Using a config constant, the app can switch between grabbing cat data from a .json file on disk, or reaching out to the live Petfinder API (via a PHP proxy on my own server). While building the app, I usually relied on a static json file for data, but it’s nice to be able to contact a live service to return fresh data.

The returned data is also stored in the CatService module. This data is basically the catCollection property that I previously stuck in $rootScope. Storing application data and state information on $rootScope just didn’t seem right, so I created some properties and accessor methods (get/set) on CatService, and used that instead. Worked out quite nicely.

Below is the new CatService module. Notice that it’s quite a bit larger that the previous module. This time around, the service had a few private variables and functions that the service uses for itself, and the CatService object is returned by the factory and injected into the controllers. The properties of the CatService object are exposed to the controllers and can be used wherever CatService is injected.

The first major feature of this updated service is the remoteSvc resource. Instead of just grabbing a .json file from disk, it will contact the proxy.php service and grab live data returned from the Petfinder API. The query object passed into the $resource function demonstrates how to override default $resource methods. This really isn’t necessary in my case, but I did it just for kicks.

The line var service = (ENDPOINT === "LOCAL") ? localSvc : remoteSvc; will look at the ‘ENDPOINT’ constant set in the application config (see app.js), and determine whether to use the local json file, or server resource to gather the cat data. It’s a quick and dirty approach, and in a larger system it would be better to abstract this into a proper config file, with two separate service modules, but it works pretty well for a small app with one or two services.

The CatService object has some getters and setters for accessing the selected cat, and the selected cat’s index value in the cat collection array. And, of course, there are the getCats and getCat methods, which gather the necessary data for the list and detail views (respectively).

angular.module('catService', ['ngResource','CatServiceHelper'])
.factory('CatsService', function($resource,$filter,$routeParams,CatServiceHelper,ENDPOINT){
    /**
     * Private vars
     */

    // Set the max number of cats to retrieve from the Petfinder API
    var numberOfCatsToGet = 200;

    // Set up the $resource injectable to use the Petfinder API. Some custom options are used in the $resource.query method
    var remoteSvc = $resource('/jsCats/ngCats/proxy.php', {count:numberOfCatsToGet,offset:0},
                { query: {
                      method:'GET',
                      params:{action:'shelter.getPets',count:numberOfCatsToGet, offset:0},
                      isArray:true
                     }
                });

    // Use the cats.json file as the $resource, if necessary
    var localSvc = $resource('cats.json',{});

    // Decide which $resource to use as the actual service
    var service = (ENDPOINT === "LOCAL") ? localSvc : remoteSvc;

    // Private properties & methods used to store data shared between controllers
    var _cats = [];
    var _activeCatIndex = -1;
    var _setActiveCat = function _setActiveCat(catId,callback) {
                          var cat = CatsService.findCatInCollection(catId);
                          if (cat) {
                            _activeCatIndex = _cats.indexOf(cat);
                            callback(cat);
                          }
                        };

    /**
     * CatService Object returned by the factory function.
     * Contains instance methods that can be used by the controllers.
     */

    var CatsService = {
     
      /**
       * ### Accessor Methods
       */
     
     
      // Controllers can read the cat collection, but cannot change it without calling a service method.
      getCatCollection : function getCatCollection() {
        return _cats;
      },

      getActiveCatIndex : function getActiveCatIndex() {
        return _activeCatIndex;
      },

      setActiveCatIndex : function setActiveCatIndex(idx) {
        if (angular.isNumber(idx) && idx <= _cats.length) {
          _activeCatIndex = idx;
        } else {
          _activeCatIndex = -1;
          throw("activeCatIndex must be a number, and cannot exceed the length of the cat collection.");
        }
      },

      /**
       * ### Service Methods
       */


      // This method retrieves all cat data from the service and stores it in _cats
      getCats : function getCats(callback){
        var self = this;
        service.query(function (data) {
          var rawCatData = [];
          if ( data && data.length > 0 && data[1].petfinder.pets.pet && data[1].petfinder.pets.pet.length > 0 ) {
            rawCatData = data[1].petfinder.pets.pet;
          }
          angular.forEach(rawCatData,function(item){
            _cats.push( CatServiceHelper.translateCat(item) );
          });
          if (angular.isFunction(callback)) callback(_cats);
        });
      },

      // This method retrieves data for one cat.  It will also call getCats if the user
      // navigates directly to a catDetail page. This is necessary for the Back and
      // Next/Prev buttons to work correctly.
      getCat : function(catId, callback) {
        var self = this;
        if( _cats.length ) {
          _setActiveCat(catId,callback);
        } else {
          this.getCats(function (results) {
              _setActiveCat(catId,callback);
          });
        }
      },

      // This uses an AngularJS filter function to extract a cat from the cat collection by the cat's id
      findCatInCollection : function findCatInCollection(catId) {
        var cat = $filter('filter')(_cats, function (item) {
                return item.id.toString() === catId;
              });
        return cat[0] || 0;
      },

      // Use the default $resource.query method
      query : service.query,
     
      // Use the default $resource.get method
      get : service.get
   
    };

    // The factory function returns CatsService, which is injected into controllers.
    return CatsService;
});

Angular Cats! Part 3 – Communicating with $broadcast

Continued from: Angular Cats! Part 2
Full Source Code: GitHub: jsCats/ngCatsHOM

In part 2 of this post, the source code in the event handlers within each controller was removed. That’s because there’s some interesting stuff going on that wouldn’t have made sense without first knowing about one last module within the application: eventBroadcast.

To communicate clicks and cats between controllers, I found a dead simple solution that cobbles together an event dispatcher-esque system. When ‘eventBroadcast’ is injected into a controller, it will have access to its member variables – in this case, an event name, and a message. The eventBroadcast object can also broadcast events from the $rootScope, which will then trickle down the scope hierarchy and can be listened for by each controllers $scope. So it goes something like this:

  1. User clicks a cat thumbnail
  2. $scope.getDetail is called.
  3. The clicked cat object is attached to eventBroadcast.message.
  4. An event is broadcast from $rootScope with the name ‘catClicked’
  5. CatDetailController’s $scope responds to ‘catClicked’
  6. eventBroadcast.message is checked for data.

Here is the ngClick handler in CatListController:

function CatListController($scope,$rootScope,$routeParams,CatsService,$location,eventBroadcast) {

  $scope.getDetail = function() {
    // When a thumbnail is clicked, a 'catClicked' event is broadcast,
    // and the data for the clicked cat is attached to eventBroadcaster
    eventBroadcast.broadcast('catClicked',{cat:this.cat});
  };

...
}

Here is the actual eventBroadcast module:

.factory('eventBroadcast', function($rootScope) {
    // eventBroadcaster is the object created by the factory method.
    var eventBroadcaster = {};

    // The message is a string or object to carry data with the event.
    eventBroadcaster.message = '';

    // The event name is a string used to define event types.
    eventBroadcaster.eventName = '';

    // This method is called from within a controller to define an event and attach data to the eventBroadcaster object.
    eventBroadcaster.broadcast = function(evName, msg) {
        this.message = msg;
        this.eventName = evName;
        this.broadcastItem();
    };

    // This method broadcasts an event with the specified name.
    eventBroadcaster.broadcastItem = function() {
        $rootScope.$broadcast(this.eventName);
    };

    return eventBroadcaster; })

And the handler for ‘catClicked’ in CatDetailController:

function CatDetailController($scope,$rootScope,eventBroadcast) {

  // When 'catClicked' is broadcast, we know that new cat data needs to be loaded from eventBroadcast
  $scope.$on('catClicked',function() {
    showCat(eventBroadcast.message.cat);
  });

  ...

  var showCat = function(cat) {
    $scope.cat = cat;
    $scope.catIndex = $rootScope.catCollection.indexOf(cat);
  }

}

And there you have it! A rudamentary technique for communicating between controllers. However, after reading this Google Groups thread, I learned that there are some flaws with this method. Thomas Burleson created a more robust pub/sub module that acts as a message queue, which is more scalable, flexible, and doesn’t rely so much on $rootScope. A demo of the Messaging Service module is on jsFiddle, and the code can be download from his site. I hope to try this out very soon.

Angular Cats! Part 2 – Views (partials) and Controllers

Continued from: Angular Cats! Part 1
Full Source Code: GitHub: jsCats/ngCatsHOM

Gathering a pile of data from an API (or in my case, a raw json file) makes for a pretty poor web application. In order to present the data in a fun and interactive interface, I created a couple HTML templates in the /partials folder, and inserted references to those templates into the MainController section of index.html.

In order to show or hide each partial view, I created two boolean values within the MainController’s scope. The values are named ‘viewList’ and ‘viewDetail’ and setting them to true or false will show or hide each one (respectively). The HTML templates themselves are inserted with the ngInclude directive. Using ngInclude probably isn’t the best option as it can lead to spaghetti code, have adverse affects on page performance, and probably some other stuff I can’t think of. Creating custom AngularJS directives are the best option for reusable components and/or widgets. I’ll eventually get to that, but to keep things simple for now, using ngInclude will work.

<div class="row" ng-controller="MainController">
    <div ng-show="viewList">
      <div ng-include src="'partials/catList.html'"></div>
    </div>
    <div ng-show="viewDetail">
      <div ng-include src="'partials/catDetail.html'"></div>
    </div>
</div>

The MainController has a simple function called switchView that flips the boolean values of viewList and viewDetail. I don’t have a situation where both should be true or false, but I could if I wanted. If you look at the MainController function, there are two event handlers that do nothing but call switchView().

function MainController($scope, $rootScope, eventBroadcast) {

  $scope.$on('catClicked',function() {
    switchView();
  });

  $scope.$on('backClicked',function() {
    switchView();
  });

  function switchView() {
    $scope.viewList = !$scope.viewList;
    $scope.viewDetail = !$scope.viewDetail;
  }

  // Starting values
  $scope.viewList = true;
  $scope.viewDetail = false;
}
// Explicitly inject stuff. This is optional unless you plan on minifying the code.
MainController.$inject = ['$scope','$rootScope','eventBroadcast'];

Upon loading the app, the user is greeted with a nice big grid full of lovely little cat pictures. This grid is actually an unordered list of thumbnails from the cat data. All of the viewable elements on the page are contained within the CatListController section – denoted by the ngController directive. There are a number of directives doing different things here: The ngClick directive handles mouseclicks and calls a click-handler function; The ngMouseover directive works similarly; ngRepeat will iterate through the contents of the ‘cats’ array and create a list-item for each cat; and ngSrc will display the thumbnail in conjunction with the img tag.

<div ng-controller='CatListController'>
  <div class="row span12 catGrid">
    <!-- Grid of cat thumbnails -->
    <ul class="thumbnails">
      <li ng-repeat="cat in cats" ng-click="getDetail(cat.id)" class="span2" ng-mouseover="showName(cat.name)">
        <div class="thumbnail">
          <!-- Remember to use 'ng-src' for images -->
          <img ng-src="{{cat.thumbnail}}">
        </div>
      </li>
    </ul>
  </div>

  <!-- Nav buttons and Cat Name -->
  <div class="row">
    <button class='btn btn-primary span1' ng-click="changePage('prev')">Prev</button>
    <div class="catName span10">{{name}}</div>
    <button class='btn btn-primary pull-right span1' ng-click="changePage('next')">Next</button>
  </div>
</div>

That’s all fine and dandy, but it’s not going to do anything unless we actually have a CatListController. The CatListController will need to define the properties and methods within its $scope, and handle any setup or logic for the listView page. $scope methods will define the behaviors, such as responding to clicks, and will store data used by directives (e.g. catName). Also within CatListController is the call to CatService.getCats(). This retrieves all the translated cat data and stores it on the $rootScope. Storing data on the $rootScope is sort of like creating a global variable – not the best practice, but useful in a pinch. And it’s only ‘global’ within the scope of the AngularJS application, not the global Javascript namespace.

The code below is truncated. For the full source (with comments), take a look on GitHub.

function CatListController($scope,$rootScope,$routeParams,CatsService,$location,eventBroadcast) {

  $scope.getDetail = function() {
    // When a thumbnail is clicked, show the detail
  };

  $scope.goToPage = function goToPage(page) {
    // If there are more cats than can fit in the grid, more pages are needed.  
    // This function go to a specific page.
  };

  $scope.changePage = function(pagingAction) {
   // This handles the Next/Prev buttons to cycle through pages.
  };

  // When a user hovers over a cat, it's name is displayed below the grid.
  $scope.showName = function(catName) {
    $scope.name = catName;
  }

  // If the catCollection is not yet defined, fetch the data, otherwise go to page one.
  if( !$rootScope.catCollection ) {
    // This uses the CatService defined in services.js to retrieve the list of cats.
    CatsService.getCats(function (data) {
      // The cat list returned from the getCats method is loaded onto $rootScope
      // so it can be easily shared between controllers.
      $rootScope.catCollection = data
      $scope.goToPage(1);
    });
  }
CatListController.$inject = ['$scope','$rootScope', '$routeParams', 'CatsService', '$location','eventBroadcast'];

The catDetail template is pretty much the same story. There are a bunch of $scope variables to store data to display within the template, and some click handler functions for buttons. A unique element that appears on this page is ng-carousel, which is a directive that activates Twitter Bootstrap’s carousel gallery component for a series of pictures. Normally, the Bootstrap carousel is activated by the ‘carousel slide’ class. However, after building the view, I noticed that sometimes the slider buttons would just stop working. It was very intermittent, and I think Angular refreshing the DOM on $scope changes would somehow break the carousel. To fix this, I created a directive that would refresh the carousel component every time the $scope.cat variable changed.

<div ng-controller='CatDetailController' class="catDetail">

<!-- Title -->
<div class="row">
    <div class="span1">
      <button class="back btn btn-primary" ng-click="goBack()">Back</button>
    </div>
    <div class="span11">
      <h2 class="pull-right">{{cat.name}}: {{cat.size}} {{cat.age}} {{cat.breed}}</h2>
    </div>
</div>     

<!-- Pics and Description -->
<div class="row catDetailPane">
    <div class="span5">
    <!-- The ngCarousel directive gets inserted here to fix a timing error between angularjs and bootstrap -->
        <div ng-carousel id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">
        <!-- Give the first item in the collection the 'active' class -->
            <div ng-class="{item:true, active:$first}" ng-repeat="photo in cat.pics">
                <img ng-src="{{photo}}">
            </div>
          </div>
          <!-- Carousel Arrow Buttons -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>

  <!-- Cat Description -->
    <div class="span7">
        <div class="well" ng-bind-html-unsafe="cat.description">
        </div>
    </div>
</div>

<!-- Footer (Nav buttons and addt'l details -->
<div class="row">
  <button ng-click='newCat(catIndex - 1)' class="btn btn-primary span2">Prev Cat</button>
  <div class="span8 catOptions">{{cat.options}}</div>
  <button ng-click='newCat(catIndex + 1)' class="btn btn-primary pull-right span2">Next Cat</button>
</div>

</div>

Oh yeah, did you see that ng-bind-html-unsafe directive? That’s because the description text has a bunch of craptacular MS Word-to-HTML junk sprinkled throughout, and that particular directive handles it quite nicely.

The controller here is pretty straightforward – handle clicks, show a cat.

function CatDetailController($scope,$rootScope,eventBroadcast) {

  $scope.$on('catClicked',function() {
    // This is an event handler for a click on a cat thumbnail.
  });
 
  $scope.goBack = function () {
    // Back button clicked! Handle it!
  };

  // This method is called when 'Next Cat' or 'Prev Cat' is clicked.  
  // It will cycle through each cat in catCollection.
  $scope.newCat = function(idx) {
    // This method is called when 'Next Cat' or 'Prev Cat' is clicked.  
    // It will cycle through each cat in catCollection.
  }

  var showCat = function(cat) {
   // This method takes a cat object as a parameter and sets it as the active cat.
   // It also finds the index of the cat object in catCollection.
  }

}
CatDetailController.$inject = ['$scope','$rootScope','eventBroadcast'];

And here’s the directive to fix the Bootstrap carousel problem:

.directive('ngCarousel', function() {
  return function (scope, elm, attr) {
        scope.$watch('cat', function() {
          $(elm).carousel('pause');
        });
    }
});

Last but not least is a technique to give the controllers the ability to communicate with each other. But that will be a separate post, because this one is too long already.

Angular Cats! Part 1 – The Data Service

View the App | Get the Code

In order to broaden my horizons as a developer of web applications, I’ve been taking a good hard look at some of the popular Javascript MVC frameworks of the modern era.  I started by looking at backbone.js and was horribly confused, and was subsequently delighted when I investigated AngularJS.  The ‘two-way declarative bindings’ remind me a lot of Flex, and it felt very natural jumping into development with Angular.  In order to stretch my brain a bit, and really dig into the framework, I decided to start simple and convert an existing Flex project into an Angular app.  A perfect candidate for this is the House of Mews cat browser.  It’s a simple little widget that pulls pet data from the Petfinder.com API, displays a grid of thumbnails, and allows a user to browse details of adoptable pets.

Try it out!

To get started, I grabbed the angular-seed project from GitHub.  This project includes the latest version of Angular (1.0.2 as of this writing), as well as some tools to run a stand-alone server using node.js, and a unit-test runner.  All I really paid attention to was the contents of the ‘app’ folder. It has a nice directory structure, some starter files, and the library itself.

After clearing out all the cruft, I started with the app.js file in /app/js/. Using a single statement, I defined the main module for my app.

angular.module('catApp', [])

Then it’s a simple as adding the ngApp directive to the root of the index.html document. Oh yeah, I also added Twitter Bootstrap to the project as well. The grid system is just super, and I wanted to use the carousel they provide.

<!doctype html>
<html lang="en" ng-app="catApp">
<head>
  <meta charset="utf-8">
  <title>AngularJS Cats App</title>
  <link rel="stylesheet" href="css/bootstrap.min.css"/>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
  stuff goes here...
</body>
</html>

Before going any further with HTML and partial templates and such, I like to make sure I can grab the data first. I created a service module to gather all the cat data. Because the cat data is only updated once per week, I simply download a data file using the Petfinder API, and load the data directly from my site. This prevents hundereds (thousands?) of unnecessary calls to the Petfinder API, since the data rarely changes. I actually have a PHP script that runs every week to update the local data file.

The angular service module is really a factory that does two things: Uses Angular’s $resource object to load data from cats.json, and create a CatService object to be used throughout the application. For now, this object only has one method: getCats(). Rather than just pass raw data from cats.json around the application, getCats() will first transform all the raw data into a nice collection of sensible Cat objects. To see what I mean, observe the raw data for a single cat below:

"pet": {
    "options": {
        "option": [
            {
                "$t": "altered"
            },
            {
                "$t": "noKids"
            }
        ]
    },
    "breeds": {
        "breed": [
            {
                "$t": "Tortoiseshell"
            },
            {
                "$t": "Domestic Long Hair"
            }
        ]
    },
    "shelterPetId": {},
    "status": {
        "$t": "A"
    },
    "name": {
        "$t": "HARLOW"
    },
    "contact": {
        "email": {},
        "zip": {
            "$t": "38104"
        },
        "city": {},
        "fax": {},
        "address1": {
            "$t": "933 S. Cooper"
        },
        "phone": {},
        "state": {
            "$t": "TN"
        },
        "address2": {
            "$t": "Website:  www.houseofmews.com"
        }
    },
    "description": {
        "$t": "<div>I&#39;m the House of Mews superstar in disguise, Harlow!! As you can see I am a beautiful long-haired, tortoiseshell girl and I know it! I&#39;m actually a little shy, but I know I&#39;m gorgeous, so I just can&#39;t help strutting my stuff everywhere I go. I guess hearing everyone tell me how beautiful I am has even made me a little more outgoing. They don&#39;t even mind my crossed eyes (not that it bothers me). In fact, most people tell me they&#39;re just part of my charm! I like to play with toys on sticks. I need a little patience to get over my shyness, but I&#39;ll be well worth it in the end. Please don&#39;t overlook me just because I am a little shy. Come on, haven&#39;t you ever dreamed of living with a supermodel?? Here&#39;s your chance! Approx. DOB is 5-20-00. </div>"
    },
    "sex": {
        "$t": "F"
    },
    "age": {
        "$t": "Senior"
    },
    "size": {
        "$t": "S"
    },
    "mix": {
        "$t": "yes"
    },
    "shelterId": {
        "$t": "TN198"
    },
    "lastUpdate": {
        "$t": "2011-01-12T20:07:07Z"
    },
    "media": {
        "photos": {
            "photo": [
                {
                    "@size": "x",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-1-x.jpg",
                    "@id": "1"
                },
                {
                    "@size": "fpm",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-1-fpm.jpg",
                    "@id": "1"
                },
                {
                    "@size": "pn",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-1-pn.jpg",
                    "@id": "1"
                },
                {
                    "@size": "pnt",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-1-pnt.jpg",
                    "@id": "1"
                },
                {
                    "@size": "t",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-1-t.jpg",
                    "@id": "1"
                },
                {
                    "@size": "x",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-2-x.jpg",
                    "@id": "2"
                },
                {
                    "@size": "fpm",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-2-fpm.jpg",
                    "@id": "2"
                },
                {
                    "@size": "pn",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-2-pn.jpg",
                    "@id": "2"
                },
                {
                    "@size": "pnt",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-2-pnt.jpg",
                    "@id": "2"
                },
                {
                    "@size": "t",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-2-t.jpg",
                    "@id": "2"
                },
                {
                    "@size": "x",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-3-x.jpg",
                    "@id": "3"
                },
                {
                    "@size": "fpm",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-3-fpm.jpg",
                    "@id": "3"
                },
                {
                    "@size": "pn",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-3-pn.jpg",
                    "@id": "3"
                },
                {
                    "@size": "pnt",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-3-pnt.jpg",
                    "@id": "3"
                },
                {
                    "@size": "t",
                    "$t": "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-3-t.jpg",
                    "@id": "3"
                }
            ]
        }
    },
    "id": {
        "$t": "4169367"
    },
    "animal": {
        "$t": "Cat"
    }
}

Now look at this:

cat: {
age: "Senior",
breed: "Tortoiseshell Domestic Long Hair ",
description: "<div>I&#39;m the House of Mews superstar in disguise, Harlow!! As you can see I am a beautiful long-haired, tortoiseshell girl and I know it! I&#39;m actually a little shy, but I know I&#39;m gorgeous, so I just can&#39;t help strutting my stuff everywhere I go. I guess hearing everyone tell me how beautiful I am has even made me a little more outgoing. They don&#39;t even mind my crossed eyes (not that it bothers me). In fact, most people tell me they&#39;re just part of my charm! I like to play with toys on sticks. I need a little patience to get over my shyness, but I&#39;ll be well worth it in the end. Please don&#39;t overlook me just because I am a little shy. Come on, haven&#39;t you ever dreamed of living with a supermodel?? Here&#39;s your chance! Approx. DOB is 5-20-00. </div>",
id: 4169367,
name: "HARLOW",
options: "Spayed/Neutered, No Kids",
pics: [
    0: "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-1-x.jpg",
    1: "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-2-x.jpg",
    2: "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-3-x.jpg" ]
sex: "Female",
size: "Small",
thumbnail: "http://photos.petfinder.com/photos/US/TN/TN198/4169367/TN198.4169367-1-fpm.jpg" }

Much better, no? It’s a lot easier to work with these tidier objects in the controllers and templates, plus, some validation and manipulation makes it easier to handle cases where data is missing.

Here’s the barebones service module. Too see the full source code (including the ServiceHelper module which does all the data translation), take a look at the project on GitHub.

angular.module('catService', ['ngResource','CatServiceHelper'])
.factory('CatsService', function($resource,$filter,CatServiceHelper){

    // Define the remote service using Angular's $resource module.
    var service = $resource('cats.json',{});

    // CatsService is the object created by the CatsService factory.
    // This is a bit long-winded and could easily be shortened,
    // but I plan on adding some additional methods to CatService in the future.
    var CatsService = {
      // The getCats function calls $resource.query() to retrieve the remote data.
      // The data is then lightly validated and scrubbed using the translateCat()
      // function in the CatServiceHelper module
      getCats : function getCats(callback){
        service.query(function (data) {
          var cats = [];
          var catCollection = [];
          if ( data && data.length > 1 && data[2].pets.pet && data[2].pets.pet.length > 0 ) {
            cats = data[2].pets.pet;
          }
          angular.forEach(cats,function(item){
            catCollection.push( CatServiceHelper.translateCat(item) );
          });
          callback(catCollection);
        });
      }
    };
    return CatsService;
});

So that’s a good start. The application won’t really do anything, but it’s primed and ready to fetch lots of cat data!

© 2017 Eric Terpstra

Theme by Anders NorénUp ↑