Mr Branding: How to Learn Angular

Saturday, August 27, 2016

How to Learn Angular

AngularJS (commonly known as Angular) is an exceptionally powerful front-end development framework for building sophisticated JavaScript apps. Though learning Angular will be immensely rewarding, I’m certain many prospective initiates to Angular have had their desires of Angular mastery nipped in the bud due to the terrifyingly intimidating and complicated Angular documentation.

That’s a shame, because Angular has so much to offer:

Modularity that allows a team of developers to work on specific parts of an app concurrently
Testability and maintainability of your app’s various pieces
A big, thriving community of developers and organizations who love Angular
Clean separation of the app’s UI from its logic, while still keeping them in sync
Two-way data-binding — it’s pure magic (or sorcery?) — that updates the UI whenever a model changes (and vice versa)
Useful out-of-the-box (as well as third-party-developed) modules such as Filters and Services that take the complexity out of stuff like data-processing, templating of UIs, dealing with HTTP requests, sanitizing and validating user inputs, animation, and (much, much) more

And that’s just the tip of the iceberg!

Should you decide to learn Angular, you’ll be endowed with the skills required to develop cross-platform apps, and your newfound superpowers will prove to be valuable and profitable for years to come.

What follows is a guide (I call it a roadmap) designed to help you learn Angular effectively. My goal with this roadmap was to chart a carefully-crafted curriculum of free online resources that gently introduces you to the world of Angular. I wanted to create a self-learning guide that will motivate you to continue to pursue higher levels of Angular expertise.

After completing this learning guide, you can look forward to having a proficient-level understanding of Angular and the ability to use it to build JavaScript applications.

I’m not going to mince words, learning Angular will be hard work. Expect to encounter many roadblocks during this arduous undertaking. But I encourage you to stick with it. Your efforts and hard-earned battle scars will be worth it because Angular will ingrain so much value into your work and your repertoire of development skills.

Are you ready? Let’s get started!

First, You Need to Know JavaScript

Using Angular effectively requires that you understand the fundamentals of JavaScript.

What’s more, the value you derive from Angular will be proportional to how adept you are at JavaScript.

I don’t recommend learning Angular without at least a basic understanding of JavaScript. The task will be, to put it mildly, 100x tougher if you don’t know JavaScript.

Other web development frameworks are a little more forgiving towards people who don’t have a solid understanding of JavaScript. For example, jQuery conceals some of the more complicated JavaScript concepts from its users. Now, this isn’t a bad thing, it’s actually excellent for many developers and certain types of development projects.

(To further underscore my preceding argument, jQuery was built using the Facade software design pattern, defined by the renowned JavaScript developer and Google engineer Addy Osmani in his book as a design pattern that "provides a convenient higher-level interface to a larger body of code, hiding its true underlying complexity.")

Angular, in contrast, exposes the powerfully potent and elegant — but often hard-to-understand/misused — features of JavaScript. Angular doesn’t shy away from JavaScript’s complexities; it embraces them and pushes them to their limits.

If you need to learn or brush up on JavaScript, start with these articles first:

Here’s the silver lining. Reflecting back on my own journey into the world of Angular, I can confidently say that it has helped me become a better JavaScript programmer. Using Angular has encouraged me to further my understanding of advanced JavaScript concepts, techniques, and design patterns.

Without further ado, what follows is my roadmap towards learning Angular.

A Roadmap to Learning Angular

Here’s a five-step process for learning Angular using free, online resources.

I’ve used these resources to gain a competent-level understanding of Angular. I admit that I still have a long way to go, but these resources have helped me get started on the right track.

If you want, you can begin with the resources that you personally find interesting. However, keep in mind that I intentionally structured this guide with the goal of helping you gently get on your way with Angular. Use the wrong resource at the wrong time, and you might get discouraged from continuing to explore Angular.

Step 1: Shaping up with Angular.js

Goal: To get a gentle, hands-on introduction to the world of Angular.

Whenever I try to learn something, my initial objective is to get a bird’s-eye view of the thing I’m trying to learn, and to get hands-on with it as fast as possible. I want to avoid as much set-up and configuration as I can. There are two reasons for this objective. The first is so I can decide right off the bat whether it’s something I see as being a potentially worthwhile skill to acquire, without putting in too much time into it. The second reason is getting up and running quickly often makes the task more engaging, fun, and motivating.

