A Better Way to Learn AngularJS - DOTNET
Home Unlabelled A Better Way to Learn AngularJS

A Better Way to Learn AngularJS

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.

The Course

The learning curve of AngularJS can be described as a hockey stick. Initially getting off the ground with apps featuring basic functionality is delightfully easy. However, when apps eventually grow large or complicated, structure without heed to Angular’s inner workings 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

  • Moderate knowledge of HTML, CSS, JavaScript, including the following concepts:
    • The POJO (plain old JavaScript object), including:
    • OOP, including encapsulation and inheritance
    • Object creation, prototypes
  • Basic Model-View-Controller concepts
  • The Document Object Model
  • JavaScript functions, events, error handling

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.
It doesn’t abstract away HTML, CSS, or JavaScript. It doesn’t require inheritance from proprietary types. It doesn’t use one-way data binding. It doesn’t treat testing as an afterthought. It doesn’t require boilerplate code. And it’s not that complicated.
AngularJS is a JavaScript framework that embraces extending HTML into a more expressive and readable format. It decreases emphasis on directly handling DOM manipulation from the application logic, allowing for easier testing. It employs efficient two-way data binding and sensible MVC implementation, reducing the server load of applications. It features directives, which are incredibly robust tools that are significant contributors to Angular’s ubiquity.
AngularJS is self-described as ‘HTML enhanced for web apps’, and it is most certainly that.

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.
Check these boxes to keep track of your progress
 

AngularJS Overview

Revving the Engine

 
Before we get on with it, this post, Things I Wish I Were Told About Angular.js, 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.
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:

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 - Publishing Model Data with Scopes"

AngularJS Documentation

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

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:

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:

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:

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:

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:

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:

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:

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:

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:

AngularJS Documentation

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:

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:

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:

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:

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”:

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.

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:

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,

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:

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’):

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.
  • Angular Scenario Runner is used as the E2E testing framework for AngularJS, and is syntactically similar to Jasmine.

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.

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

$http

In the face of a slew of new concepts, it’s important to not overthink the $http service.
$http can be thought of as a wrapper to make requests to external HTTP entities with the browser’s XHR object or JSONP. Because of the nature of these requests, it employs callbacks afforded to it by the $q defer/promise API.
More generally, $http is used predominantly for AJAX requests. Its API exists as you would expect, with the ability to make GET, POST, PUT, DELETE, HEAD, and JSONP requests. You are responsible for making these calls manually, and for constructing how to handle the objects they return, and the callbacks for various outcomes that might occur with an asynchronous request.

$resource

AngularJS offers another level abstractions above $http, the $resource service. This is a convenience offered to you when dealing with external resources that are RESTful. It wraps the $http service, which is pointed at a singular endpoint, and presents a REST API on the $resource to handle RESTful requests. The $resource get() method returns a Resource object, which can then be modified with CRUD (or custom defined) operations invoked upon it.

Authentication

Since services are singletons, and can be injected pretty much anywhere, they are perfect for use in authentication logic. There is a diverse spectrum of implementations on how exactly to construct the service, but they are all variations on basically the same theme.
services.js

  1. myApp.factory(‘AuthenticationService’, function() {

  2.   var current_user;

  3.   return {

  4.     signIn: function() {

  5.       // check password on server, get user data, unique token, etc.

  6.     },

  7.     signOut: function() {

  8.       // clear current_user data, unset logged in status, etc.

  9.     },

  10.     isSignedIn: function() {

  11.       // logic to check if current user has signed in

  12.     },

  13.     currentUser: function() {

  14.       // return the current_user object, or handle if the user is not signed in

  15.     }

  16.   };

  17. });


Since it is a service, you can inject this to your heart’s desire, set watchers on its methods, use the user data in views, handle routing conditionals based on signin status, etc. Since all this data is still just freely living in the AngularJS framework, you still need to exercise the same security precautions when performing server transactions involving authentication.
 
Read this blog entry, Deal with users authentication in an AngularJS web app. It offers excellent insight into service-based Angular authentication.

Readings

The text offers a wealth of information on interacting with servers:
 

In Chapter 2. "Anatomy of an AngularJS Application": in the section "Changing Views with Routes and $location": Read the subsection "Talking to Servers"

 

Read all of Chapter 5. "Communicating with Servers"

 

In Chapter 8. "Cheatsheet and Recipes": Read the section "Working with Servers and Login"

AngularJS Documentation

Finally, check out the Angular API docs on $http and $resource:
Copyright © 2015 DOTNET All Right Reserved
Disclaimer | About Us | Contact Us | Privacy Policy | Samba Tecks
Posts RSS
Comments RSS