Introduction

Congratulations on taking the plunge!

This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Our desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them.

This course is accompanied by AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN.

The learning curve of AngularJS can be described as a hockey stick. Getting started with apps featuring basic functionality is delightfully easy. However, building more complex apps often require understanding Angular's inner workings. Failure to do so will cause development to become awkward and cumbersome.

With AngularJS, the "Ready, Fire, Aim" learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. This curriculum is designed to properly guide you through each of the key Angular concepts thoroughly with a broad exposure to high quality content. With your eventual mastery of AngularJS, you will be able to fluently and efficiently construct large-scale applications.

Prerequisites

Resources

Since AngularJS is still in its infancy relative to other JavaScript frameworks, the number of encyclopaedic resources on it is still insufficient. Therefore, the curriculum will employ a healthy number of excellent blogs in order to offer a more meaty perspective on respective topics.

Part 1. Kicking the Tires

AngularJS is not a library.

Rather, it is a JavaScript framework that embraces extending HTML into a more expressive and readable format. It allows you to decorate your HTML with special markup that synchronizes with your JavaScript leaving you to write your application logic instead of manually updating views. Whether you're looking to augment existing JavaScript applications or harness the full power of the framework to create rich and interactive SPA's, Angular can help you write cleaner and more efficient code.

Filling the Tank

We've found that the egghead.io videos are the best starting resource available, so every chapter will lead off with them. The transcribed screencasts and source code are provided along with the videos. We encourage you to follow along with them, as they make the video content much more readily digestible.

As good as the egghead videos are, they should serve only as an introductory resource. Excerpts from the O'Reilly AngularJS book and the angularjs.org documentation complement the videos as the broader and more thorough source, and should be treated as the main reference for the course.

Adjusting Your Mirrors

When descending upon an entirely new topic, it is important to frame the topic correctly before diving into the minutia.

Read the following two entries in the AngularJS guide docs, they will give you a good idea of what you're about to get into. Don't worry about picking up on every aspect of the topics they glaze over, all of these will be covered thoroughly in subsequent lessons.

AngularJS Overview Introduction to AngularJS

Revving the Engine

Before we get on with it, we recommend this post:

Things I Wish I Were Told About Angular.js

It goes over a handful of topics that might be helpful in building the appropriate mental models while consuming the Angular curriculum. Some, probably most, of the terms will bounce right off you until you have gone through that section of the course, but it should provide valuable context when approaching a new topic.

Now it's off to the races!

Part 2: Taking It for a Spin

One of the awesome things about AngularJS is its usability right out of the box. Very little information about how the framework operates is needed to get up and running with your first application. With that in mind, go ahead and tear through the first five egghead videos:

AngularJS - Binding AngularJS - Controllers AngularJS - The Dot AngularJS - Sharing Data Between Controllers AngularJS - Defining a Method on the Scope

Readings

We're going to crack the cover of AngularJS for the first time.

Read all of Chapter 1. Introduction to Angular JS Read from the beginning of Chapter 2. Anatomy of an AngularJS Application to the section "Templates and Data Binding"

AngularJS Documentation

The following set of guides will serve to reinforce many of the topics just covered, and explain some new ones in detail:

Bootstrap Expressions Forms Data Binding In Angular

Part 3: Filters

Filters are a simple but powerful tool in Angular, used primarily to format expressions in bindings in views and templates.

These three egghead videos serve to cover the basics nicely:

AngularJS - Filters AngularJS - ngFilter AngularJS - Built-In Filters

Readings

In Chapter 2: "Anatomy of an AngularJS Application", read the section "Formatting Data with Filters"

AngularJS Documentation

Finally, the Angular guides offer a bit more depth on filters:

Angular Filters

Part 4. Directives

Now you're really getting into the meat of what makes Angular special. Directives are certainly one of the most important facets of the framework, and as such, this is one of the biggest sections of the course. The egghead videos do a superb job covering many of the features and use cases of directives:

AngularJS - First Directive AngularJS - Directive Restrictions AngularJS - Basic Behaviors AngularJS - Useful Behaviors AngularJS - Directives Talking to Controllers AngularJS - Directive to Directive Communication AngularJS - Transclusion Basics AngularJS - Components and Containers AngularJS - Directive Communication

Readings

There's a lot to digest in those videos, the text will help to clarify:

Chapter 6: Directives - Read from the beginning of the chapter up to and including: In the section "API Overview": Subsection, "Compile and Link Functions" Also, in section "API Overview": Read subsection "Controllers"

AngularJS Documentation