Shaping up with Angular.js — a free Code School video course sponsored by Google, the developer and maintainer of the Angular — fits the bill.

This online course is a well-structured and efficient intro to Angular. In this course, you’ll be building a simple Angular app. There are coding challenges interspersed throughout the course to help you review the key concepts being discussed. As you develop the app, you’ll learn about some of Angular’s powerful features, such as Directives, two-way data-binding, Services, and so forth.

Step 2: Angular Basics by ScriptyBooks

Goal: To learn about the main Angular concepts and features.

The official AngularJS tutorials and documentation (which we’ll discuss later) is extremely detailed and thorough. For me, the problem with the official docs is it’s incredibly dry and intimidating. It’s especially uninviting to individuals like me who don’t have a formal academic background in computer science.

I understand the Angular team’s need to be detailed and thorough in the documentation of their project. By being comprehensive and technical with their docs, they sidestep ambiguity issues and allow its users to find all the information they need.

But for most people, my view is that learning Angular must start with third-party content. There are other learning resources out there besides the AngularJS docs that are more approachable for newcomers.

The free online book Angular Basics is one such learning resource.

Chris Smith, the author of the book, perfectly describes my initial experience trying to learn Angular via the AngularJS docs:

"[A]fter digging into the [Angular] API and its documentation, I found my progress blocked by an unfamiliar vocabulary that included terms like transclusion, directive, and isolate scope. As I read through the official documentation and tutorial, the prospect of easy mastery seemed to retreat into a fog."Angular Basics – Introduction chapter

In Angular Basics, you’ll learn about the vital Angular concepts: Controllers, Directives, Services, scope, dependency injection, and so forth. This book is interactive — as you’re reading the book, you’re prompted to play around with the code examples — which makes it a fun and engaging read.

This online book won’t go over every single Angular feature. The author instead capitulates his book to the Pareto principle: "To give you access to a large part of Angular’s power, while burdening you with only [a] small part of its complexity."

The next three steps will deal with completeness and Angular best practices.

Step 3: AngularJS PhoneCat Tutorial App

Goal: To learn how to build apps the Angular way.

After the two Angular-learning resources above, you’ll be well on your way to developing Angular apps.

Nothing beats the official Angular documentation in terms of completeness. In my opinion, you simply can’t learn Angular properly without spending time in the official docs.

In the PhoneCat Tutorial App, you will be creating a smartphone directory app. You’ll learn intermediate- and advanced-level Angular concepts such as unit-testing, E2E tests, how to organize your app files and directories, templating, best practices for modularizing your app’s code, and more.

Take your time with this tutorial. Resist the urge to jump ahead whenever you reach a roadblock. (I encountered many of them when I went through this tutorial.) By persevering through the hard parts of this tutorial, you’ll guarantee yourself true Angular understanding.

The writer/s of the PhoneCat tutorial app says that you "can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day really digging into it." For me, it took a week to finish, putting in two hours of focused learning each day.

Step 4: AngularJS Developer Guide

Goal: To gain a deep understanding of Angular’s foundational concepts, features, and terminologies.

At this point, you should now be well-equipped with Angular knowledge. It’s now time to dig deeper into the details. The official AngularJS Developer Guide is your next stop.

The AngularJS Developer Guide will dive into the nitty-gritty of Angular’s features and capabilities. Many AngularJS newcomers probably started with this guide (or the PhoneCat tutorial) and it might have dissuaded them from continuing to learn Angular because of the guide’s daunting demeanor. But after the previous steps, you should now be more confident tackling this guide.

In this guide, you’ll learn (or be pointed towards) all the stuff you need to know about Angular. The guide covers things like Providers, Decorators, interpolation, security, accessibility, running Angular in production, etc.

My advice with this guide parrots the one I gave you for the PhoneCat tutorial: Take it slow and easy. Resist the urge to skip sections.

Step 5: Angular Style Guide by John Papa

Goal: To learn Angular best practices such as how to write, organize, and structure your code so that it’s maintainable and testable.

