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
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.
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
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
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.
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
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
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
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.
Source:
Author: William Craig
Website: webfx.com
