An introduction to Angular.js covering single-page-app concepts, related libraries and angular features by example.

View the screencasts on YouTube
- Part I
- Part II
Run the examples (use left and right arrow keys)

by Curran Kelleher March 2014

Angular.js

"What HTML would have been, had it been designed for building web-apps"
Implements futuristic Web standards now (Web Components and Model Driven views)
Created by Misko Hevery in 2009
Open Source, supported by Google
Extremely well documented
Vibrant community of users
Gaining traction in industry

Data Binding Frameworks

Facilitate building single page applications
- Page never reloads
- No server-side page rendering
Based on the Model View Controller concept
Provide solutions for:
- Routing - handling updates to the URL hash fragment
- Templating - dynamically creating and updating HTML based on templates and models
- Data binding - synchronize the model and user interface
Top data binding frameworks today:
- Angular.js
- Knockout
- Ember
- JsViews
- Can.js
- Ractive

Foundational Libraries

The following libraries lay the foundation for many data binding frameworks:

Underscore - a widely adopted functional programming utility library, providing functional primitives such as map, reduce, each and filter. Lo-Dash is a replacement for Underscore that boasts performance increases, bug fixes and additional features. Underscore can be used in conjunction with Angular.
Backbone - a tried and true bare bones MVC framework that provides fundamental features such as events, observable properties, and class-like inheritance. Backbone also has foundational support for routing based on hash fragments and RESTful synchronization with a CRUD backend for persistence. Backbone was one of the first on the JavaScript MVC library scene, and surely influenced Angular.
jQuery - an industry standard library for DOM manipulation and AJAX.
- Angular includes a jQuery-like API with jqLite
AMD - an industry standard for separating JavaScript projects across many files using modules. The top AMD implementation is Require.
- Angular dependency injection follows a pattern extremely similar to (and likely influenced by) AMD.
Promises - an industry standard pattern for dealing with asynchronous control flow. The top Promises implementation is Q. Async.js is another great asynchronous control flow library, from the Node.js community.
- Angular includes a Q-like API with the $q service
Handlebars - one of the top templating libraries. Handlebars is derived from Mustache, which provides logic-less templates.
- Angular templates use syntax similar to Handlebars.

Examples

Illustrate Angular features in small increments
Meant to be as simple as possible (e.g. no Bootstrap or Grunt)
Check out the example viewer (which is itself an Angular application).
Example 1 - (run it! | index.html) - Starter HTML page with a text input
Example 2 - (run it! | index.html) - Added keyup event listener on textInput.
Example 3 - (run it! | index.html) - Extracting text from the text input as it changes.
Example 4 - (run it! | index.html) - Updating a span when input text changes using the DOM API.
Example 5 - (run it! | index.html) - Updating a span when input text changes using jQuery.
Example 6 - (run it! | index.html) - Updating a span when input text changes using Backbone.
Example 7 - (run it! | index.html) - Updating a template when input text changes using Angular.
Example 8 - (run it! | index.html) - Data binding with many text inputs.
Example 9 - (run it! | index.html) - First name and last name.
Example 10 - (run it! | index.html) - Initializing the model using an Angular controller, defined with a global function.
Example 11 - (run it! | index.html) - Initializing the model using an Angular controller, defined within an Angular module.
Example 12 - (run it! | index.html) - Changing scope values asynchronously - updates don't propagate without .apply().
Example 13 - (run it! | index.html) - Changing scope values asynchronously - updates propagate .apply().
Example 14 - (run it! | index.html) - Looping over lists in templates using ng-repeat.
Example 15 - (run it! | index.html) - Adding entries to a list using forms and ng-submit.
Example 16 - (run it! | index.html) - Clearing the entered name on submit using data binding.
Example 17 - (run it! | index.html) - Removing names from a list using ng-click.
Example 18 - (run it! | index.html) - Enumerating objects - countries and their populations.
Example 19 - (run it! | index.html) - Building a table.
Example 20 - (run it! | index.html) - Fetching JSON.
Example 21 - (run it! | index.html) - Dependency injection syntax for minification.
Example 22 - (run it! | index.html) - Adding search using Angular filters.
Example 23 - (run it! | index.html) - Sorting in ng-repeat using orderBy
Example 24 - (run it! | index.html) - Sorting in descending order
Example 25 - (run it! | index.html) - Sorting table columns interactively.
Example 26 - (run it! | index.html) - Interactively reversing sort order.
Example 27 - (run it! | index.html) - Adding country flag images.
Example 28 - (run it! | index.html) - Using ng-src.
Example 29 - (run it! | index.html) - Adding capital data.
Example 30 - (run it! | index.html) - Adding GDP data
Example 31 - (run it! | index.html) - Formatting currency using Angular filters in templates.
Example 32 - (run it! | index.html) - Formatting population using Angular filters in templates.
Example 33 - (run it! | index.html) - Preparing for routing - making a simple country listing.
Example 34 - (run it! | index.html) - Getting started with routing using ngRoute
Example 35 - (run it! | index.html) - Moving templates for routes into separate files
Example 36 - (run it! | index.html) - Extracting and using parameters from routes
Example 37 - (run it! | index.html) - Using links with routes for navigation between views
Example 38 - (run it! | index.html) - Looking up details for a single country
Example 39 - (run it! | index.html) - Surfacing data on the country details page
Example 40 - (run it! | index.html) - Creating a service for loading the list of countries
Example 41 - (run it! | index.html) - Extracting the country details query into a service
Example 42 - (run it! | index.html) - Caching JSON data in a service.
Example 43 - (run it! | index.html) - Caching JSON using cache option
Example 44 - (run it! | index.html) - Creating a custom filter to encode URIs
Example 45 - (run it! | index.html) - Simulating a RESTful service by splitting the JSON data across files.
Example 46 - (run it! | index.html) - Creating a custom Angular directive for country entries.
Example 47 - (run it! | index.html) - Adding a controller to our custom directive
Example 48 - (run it! | index.html) - Fetching data within custom directives - adding flags to the country listing.
Example 49 - (run it! | index.html) - Extracting controllers into a separate module
Example 50 - (run it! | index.html) - Extracting factories and directives to separate modules using method chaining.

Angular Learning Resources

It is straightforward to teach yourself about Angular, as there are so many learning resources on the Web.

Bird's-eye-view:

Learn Angularjs This Weekend - Advice on which resources to use for getting up to speed on Angular.
A Better Way to Learn AngularJS - A great collection of links to resources for learning Angular.
AngularJS-Learning - A kitchen sink of links to Angular learning resources.

Introductory tutorials and guides:

Design and implementation of Angular:

Re-Imagining the Browser with AngularJS
- Talk by Miško Hevery, creator of Angular
- Discusses the high-level goals of Angular
Bringing Angular Apps to Life with Animation by Miško Hevery
Google I/O 2013 - Design Decisions in AngularJS
"Writing Directives" talk by Misko Hevery

Angular and D3

by Curran Kelleher March 2014