Categories

JavaScriptAngularJS

Learning AngularJS through a real project

Last published on May 12, 2014 by Marcos Iglesias

I have some Backbone.js 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

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.

Learning

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:

Books

The best part of the TutsPlus subscription for me are the books, I love them. Regarding AngularJS I had this titles available:

Articles

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:

Videos

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:

Tools

Today's web development workflow is mostly about tools, here are some quite useful ones:

Support

And when you get stucked, this links could help you a bit:

Courses

I really love this posts about learning something on X hours or Y days, specially those on JavascriptIsSexy. I think I like them because the trend to structure your learning, and also usually introduce the technology with several types of contents. This time I didn't use this approach, but this resources were interesting though:

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.

Next steps

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?