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 :) )
- 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
- 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/
- 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).
- Full-Spectrum Testing with AngularJS and Testacular - Note Testacular is now called Karma
- Building Huuuuuge Apps with AngularJS
- Maintainable Rich Web Applications with AngularJS
- Building PhoneGap Apps with AngularJS
- What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
- Building Windows 8 Applications with AngularJS aka Oh Yes I Did!
- The "Magic" behind AngularJS Dependency Injection
- Fun with AngularJs
- AngularJS and scope.$apply
- AngularJS Directives - Domain-Specific Extensions to HTML
- The Two Minute Guide to AngularJS for .NET Developers
- Building & Testing Directives - a link to a pdf of a presentation on the subject
- Appliness February Edition - This is available in the App Store but you can also download pdfs of each edition (I've linked to the Feb 2013 edition which includes an interview of Misko Hevery (who created Angular) as well as two articles about Angular (one of them is Building Huge Apps which is mentioned above). Appliness is a nice monthly magazine from Adobe so worth checking out if you don't already read it.
- Angular Cheat Sheet
- Notes On AngularJS Scope Life-Cycle
- Animation In AngularJs - With release 1.14 support for animation is now built into Angular. See this article to find out more, play with the demo or watch the usergroup video on youtube where a demonstration is given.
- Introduction To AngularJs Presentation with code
Hopefully this will help you decide if you want to invest the time getting to learn Angular and if you do I hope it helps you on your way. As for myself I've decided to invest the time to learn it. I still expect to hit learning curves as I go but from the look of it I think it will be worthwhile.