AngularJS Doesn't Suck!

Ok, I apologize, that title is complete link bait, but I figured I'm allowed to have some fun every now and then, right? At least I didn't call it, "This Developer tried AngularJS and you won't believe what happened next!" About three years ago I blogged about AngularJS and how I thought it was kind of cool. This was before the 1.0 release. When 1.0 came out... it had changed. I didn't like it. It was hard to describe why I didn't like it. It had definitely gotten more complex and I just had a hard time wrapping my head around it.

But some friends I admire were doing some good things with it and PhoneGap (see Holly's post: Quick Start Guide to PhoneGap+AngularJS) so I thought it might be time to bite the bullet and really take a look at it again. Here are some random notes.

• First off, I'm very happy to see that the excellent Git-based tutorial still exists. It is still easy to use (even if you know nothing about Git!) and really encourages you to play around. I also like the emphasis on testing as part of the process. I went through the entire tutorial and the things that confused me the most ($scope and modules) make a bit more sense to me now).
• Speaking of testing, the tutorial walks you through using both Jasmine (which I know of and like) and Karma. Karma is really, really freaking cool. If you've tried AngularJS before and hate it, cool, but definitely take a look at Karma.
• As I went through the tutorial, I started to build my own little project too (more on that below). I quickly ran into things I didn't know how to do so of course I Googled for solutions. I take it as a good sign that whenever I Googled for "how do I do X with angular" I always found solutions. Even better, the solutions typically made sense to me.
• As a whole, I like the approach of AngularJS. The binding feels nice. The controllers make sense to me. I had recently taken to Backbone, but I think I prefer the Angular way. I tend to flip flop a bit (I'm like a cat - shiny!) but right now I'm just digging what I see.

As I said above, I worked on a small project while I was learning AngularJS. I do not believe this is the most appropriate use of AngularJS, and to be clear, I wouldn't even pretend this is a good example. But I want to use this application for something else I've got planned as well so I thought I'd share. When I first learned Flex Mobile, I built an application called INeedIt. (You can still install it here.) INeedIt was based on a simple idea. You are in a strange city and need... something. An ATM, a barber, or heck, an amusement park. The application would make use of Google's Places API to provide you a list of businesses that meet that need.

I built this in Flex Mobile as an excuse to play with it, but obviously, this doesn't need Flex. This doesn't even need PhoneGap. All it does is fire off a Geolocation call and then make use of the API. So I rebuilt it in pure HTML. I used Ratchet for the UI. Here it is in the iPhone. The list of services comes from the API and is pretty extensive. This screen is shown after a loading screen tells you that it is finding your location.

Once you select a service type, Google will then tell you what businesses it knows about within a range (in my case, 2000 meters).

Finally, you can see details about a business. Google's API actually returns quite a bit of data. This sometimes includes a rating and open hours. I went with a simple view of the address and a call to the static maps API. In the Flex Mobile one I actually included driving directions. I was being lazy so I didn't go that far.

The demo is still a bit wonky in places. I didn't include a back button to go back to the results. But it works. You can see this yourself online here: http://www.raymondcamden.com/demos/2014/jan/14/v4/app. I encourage you to view source and see how it was implemented, just keep in mind that this shouldn't be considered "Best Practice" AngularJS code.