<learning class='always'>...

I love development & the goal is to "hopefully" capture my experiences (right, wrong or somewhere in-between) as I go.

Apr 4, 2013

AngularJs - Where To Start?

AngularJs seems to be getting a lot more tweets, posts and samples lately so I thought it might be useful to record the resources I looked at when considering whether or not to invest time in Angular.

Where did I start?

Now sometimes I just jump into something and try building something and learn as I go. I didn't do this with AngularJs for the following reasons:

  • It is a framework more than just a library that does a specific thing so I wanted an idea of what it had to offer before jumping in
  • In my initial search I saw multiple statements along the lines of "long learning curve", "the angular way" etc
  • I quite like KnockoutJs and was thinking about investing time learning Durandal (although the learning curve for Durandal would be a lot less as Knockout forms a part of it. If you use Knockout or if you haven't heard of Durandal it's worth a look). I might do a similar post for Durandal when I get round to investing more time in it but as I've done a fair bit of Knockout I wanted to try something different.

I initially went where I guess everyone does:

The site has documentation and live examples to give you an idea of what it can do. It also shows examples of apps built with Angular (there are some open source ones so you can have a look at how it was put together) and links to the google groups etc.

After that I watched a few videos, read some posts, looked at samples, read a small book and watched twitter for any interesting discussions/links about Angular.

If I was to suggest just one link what would it be?

So you've heard about angular, checked out the main site and want more…..stop searching and go straight to egghead.io This is a site created by John Lindquist @johnlindquist that contains (at this current time) 39 short videos covering a specific part of Angular. You can quickly go through them to get a general idea about Angular and go back to specific videos when you need to double check something.

John also works on the AngularJs plugin for WebStorm which you may want to check out.

Videos to watch

I've already mentioned egghead.io but here are some additional ones I've come across:

  • http://www.youtube.com/user/angularjs - This is the youtube channel for Angular and contains a wide range of videos (so not a specific recommendation although the best practices, binding and directive ones seem good)
  • http://tekpub.com/productions/angular The tekpub videos are well done and still being produced (currently it is up to episode 5 as I write this. I'm up to episode 4. Overall I still prefer egghead.io but for $15 it is worth it (in my opinion) and if you already have a a subscription then you've already paid for it…go there now :) )
  • I believe someone is currently working on an AngularJs course for http://pluralsight.com/ I think it may be Dan Wahlin who has done a number of JavaScript related courses for them
  • codeschool.com currently aren't doing a course for Angular (I really like the way they do their courses and they offer some for free so if you've never done any it is worth checking out). They do have a video in their code tv section http://www.codeschool.com/code_tv/angularjs-part-1 (I haven't seen it as I no longer have a subscription but if you have one it may be worth watching)
  • Dan Wahlin has recently (April 13th 2013) released a 60 minute (slightly over) video covering Angular. It covers a fair bit (except directives apart from a mention) and gives you a good idea of what Angular is capable of. It can be found here: AngularJS Fundamentals in 60-ish Minutes

Books to read

There are only a few Angular specific books out there but this will likely change as the the framework gets more popular:

  • Instant AngularJS Starter - I liked that it was a quick read (I wasn't looking to read a big book at this stage), and it built an application (I didn't try and go through the code samples…there were some reports of a few issues but I think these are being resolved and the code sample updated). It seems to have got mixed reviews on amazon but I enjoyed it as a quick introduction.
  • AngularJs - I've not read this book so I don't have an opinion on it but it is due out in April
  • Recipes with angular - I've not read this one but thought I'd list it for completeness.
  • AngularJs in Action - This one is currently being worked on although you can get early access. I'll likely get this one.

Tools to help when you do start developing

Here are a few tools which you my fine helpful when you start coding away with Angular:

  • Yeoman - Yeoman combines yo (scaffolds out a new application), bower (dependency management) and grunt (build tool with a fair number of plugins) to help you get up and running quickly. Only used it on the Mac and it took a little bit of fiddling to get started but I like the live reload capability and the watch/build & deploy feature (you could do this with grunt on it's own but yeoman gives you an initial starting point).
  • Batarang - If you are building an AngularJs app Batarang is a Chrome plugin that lets you inspect your app (showing you your scopes and performance implications of approach etc)
  • ngmin - ngmin will help you prepare your code for minification (ngmin is an AngularJS application pre-minifier. The goal is ultimately to use this alongside yeoman and grunt to make developing and building Angular apps fast, easy, and fun.). A good example of why you may need this is highlighted in an odetocode.com post: AngularJS - Controllers, Dependencies, and Minification
  • If you use Webstorm then there is a plugin for Angular created by @johnlindquist (which I mentioned earlier)
  • If you use Visual Studio and have resharper then this may interest you https://github.com/JetBrains/resharper-angularjs
  • Karma - The AngularJs test runner (previously called Testacular)

Libraries/Extensions for Angular

  • AngularUI - A number of additional directives and filters that you can add to your project
  • Angular Bootstrap - By the same team as AngularUI. This adds twitter bootstrap support but instead of using the javascript that comes with bootstrap they have directives that aim to do the same but are done in an angular way. If you are a foundation fan then it looks like they have plans to add support for that too but it is still early days: https://github.com/angular-ui/bootstrap/issues/260.
  • ng-grid - a grid directive with examples.
  • ui-router - a new addition (as of March 2013) with the following goal: To evolve the concept of an Angular "Route" into a more general concept of a "State" for managing coarse application UI states
  • There is a website where you can add/find additional modules for your app which you may find useful: http://ngmodules.org/
  • If you use Kendo UI (from Telerik) then there is support for Angular which can be found here http://kendo-labs.github.com/angular-kendo/
  • If you are looking to tie in Angular with a backend datasource (especially if you are using .NET and the Entity Framework) then you may want to check out Breeze : Video and site: http://www.breezejs.com/samples/todo-angular

Where to go for help

I guess the three main places would be:

Source code examples?

  • The Angular site does list a fair number of sites/apps built with Angular (and you can filter to show open source ones as well): http://builtwith.angularjs.org/
  • TodoMvc has an Angular Todo app written in JavaScript & in TypeScript. It also has a todo app using a large number of other frameworks to give you an easy way of comparing Angular against some of the other options out there.
  • TypeScript AngularJs TradeZone Sample - An example showing typescript, angular and a bit of rxjs in action. The project is in VS2012 format.

Blog Posts/Articles etc

Now there are quite a few out there so I'm only going to list a few which contain a fair bit of content or show Angular being used in non typical ways (phonegap, win8 etc).