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 concat, watch 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.
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
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.
LinksHosting provided by bluehost