In recent months I’ve been experimenting with different stacks to find my preferred solution for building mobile (hybrid) apps. I’ve been itching to move away from jQuery Mobile for a while to something a little lighter but more structured. AngularJS seemed a perfect fit. It’s an MVC Javascript framework, written and maintained by Google.  Angular not only enforces structure by making you do things “the Angular way” but includes all sorts of niceties such as templating, bidirectional data binding and the ability to extend HTML (which makes DOM manipulations much more structured and modular – Directives, I’m looking at you). It’s heavily test driven, oh and theres no need to include jQuery either.

What it doesn’t provide you with is a CSS framework (which is a good thing – I was never keen on jQuery mobile’s styling or themes). For this I used Topcoat, a performance focused CSS framework. Whilst Topcoat is themeable I stuck to the basic styling for the purposes of my demo app.

I wanted to work with some real, live and sometimes unpredictable data rather than a simple todo app so I decided to use the Zoopla API for this and base my app around simple property searches (as my wife is always looking to move home!). I aim to wrap the app in PhoneGap in the future too and thought PhoneGaps Geolocation API could fit in nicely with my property finder.

One thing to point out is that I am by no means an Angular expert. The main purpose of creating this app was to get a handle on the framework and learn some best practices/common pitfalls. What you see below is the fruits of that labour and has been through various rewrites at different stages. There were also a number of Angular best practices I wanted to cover in the app along with some common functionality expected from a mobile app. These include:

• Directives – Angular’s way of extending HTML and the only place DOM manipulation should occur
• Consuming an API via a custom Angular factory and not multiple $http calls
• Using a custom filter
• Sharing data between scopes and controllers via a service
• Basic show/hide using ng-show
• Page transitions (sliding between views) using ng-class and CSS3 animations

One glaring omission is unit tests. This, despite following Angular’s tutorials, is something I am still getting my head around.

Rather than step you through my code line by line as I have previously, I thought it best to let you grab the code and follow my (hopefully explanatory) comments.

Lessons learnt

I’m a great believer in learning through doing and whilst I still have a lot to learn about AngularJS here’s some short pointers than might help someone just starting with AngularJS.

• Step away from jQuery. Seriously, you don’t need it. Don’t even include it. I found this post pretty enlightening whenever I felt like falling back on my jQuery knowledge.
• Watch your console errors. Angular gives you error specific links in the console taking your straight to offical error docs, this saved me tonnes of time.
• Watch out for scoping issues, $scope tripped me up a few times. If you’re missing data and have no errors, it could be down to scope.
• Avoid using rootScope where possible. I used a custom data sharing service, though on reflection this may have been overkill looking at the last sentance on the official FAQ.
• Install the awesome offical Angular debugging chrome extension Batarang – it really helps visualise data and scope.
• The community is big, Stack overflow is brimming with Angular questions and answers.
• I really need to learn Jasmine and more about Angular’s e2e testing. Angular is big on testing (and rightly so).