I have some Backbone experience, and I enjoyed it, specially with the composite applications possible using Marionette. However, the current trend regarding client-side MV* frameworks use is clearly favorable to Angular JS. I have seen it validated by the amount of proposals for web applications based on Angular that I am receiving lately, so I needed to learn it, and in this post I will talk about how I tackle it.
The project I had to work with is the alpha version of seed.io, a notes taking application which main value proposition is to organize your notes semantically based on a set of tags that you can add to them. It has some similarities with Twitter's hash tags, but with some ambitious plans to improve the way users keep and share its notes.
I recently got this promotion from New Relic offering a whole year of Tutsplus just for doing nothing, and I wanted to make the most of it so I could asses if it is worth the money for me. That's why my resource selection is kind of biased towards using their material. I also kept a "Waiting Projects" folder on my bookmarks with some projects/libraries that I am waiting to have time for them, so I got a lot of resources from weekly newsletters ready to classify. After update them and put some order, here are some of the resources that I felt more useful:
The best part of the TutsPlus subscription for me are the books, I love them. Regarding AngularJS I had this titles available:
- Instant Angular JS Start - Short and easy
- AngularJS Directives - Focused on directives
- Mastering Web Application Development with Angular JS - More in depth analysis with a focus on TDD
- Dependency Injection with Angular JS - Not yet reviewed
A simple search on AngularJS articles in Google will report a great deal of content, but I always prefer to have someone filtering that resources, these are some of them:
- ng-newsletter - Weekly newsletter about AngularJS
- Data binding - Some help dealing with $apply and $digest
- Refactoring to angular directive - Nice walkthrough about the way of dealing with components the Angular way
- Things I Whish Were Told about AngularJS - Best practices
I have found that although video content are nice when I am tired of coding, they keep a slower pace of learning than I would like to keep. These are the ones I watched:
- AngularJS Fundamentals in 60-ish Minutes - The most popular introductory video on Youtube
- Hands-on Angular - Nice Tutsplus walkthrough focused more on the tooling [paid]
- Egghead.io - Small screencasts of AngularJS
- Ian Phillips - Functional JS with Angular - A great introduction with some history
- AngularJS Directive - DSL in Your HTML - Another intro
Today's web development workflow is mostly about tools, here are some quite useful ones:
And when you get stucked, this links could help you a bit:
- Learn AngularJS this Weekend
- Ultimate guide to learning AngularJS in one day
- AngularJS for jQuery Developers
Applied to the project
The code I inherited was kind of messy and complicated, with a custom Angular directive of around 800 lines long. This was for the main component of the app, the note taking input field, based on HTML5's contenteditable property. Also, no test so far for the project.
My focus at first was to get a general overview of the framework's mindset, so I started by reading the Instant Angular JS Starter book, along with some introductory videos and articles. Then I jumped into custom directives, as most of my early work on the project was regarding the note input directive. I started adding features at the same time I refactored the directive, extracting a couple of child directives, and failing to extract another one that it was simply too coupled.
I kept on going back to the AngularJS-learing github repository, looking forward consolidating concepts about data-binding, scopes, compile and link functions, etc.
This week I plan to finish reading Mastering Web Application Development with Angular JS and maybe start reading the Dependency Injection book. I would also love to read all the articles on the resources list, maybe it will be too much, but I am sure I will learn a lot of stuff!
And you? Do you know AngularJS? Do you think I could have done it better? Any link you want to share?