We can learn a lot by reading coding style guides, even if we don’t end up using them in our projects. A style guide is an opinionated documentation of guidelines and best practices for producing readable, high-quality code.

There are several excellent Angular style guides out there, but this one is worth highlighting because it’s endorsed by the Angular team.

This Angular style guide was reviewed by Igor Minar, the team lead of Angular and a software engineer at Google.

The Angular Style Guide espouses an extensive range of Angular (and JavaScript) best practices such as:

Single responsibility of your components
Using IIFEs to modularize your JavaScript’s scope
How to write your directives, controllers, modules, services, etc. in a readable, testable, and maintainable way
Suggested naming conventions
How to comment your code
Settings for JS Hint (a popular code-quality checker) to work effectively with Angular

After reading this style guide, I suggest choosing one of the following four courses of action:

Apply this style guide as-is in your Angular projects.
Tweak it (i.e. fork it and then modify it) so that it lines up with your personal style and philosophies.
Look for an alternative style guide, such as Angular 1.x styleguide by well-respected developer and Google Developer expert, Todd Motto.
Create your own Angular style guide.

In any event, before working on a major Angular app, it’s important to have a set of best practices that help guide the way towards the project’s completion and promote high-quality code-writing. Otherwise, your Angular apps will quickly get messy and hard to maintain.

If you’ve managed to go through the roadmap, congratulations are in order because you’re now well-equipped with the knowledge you need to build Angular apps!

In the next sections, I’ll talk about some general learning strategies, the next generation of AngularJS (Angular 2), and more excellent Angular learning resources.

Effective Learning Strategies

Take your time. Some of the resources above will tell you an estimate of how long it will take you to complete it. Don’t be pressured by these estimates. Take as much time as you need, because we all have different ways of learning. In my experience, it almost always took me twice as long to finish them compared to the suggested completion times.
Set aside time for distraction-free learning. To master something requires deliberate practice. Deliberate practice is a learning method conceptualized by psychologist K. Anders Ericsson during his research on elite performers. The results of Ericsson’s studies on deliberate practice suggest that maximum performance during a learning/training session can only be sustained for 1 hour. Consider setting aside several one-hour sessions of intense, focused learning per day, with sufficient rest periods in between the one-hour sessions.

What About Angular 2?

At the time of writing, Angular 2 is still in beta (release candidate stage). According to Is Angular 2 Ready? — a project that keeps track of Angular 2’s GitHub milestones — Angular 2 Final is only 38% complete.

This guide is for learning AngularJS 1. I know many people reading this will want to know if they should wait to learn Angular until Angular 2 is finalized.

First, I’d like to make it clear that you can use Angular 2 today, depending on your technology-adoption philosophy. If you feel comfortable relying on software that’s (in a fairly mature) beta stage of its life cycle, Angular 2 has many new features that makes it compelling to use today.

We’re in an awkward point in time where Angular 2 is developing quite rapidly. My view is that learning AngularJS 1 now will allow you to confidently use a stable, mature Angular version in your existing projects today, and will make it easier for you to move on to Angular 2 when you’re ready.

Above and Beyond: More Angular Learning Resources

Here are other excellent Angular resources. They’ll prove themselves useful throughout your journey towards Angular enlightenment.

Angular 1.x Lessons by egghead.io
Learn about specific Angular topics such as using Gulp with Angular, and data-modeling with Angular in this high-quality set of video courses.
Thinkster AngularJS Tutorials and Courses
Learn Angular-related subjects such as how to integrate Angular into your Rails projects by checking out Thinkster’s lineup of excellent online tutorials and courses.
Made with Angular
See real-world examples of Angular apps created by major companies and organizations such as Amazon, PayPal, and Apple.
AngularJS API Reference
Find detailed, definitive information on specific Angular features via the official API documentation.
DevDocs Angular.js documentation
This is an alternative third-party user interface for Angular’s API docs.
ng-newsletter
Subscribe to this newsletter to get notified of must-read Angular content.
AngularJS-Learning
Find a massive amount of Angular tutorials, books, videos, articles, and other resources in this GitHub repo created and maintained by Jeff Cunningham.