Twitter: raymondcamden


Address: Lafayette, LA, USA

AngularJS Doesn't Suck!

01-14-2014 6,225 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

  • 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

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty