Navel Gazing with AngularJS

I've been celebrating summer with a vengeance and whole lot of beer. Needless to say I don't have to lean over too far to see my belly button these days. So I figured I'd try my hand at not-so-lean programming. This is what I ended up with -



It doesn't seem like much but it was a lot of fun. When you enter an address, it provides basic economic data and legislator details for the census block of that address (that's what the FIPS is for). I wanted to draw shapes on the map but the amount of data was too much so that's a project for another day.

If anyone is wondering how downtown Manhattan compares with my neighbourhood in Brooklyn. Here's another screenshot -


The percentages seem to add up to more than 100% for Brooklyn. I'm not quite sure why that is (I just report the data, I don't generate it). My guess is that there is a margin of error in census data. Also the poverty rate seems to be the total population as opposed to the income groups which seems to be made up of working-age people.

The back-end and front-end are both part of the same project and you can browse the code on github. Everything is installed locally and my API keys are in there as well so you should just be able to run it as it is by running 'node server.js'. This will launch the REST API and the front-end (http://your.host/app/ will bring up the front end and http://your.host/api/civic or http://your.host/api/geocode will bring up the rest APIs).

There isn't much by the way of input validation or error handling so if you don't put in a valid address, it'll probably break. All that's coming in the next release (-:

I used Connect to host the entire project, front and back, with connect-rest to build the REST API and AngularJS to write the front-end.

Connect-rest is a fantastic RESTifier middleware based on Connect. It gives you some powerful features such as API versioning, API discovery, sophisticated parameter handling and API key management (I didn't use these features but I can't imagine writing production-ready code without them).

I used to dread writing front-ends because they're so fiddly and it's hard to debug browser-based code, especially, if on top of that, I had to use a DI-based MV-something framework. AngularJS and the Chrome debugger have changed all that.

It took me a couple of days to get the UI working and the only reason it took so long was because I took a lot of time off to understand best-practices and design patterns. Even if you aren't an Angular developer I'd strongly recommend this video by Miško Hevery on best practices and this article by Sarit Mishra on scope and prototypal inheritance in JavaScript.

I also discovered Yeoman along the way. It really does help by installing the more frequently-used components such as Twitter's bootstrap CSS, jquery, etc. You also use it to launch a basic webserver, make live changes, etc. It made wiring up the app a lot easier.

In addition to the base Angular library, I also used Angular-resource for accessing the REST back-end, Angular-route to set up front-end routes and Angular-google-maps for displaying the map.

It's worth noting that in the civic.html file is that the location marker or pin is a child of the google-map directive. I struggled with this for a bit and kept getting an error that said "Error: [$compile:multidir] Multiple directives [googleMap, markers]" because I was using markers as a property of google-map instead of a child directive.

It's also worth noting that relative paths no longer work the way you're used to when you use ngRoute. That's true for images as well. It stands to reason as resources are rules-based and your organizational structure is no longer exposed to end users. For example even though I specified an icon for my marker in the model, it didn't display because I had the path set to '../images/blue_marker.png'. I had to change it to read '/app/images/blue_marker.png' for it to work.

I could have used the Temboo APIs directly from the front-end but that wouldn't have created as much navel fuzz. I also daisy chained a couple of their APIs using Promises. Their Civic API takes gecodes as input and then returns the economic and legislator data that I present. I used their Geocode API to translate addresses to geocodes and then use that to get the Civic information.

There is an error in their documentation - it says that the API credentials for Sunlight Labs are optional. This isn't true. You won't get any data back unless you provide your own key. They also have working demos for you to test your payload. I wish they had made their code public though, it would have been really helpful.

For example, you have to JSON. stringify the dictionary with the API credentials otherwise it won't work.


Aside from these minor complaints, their support is fantastic, given that I don't pay them anything to support me. The demographics data wasn't being returned from the Civic API when I first started using it and they had it fixed in a couple of hours. 

Comments

Popular posts from this blog

The Forecaster Brown Fan Club

How to Create a Pentaho Report Using the REST Client

Automated Testing with vncdotool (Not Headless, but Hairless)