To wrap up, the Angular guides offer a bit more detail on the specifics of some aspects of directives:

HTML Compiler Directives

Part 5: Scope

Interestingly, scopes are dramatically underrepresented in mainstream Angular resources compared to how important they are. A solid understanding of scope mechanics is essential when scaling applications, as well as writing modular and testable code. Fortunately, the egghead videos do it justice:

AngularJS - Understanding Isolate Scope AngularJS - Isolate Scope "@" AngularJS - Isolate Scope "=" AngularJS - Isolate Scope "&" AngularJS - Isolate Scope Review

Readings

Chapter 6: Directives - In the section "API Overview": Read subsection "Scopes"

AngularJS Documentation

Finally, check out the Angular docs for an in-depth analysis:

Scopes

Part 6: Application Structure and Organization

At this point, it's important you step back to rethink and examine Angular as a whole. It's easy to mentally paint yourself into a corner when learning a new language or framework, and a great way to combat this is by exposing yourself to alternate ways of thinking, and viewing the bigger picture.

Watch these egghead videos to get started on thinking about alternative application structure:

An Alternative Approach to Controllers Thinking Differently About Organization Experimental "Controller as" Syntax

Readings

In Chapter 2. "Anatomy of an AngularJS Application": Read the section "Organizing Dependencies with Modules"

AngularJS Documentation

Read the AngularJS page on Modules

Part 7: The View and the DOM

This section is a bit of a hybrid of seemingly unrelated topics, DOM manipulation, $watch, and view services, but they are closely related, as they all live in close proximity around the application's views in implementation.

The egghead videos do a superb job of tying these topics together:

AngularJS - angular.element AngularJS - $index, $event, $log

Readings

These book sections will give additional depth on these subjects:

In Chapter 2. "Anatomy of an AngularJS Application": in section "Templates and Data Binding": Read "Observing Model Changes with $watch" In Chapter 2. "Anatomy of an AngularJS Application": in section "Templates and Data Binding": Read "Performance Considerations in $watch" In Chapter 2. "Anatomy of an AngularJS Application": Read section "Changing the DOM with Directives" In Chapter 6. "Directives": In the section "API Overview": Read subsection "Manipulating DOM Elements"

Additionally, we've put together a section that goes into further detail on DOM manipulation:

Read jqLite, angular.element, and the DOM

AngularJS Documentation

Working with CSS in Angular

Bonus Round: Animations

Animations are a really important part of user interfaces. Fortunately, Angular provides some good tools for making this easy.

Angular Animations

AngularJS Documentation

API Reference - ngAnimate Developer Guide - Animations

Part 8: Templates

Despite this being a short section, understanding Angular templates is critical to being able to build applications effectively.

This handful of egghead videos is an excellent primer on the subject:

templateUrl $templateCache

Readings

The AngularJS book has a terrific and comprehensive section detailing templates:

In Chapter 6. "Directives": in the section "API Overview": Read subsection "The Directive Definition Object"

AngularJS Documentation

The documentation guide also has a quick but quality piece on Angular templates:

Angular Templates

Part 9: Routing

Angular routing, while not unduly complicated, does introduce a large number of concepts all at once. It also will handle the lion's share (or close to it) of logic for many single page applications. It should then be no surprise that this is the largest section of the course.

The egghead videos appropriately devote a great deal of podium time to routing:

AngularJS - ng-view AngularJS - The config function AngularJS - $routeProvider api AngularJS - $routeParams AngularJS - redirectTo AngularJS - Promises AngularJS - Resolve AngularJS - Resolve conventions AngularJS - Resolve $routeChangeError AngularJS - Directive for Route Handling AngularJS - Route Life Cycle

Readings

Some of the concepts introduced here are probably still fuzzy, and the text does an excellent job of clearing them up:

In Chapter 2. "Anatomy of an AngularJS Application": Read the section "Changing Views with Routes and $location" In Chapter 5. "Communicating with Servers": Read the section "The $q and the Promise" In Chapter 5. "Communicating with Servers": Read the section "Response Interception" In Chapter 7. "Other Concerns": Read the section "$location"

AngularJS Documentation

Finally, the Angular docs have a great section on the $location service:

Using $location

Part 10: Examples and Analysis

At this point, most of the core Angular topics have been covered, and it's appropriate to get into some examples.

egghead has a good, though fairly trivial, example, "Zippy":

Building Zippy

Readings

Next, the O'Reilly text has a great, chapter-long example that is terrific to work through:

Read all of Chapter 4. "Analyzing an AngularJS App"

