After learning and building a few projects in AngularJS, I’ve distilled my experience into these 7 ways to be successful with your AngularJS project.

1) Use Grunt

Yes I know this is a blog about AngularJS and my first point is about another tool, but I feel it’s that important.  Grunt is a great tool for your AngularJS app providing a number of incredibly useful tools that can be configured in a matter of minutes.  One of Grunt’s great strengths is the ability to be productive immediately while still being extensible and flexible enough to support large and complex projects.

The key grunt tasks are concatwatch with livereload enabled and grunt karma (more on this later). Setting up watch with livereload makes development ridiculously fast, make a change in your editor, save, bam! browser is reloaded and you’ve run your tests.

 The description here is for a development setup, there are additional considerations when building your app for production (things like minification, image optimization etc.) I highly recommend this blog by Alex Sexton for an enlightening discussion on front end deployments.

In development I like to have my concat task configured to produce 2 files, a vendor file that concatenates all of my third party JavaScript into a single file. The other task concatenates all of my javascript files into a single file.  As the project grows you might need more segmentation to reduce file size, but this strategy will get you a long way.

grunt karma provides a very nice wrapper around the karma test runner for running your unit tests.  After all, you said one of the reasons you chose AngularJS was for the incredible testing story right?  Don’t put it off, get karma configured from the start and have it run your tests with vengeance.

I didn’t mention the yeoman angular generator, which spits out a grunt file.  I think it’s a great project and have used it a number of times; however, there’s a steep learning curve in many of the additional features that it enables.  Most of which are awesome and should really come into your production deployments, however it can get in the way of a newer Angular user.

2) Write Your Tests from Day 1.

I don’t care if I sound like a broken record or nagging parent, your app needs tests.  While it’s not impossible to go back and add tests later, it’s pretty close to it.  With Karma and grunt configured all the heavy lifting is done, now write your unit tests.  There is really no reason for you to not be testing your services, factories, filters and controllers, directives can be a bit trickier but where there’s a will there’s a way.  Check out this great blog from year of moo on advanced testing.


3) Don’t Fight the Patterns.

Angular is very well thought out and designed, chances are if you really feel like something is missing or awkward you’re running off the rails.  This isn’t to say that the framework or its creators are infallible, but the vast majority of the time when I start to think something is especially hard or convoluted I take a step back, look at the docs again, go to Stack Overflow and find the prescribed way to accomplish my task. Typically resulting in me deleting a bunch of wonky code. Some examples that come to mind,

accessing the DOM in your controllers

doing too much in your controllers

not using angular provider wrappers like $log, $window

polluting the $rootScope

using route controllers, there’s very rarely a case for these and have had so many strange bugs as a result, simply define the controllers in your partials.

4) Try to create your app without jQuery

AngularJS ships with jqLite, containing everything you really need.  Not having jQuery means you don’t have that familiar crutch to fall back on and get un-Angular.  This is in no way a knock on jQuery, it’s arguably the best JavaScript library ever written, however Angular apps are not jQuery apps.  Neither is this a bare chested fist pounding act of I’m so manly I can write it all myself idea. You’ll notice that jqLite doesn’t contain the ability to use id or class selectors, this might make you cry the first time you try it, but trust me, it’s for the best.  The only thing I can say I really wish they would have included from jQuery is conversion to post data.

5) Use Filters

 There are a ton of top notch filters provided by AngularJS, date, currency and json (for debugging)  are on the top of the list.  However it’s so easy to create your own, you really should.  Filters are really useful, easy to test and are a great resource to share across projects.

6) Avoid function calls for property checks

Having the ability to call a function to show or hide an element in the UI is an incredibly powerful abstraction, however it can create performance problems as you write more complicated functions or the amount of bindings grow. Unlike with properties (that Angular can watch and very efficiently digest), your function will get called on each digest cycle.  Throw in a $log,info() statement into your function and marvel at how frequently it gets called.  So what’s the alternative?  Use $watch on a variable and use a listener function to update state.

7) Embrace Promises

AngularJS ships with a slimmed down version of Q called $q.  Promises are a wonderful abstraction that should be embraced in their own right, Angular uses promises throughout the framework.  If you are familiar with jQuery promises, not the old really bad implementation, but the new, very good implementation that landed in jQuery 1.8 you’ll have a bit of relearning to do as $q’s promises are a bit different, but nothing you can’t pick up with a little experimenting.


3 Responses to 7 Ways to be Successful with AngularJS

  1. nbaleli says:

    Thanks for the post!
    consider putting a google-plus ‘+1′ button aswell in the social buttons?


  2. Dmitri says:

    Any chance for an example to 6)?


    • says:

      Sure. Say you have some logic to determine if you should display a div in your app. The logic might be something like, if the page is initialized, and there are more than 500 entries, and the user has the pagination preference set, display the div. You could have ng-show=”callFunction()” do all that logic, but it will get peppered with calls during digests. Instead you could maintain a var shouldShowDiv and use $watch to update the view when that value changes.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>