Back to Marketing Manager Insider

we're hiring!

888-601-5359 RESULTS SEO & LEAD GENERATION CONTENT & ANALYTICS

CREATIVE & UX WHO WE ARE LEARN CONTACT

WEB DESIGN

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, Im 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.

Thats 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 apps various pieces
A big, thriving community of developers and organizations who love Angular
Clean separation of the apps UI from its logic, while still keeping them in
sync
Two-way data-binding its 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 thats just the tip of the iceberg!

Should you decide to learn Angular, youll 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.

Im 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? Lets get started!

First, You Need to Know JavaScript
Using Angular effectively requires that you understand the fundamentals of
JavaScript.

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

I dont recommend learning Angular without at least a basic understanding of

JavaScript. The task will be, to put it mildly, 100x tougher if you dont know
JavaScript.

Other web development frameworks are a little more forgiving towards people
who dont have a solid understanding of JavaScript. For example, jQuery conceals
some of the more complicated JavaScript concepts from its users. Now, this isnt
a bad thing, its 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 doesnt shy away from
JavaScripts 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:

A Roadmap to Learning JavaScript for Free

10 Free JavaScript Books
Interactive JavaScript Tutorials

Heres 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

Heres a five-step process for learning Angular using free, online resources.

Ive 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 birds-eye view of
the thing Im 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 its 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,
youll 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, youll learn about some of Angulars 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 well discuss later) is
extremely detailed and thorough. For me, the problem with the official docs is its
incredibly dry and intimidating. Its especially uninviting to individuals like me who
dont have a formal academic background in computer science.

I understand the Angular teams 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, youll learn about the vital Angular concepts: Controllers,
Directives, Services, scope, dependency injection, and so forth. This book is
interactive as youre reading the book, youre prompted to play around with the
code examples which makes it a fun and engaging read.
This online book wont 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
Angulars 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, youll be well on your way to
developing Angular apps.

Nothing beats the official Angular documentation in terms of completeness. In my

opinion, you simply cant learn Angular properly without spending time in the
official docs.

In the PhoneCat Tutorial App, you will be creating a smartphone directory app.
Youll 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 apps 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, youll 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 Angulars foundational concepts, features,

and terminologies.

At this point, you should now be well-equipped with Angular knowledge. Its 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 Angulars 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 guides daunting demeanor. But after the previous steps,
you should now be more confident tackling this guide.

In this guide, youll 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 its maintainable and testable.

We can learn a lot by reading coding style guides, even if we dont 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 its 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 JavaScripts 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, its important to have a set of
best practices that help guide the way towards the projects completion and
promote high-quality code-writing. Otherwise, your Angular apps will quickly get
messy and hard to maintain.

If youve managed to go through the roadmap, congratulations are in order

because youre now well-equipped with the knowledge you need to build Angular
apps!
In the next sections, Ill 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. Dont 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 Ericssons 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 2s
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, Id 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 thats
(in a fairly mature) beta stage of its life cycle, Angular 2 has many new features
that makes it compelling to use today.

Were 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 youre ready.

Above and Beyond: More Angular Learning Resources

Here are other excellent Angular resources. Theyll 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 Thinksters 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 Angulars 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.

What other learning resources and tips can you offer people who want to learn
Angular? Please leave a comment below!
Related Content
The Big Changes to Pay Attention to in AngularJS 1.3
Grunt vs Gulp: Which One Should You Use?
Bower Beginners Guide

Jacob Gube is the founder of Six Revisions. Hes a front-end developer.

Connect with him on Twitter and Facebook.

by Six Revisions on August 27, 2016

GET POSTS BY EMAIL

Be the first to know when we publish a new blog post!

Send me new posts each day

TO THIS EMAIL ADDRESS GET UPDATES

1 Comment WebpageFX Blog
1 Login

Sort by Best
Recommend 23
Share

Join the discussion

LOG IN WITH

OR SIGN UP WITH DISQUS ?

Name

Cudest Web Design 2 months ago

Nice Article.. Very Well Explained Each Topic in Depth.. Thanks For Sharing..
Reply Share

9 Tips for Repurposing Content to 8 Ways to Increase Employee

SOCIAL WEB WEBPAGEFX

MARKETING SEARCH INTERNET
MEDIA DESIGN NEWS

HOME ABOUT US

PPC WEB DESIGN

WEBSITE PRICING MAGENTO

SEO COST MOBILE

SEO ADVERTISING COST

PORTFOLIO CONTACT

FREE QUOTE

Copyright 2002-2017

Call Toll Free: 888.449.3239