AngularJS Documentation

Last, we recommend working through the AngularJS documentation tutorial. The format they present it in is a bit too hands-off to be exceedingly helpful, so we recommend playing around with it and modifying it to get the most out of the exercise.

AngularJS Tutorial

Part 11: Under the Hood

At this juncture, it's appropriate to dive into the niceties of AngularJS. In order to truly master the framework, hand-wavy arguments for how things work aren't sufficient anymore. You need to get into the nitty-gritty of what makes Angular tick.

These egghead videos offer an excellent primer for some increasingly advanced topics:

$scope vs. scope Providers Injectors ngmin

Readings

Following this, the book has a handful of sections detailing these and other new framework topics:

In Chapter 7. "Other Concerns": in the section "AngularJS Module Methods": Read the section "Communicating Between Scopes with $on, $emit, and $broadcast"

Additionally,

Read this in-depth analysis of $digest

AngularJS Documentation

Finally, there are a healthy number of Angular documentation guide pages that really get down into dissecting Angular. These are some of the best resources on Angular's innards out there, make sure and fully take them in:

Conceptual Overview Dependency Injection Angular Services

Part 12: Development Environment and Testing

Much of Angular's design is built around being highly testable. Central to this is the widespread utilization of dependency injection, which you read about in Chapter 11. Not only this, but with tools like Yeoman available, a robust test suite becomes realistic and manageable.

There is only one egghead video on testing, and it gives a simplistic overview of a unit test on a filter. (It's worth mentioning that the Testacular test runner is now called 'Karma'):

AngularJS - Testing Overview

Readings

We'd like to get a bit more in depth than that, so next read all of Ch.3 in O'Reilly. This chapter focuses on Yeoman, which is a set of productivity tools that make Angular a lot more digestible: Yo, a scaffolding tool, Grunt, the build and testing tool, and Bower, the package management tool.

Read Chapter 3: Developing in AngularJS

Meet the Gang

A person new to testing might be a little overwhelmed with these concepts and how they play together in the world of testing. This reference should help out:

  • Yeoman has the scaffolding tool yo that generates an application skeleton to start out with, complete with things like Bootstrap or a pre-configured testing setup. The scaffold of the application is different in many ways to the angular-seed scaffold, but it is important to note that they both use Karma and Jasmine in the same ways.
  • angular-seed is a ready-to-eat AngularJS scaffold available on their github with directory structure and testing amenities pre-prepared. Testing this application is accomplished by running a standalone Karma test server.
  • Grunt is the testing tool used in Yeoman, but it is used as a wrapper for Karma.
  • Karma is the actual test runner that is used to test AngularJS. It can be used standalone from Grunt. Karma circumvents testing inconsistencies across browsers, which would happen with things like PhantomJS, by actually launching a browser and running the tests in it.
  • Jasmine is the testing framework which is used for unit tests by default in Karma. Angular E2E tests with Karma don't and can't use the Jasmine adapter, although E2E tests use very similar syntax with the Angular Scenario Runner. This blog post does a fine job of going through how to actually author some Jasmine tests, and gives some excellent examples.

AngularJS Documentation

Now that we have fleshed out how testing should generally go, let's take a look at the Angular docs on testing. These are going to give some more information on how to think about Angular testing. While they are a good resource to have, regrettably, some of them are not yet complete.

Unit Testing E2E Testing

More Readings and Examples

Now, read through How to Test an AngularJS Directive. This blog post goes through setting up Yeoman, generating a very simple sample application, writing tests for a directive, and running tests using Karma. Finally, go through one of the better Angular testing resources to date, Full-Spectrum Testing with AngularJS and Karma. This is an outstanding resource that has fantastic explanations and demonstrations of testing with Grunt and Karma. Included are examples for each of the major testing categories in Angular. It also adds the intermediate Midway test paradigm to the fray, which is a compelling convenience if you're trying to streamline authoring tests.

Part 13. $http and Server Interaction

A core requirement of web applications is the need to communicate with other servers. AngularJS allows you to easily do this using the $http service.

Introduction to $http $http Interceptors Simple Authentication with JWTs

In addition to $http, Angular offers a higher level service called $resource, which abstracts away RESTful communication by creating objects that represent routes. The abstraction can often get in the way so $http tends to be the better bet, however $resource can be pretty convenient when communicating with very well defined APIs. If you're interested, the following tutorial gives a pretty good overview:

Creating a CRUD App in Minutes with Angular's $resource

AngularJS Documentation

API reference - $http API reference - $resource