Menu

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:

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

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

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

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

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

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:

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

  1. Apply this style guide as-is in your Angular projects.
  2. Tweak it (i.e. fork it and then modify it) so that it lines up with your personal style and philosophies.
  3. Look for an alternative style guide, such as Angular 1.x styleguide by well-respected developer and Google Developer expert, Todd Motto.
  4. 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

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.

 

What other learning resources and tips can you offer people who want to learn Angular? Please leave a comment below!

Related Content

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

This was published on Aug 27, 2016

8 Comments

Mike D. Aug 28 2016

At this point, it’s more adviceable for people who don’t know Angular to start with Vue.js to get the basics, and move on to harder to learn JavaScript libraries (React) once they master Vue.js

    Isn’t more time consuming? Why spend it in Vue.js if newbies can start by learning the basic AngularJS.

    Alexandre Sep 24 2016

    Vue is easier, less demanding, progressive (you don’t need to go full stack if you don’t want or don’t need to), faster, more enjoyable etc.

    One can argue about community, but I’ll bet with anyone that in a few months or years, Vue will take over. Mark my words. ;)

Aurelien Aug 28 2016

thanks for all the resources. The Net Ninja on Youtube also offers a complete tutorial on Angular 1 and 2
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gsJS5QgFT2IvWIX78dV3_v

Thank you very much for posting this, Jacob.

After dragging my feet for a long time, this morning I started Net Ninja’s Angular 2 tutorial but wondered if learning v1 first would be a better.

By a stroke of luck I stumbled across this article during a break and have decided to hold off on v2 for now and will follow Mike’s advice and start with Vue.js in order to get a better grasp of the basics of JS templating before moving on to Angular or React.

Many thanks, guys!

-Jeff

vignesh Sep 10 2016

thank you for your guidnces

In case anyone is interested, the final release version of Angular 2 is now live:

https://angularjs.blogspot.com/2016/09/angular2-final.html

Write a Comment

All fields are required.

Partners