Red Hat
Dec 20, 2012
by kborchers

With a lot of talk around the water cooler lately about Angular.js, I decided I would throw together an app using AeroGear.js and Angular.js to accomplish a couple of goals.

  1. My only experience with Angular was playing with it a bit but had not really dove into it nor built anything with it so I wanted to change that.
  2. I wanted to get an idea of how hard it would be to have AeroGear’s Pipeline and DataManager features supplement a framework like Angular.

Angular.js logo

I have to say, learning Angular was pretty easy. Having much more experience with Backbone.js, there was a bit of a learning curve as Angular is more “opinionated” about how you structure your app but once you get the hang of it, it’s actually really nice. The other thing that really  helped me get off the ground with Angular is Yeoman. For those not aware, “Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.” (yeoman.io website) Basically, Yeoman does some scaffolding, building and even previewing of your app (among other things) for you so you can concentrate on making your app cool. You should definitely check it out. Also, with the latest release, we have added AeroGear.js to the Bower registry so now Yeoman can keep AeroGear.js up to date in your project and download it for you.

AeroGear LogoOnce I got the basics of the app laid out, it was time to get to the meat of this experiment which was to incorporate AeroGear into the app. Today, we are releasing AeroGear 1.0.0.M7 which includes AeroGear.js 1.0.0.M2. In M2, some things were cleaned up from the previous milestone release, a new sessionStorage/localStorage adapter was added to DataManager as well as some more complex filtering capabilities, and the ability to read data from JSONP endpoints was added to Pipeline. I wanted to make an app that would highlight all of these new features and I settled on a mobile information site for the upcoming DevNexus conference.

AeroGear.Pipeline vs. $http

All of the info about the conference is provided via JSON, and now JSONP thanks to @summerspittman. Normally, with Angular you could use $http directly to access remote resources. What I did was created a Service which contains all of the Pipeline and DataManager instances I would need for the app and I inject that into each controller that needs it. Then, anywhere you would normally use $http, or the $http.get shortcut, to retrieve data, I use the read() method provided by the pipe associated with the data needed at that time. The API’s are actually quite similar but an advantage that AeroGear gives is that I can declare the pipes up front, then using a single Controller I can manage both the speaker and presentation data/views. This is possible because the config for each pipe has already been configured so I don’t need to update the endpoint URL or other parameters on the fly. You could do that with Angular too but to me, this feels cleaner.

AeroGear.DataManager

The DataManager is where we get some real advantages from AeroGear. The DataManager provides a way to interact with a local copy of your data using a similar API to the Pipeline. So, once we have retrieved the data we want from the server, we can store it in memory, or in the case of this app we use localStorage which is a new feature of DataManager  with this release as an extension to the Memory adapter. Now, even when the app is completely reloaded, we can get the performance increase and http request savings of pulling our data from the local store instead of the remote source. In the future, this will also help in our endeavors to provide simple APIs for taking your apps offline as well.

The other feature added to DataManager was an improvement to the filter() method. Now, filtering on data nested deep within objects is possible. In this app, this allows us to filter presentations based on the speaker and provide proper linking between the two.

Go Play!

Here is a list of links to things you can play with now or ways to get more information. Please check this stuff out and specifically for AeroGear, provide feedback by joining our mailing list or chatting with us via IRC in #aerogear on Freenode!