Twitter: raymondcamden


Address: Lafayette, LA, USA

AngularJS Doesn't Suck!

01-14-2014 6,348 views JavaScript, HTML5 10 Comments

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.

Related Blog Entries

10 Comments

These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • Ryan LeTulle #
    Commented on 01-14-2014 at 10:06 AM
    Good stuff
  • Tolu Olowu #
    Commented on 01-16-2014 at 5:53 AM
    Hi Raymond, just went through your post - I like it. You coming back to Angularjs after like 2 years is encouraging as I just started looking into the framework not quite long ago myself. I must admit a slightly opinionated framework is more desirable sometimes.

    You hinted on the source of your little app, do you have that somewhere? Thank you.
  • Commented on 01-16-2014 at 6:53 AM
    Just view source. :) Use dev tools to fetch the JS files. If you really want it all I can zip it.
  • Tolu Olowu #
    Commented on 01-16-2014 at 10:12 AM
    Already did that. Thanks. :)
  • Oleg #
    Commented on 01-19-2014 at 4:33 AM
    > 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.

    You can try "Angular Light", it is easier than "Angular.js" but it has the same power.
  • steve burch #
    Commented on 02-28-2014 at 2:59 PM
    If you have the zip that would be tremendous.

    Thank you.
  • Commented on 02-28-2014 at 3:02 PM
    Here ya go: https://dl.dropboxusercontent.com/u/88185/ineedit....
  • Anky #
    Commented on 03-11-2014 at 5:41 AM
    Heloo Raymond i am developing mobile app in mvc architecture, using Angular jjs , do you have any demo relate that ? if you have please post me here or on my mail id, Thank You , I am waiting for your kind reply
  • Commented on 03-11-2014 at 5:58 AM
    I haven't built a mobile app yet - but others have. Check out Holly's blog: http://devgirl.org.
  • Anky #
    Commented on 03-11-2014 at 6:00 AM
    oh ok fine i will check out , thanks