A Guide To Learning Angular 2
This article presents a list of various resources that I found particularly helpful with learning Angular 2. If you’re starting to learn Angular 2 yourself, you can view this article as a guide to help direct your own studies.
I’ll break this article into the following topics: new language features (ES6), Typescript, Tooling, Angular 2, and Functional Reactive Programming. For each topic, I’ll provide a brief explanation and links to resources that I found helpful.
I would also recommend the book “Exploring ES6” by Dr. Axel Rauschmayer.
Just as ES6 is a superset of ES5, Typescript is a superset of ES6. Knowledge of Typescript isn’t required to use Angular 2, but it is highly recommended. Angular 2 itself is written in Typescript, as are most learning materials. Once you have a good understanding of ES6, learning Typescript should be pretty easy. I view it mostly as syntactical sugar that adds static typing capabilities to the language. The docs on the Typescript site should be good enough to get you up to speed with it.
The Angular 2 site is the first place I’d go to get started learning the Angular 2 framework. The documentation seems soooo much better than I remember the Angular 1 docs being at first. Another awesome resource, especially for visual learners, is the free Angular 2 Fundamentals course taught by Scott Moss. Finally, I highly recommend the book ng-book-2.
When I stepped away from Angular development in 2015, I was using Grunt or Gulp as build tools. These days, it seems that SystemJS and/or Webpack are the favored “build” tools for Angular 2. My only exposure to SystemJS is via a few Angular 2 tutorials, so I don’t have any recommended resources for learning about that. I’m much more familiar with Webpack. There is a good list of tutorials on the Webpack site. The one I found most helpful was Webpack your bags by Maxime Fabre. The Angular2-webpack-starter project by AngularClass is also a fantastic- it demonstrates a working non-trivial configuration of an Angular 2 app with Webpack.
Functional Reactive Programming
As I played with Angular 2, I inevitably bumped into to the RxJS library and, not being familiar with functional or reactive programming, I wondered what it was all about. I’d seen the terms “reactive programming” and “functional reactive programming” here and there (mostly in marketing emails from book publishers). Maybe I could still build some cool stuff with Angular 2 without being familiar with reactive programming (and RxJS), but it seemed like I was missing something fundamental. I decided to dig into it. Besides, Functional Programming had been my list of the things to learn for a long time anyway, and the two concepts (functional and reactive) seemed to have some relationship. That became quite a deep rabbit hole to go down.
Functional, Reactive, and Functional Reactive Programming (FRP) are worthwhile skills to acquire. Obviously, they are not limited to front-end web development. We can use these concepts to improve our code in any realm of development. For example, If you’re into iOS development, check out the Swift Functional Programming Tutorial by Colin Eberhardt, and Reactive Programming in the Netflix API with RxJava by Ben Christiansen and Jafar Husain. Finally, another interesting book on this topic (which I’m currently reading) is Functional Reactive Programming by Stephen Blackheath and Anthony Jones.
Here’s a list the links to all the resources I recommended:
- ES6 In Depth
- Exploring ES6 book
- Angular 2 docs
- Angular 2 Fundamentals Course by Scott Moss
- ng-book 2
- Webpack tutorials
- Webpack your bags article
- Reactive Programming with RxJS book
- The introduction to Reactive Programming you’ve been missing
- RxJS 4 full documentation
I know, there’s a lot to learn, but I’m sure you’ll find that these are transferable skills. That is, there’s not much here that is really specific to Angular 2. In fact, I don’t think Angular 2 itself really all that complicated – especially compared with Angular 1 (of course, I haven’t worked with it very much yet, so it may be too soon to tell). Hopefully this article helps you get proficient with Angular 2 quickly. And if you know of other awesome resources, please leave a comment to let me know about them.