So you want to learn AngularJS

angular tshirt
Be an Angular Master

I found starting Angular a bit difficult as I’ve come from a jQuery/Javascript Front-end background. I’m no expert even now, but I’ve certainly come a long way since I started. The Angular way is a bit different and just knowing principles of MVC Framework learning curve can be quite steep. My aim for this post is to save you some time and get you to take the leap to start learning AngularJS.

Disclaimer: NO CODE SNIPPETS THIS POST. I couldn’t do justice with these great resources available outlined below.

1. Start with Code School FREE Course

If you are looking for a place to start I recommend Code School’s Angular Course. It’s a fun course that you can follow quite easily. It involves some quirky videos as all codeschool flavoured tutorials do, but I found this such a great place to start.

2. Setup an Angular and Bootstrap project with Yeoman

I only found Yeoman a month ago and it changed my life! Don’t let the Terminal setup put you off. The Yeoman Terminal Wizard structures your app with ease! It goes further to teach you how to do a “to-do app”. If your feeling keen, setup Yeoman project with Bootstrap and follow the Code School Tutorial. You’ll also never have to refresh your Browser with the livereload integration!!!
Hint: To Edit HTML use the main.html (View) and main.js (Controller) – makes Terminal less frightening
I prefer setting up Yeoman with SASS, Compass, Bootstrap Version of SASS. So that I don’t diverge from the original intent of this post…You’ll have to wait for post on why I love SASS/SCSS. It’s also worth mentioning that Yeoman also sets up your project for TDD.

3. Tutorials

John Lindquist’s is also a great place to start Angular JS learning. His site is filled with other tutorials in addition to Angular JS. Tutorials:

4. ng-book

Ng-book …great book to follow: I haven’t finished this book yet but it’s great at explaining how angular works. Once you get more familiar with Angular this book is a great reference. I recommend following this book along with a fresh Yeoman project.
If you want awesome code samples here’s github repo. Here’s the book on Amazon

5. ng-europe conference: October 22nd-23rd, 2014

Not really a physical resource as such, but worth mentioning non-the-less! If you have the opportunity I think this would be an amazing event to sign up for. I wish I was going.

Some Key Concepts to learn…

  • Model-View, View-Model: ng-view, ng-controller
  • scope: $scope, ng-model, two-way-binding
  • routing & templating: $routeProvider, $location
  • built-in filters that come with angular: orderby, date, currency, uppercase, lowercase
  • built-in directives that come with angular: ng-show, ng-hide, ng-repeat, ng-class, ng-click

The future of Angular

This is just a slide that I found while surfing the web. It’s an exciting insight into the future for Angular.

So hopefully this helps you get started with Angular JS! Good luck and Happy Coding. If you can suggest any other resources feel free to comment.