An introduction to Angular.js covering single-page-app concepts, related libraries and angular features by example.
- View the screencasts on YouTube
- Run the examples (use left and right arrow keys)
by Curran Kelleher March 2014
- "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
- 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:
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.
-
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.
It is straightforward to teach yourself about Angular, as there are so many learning resources on the Web.
- 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.
- Angular Developer Guide Conceptual Overview
- Enumerates fundamental concepts
- Provides several code examples
- Official Angular Tutorial
- Useful to read through
- Emphasizes testing
- Starts with complex boilerplate project
- Great diagrams
- Egghead.io
- A collection of short screencasts (scroll to the bottom for intoduction content)
- AngularJS Fundamentals In 60-ish Minutes
- A talk on YouTube that covers fundamentals of Angular
- Learn Angular.js in 30 Min
- A screencast showing how to build an app using UI-Router
- Does not cover basics, jumps to advanced usage
- Great example of how development flows in practice
- An Introduction to AngularJS Forms Validation
- 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
- AngularJS & D3: Directives for Visualizations - YouTube
- D3 on AngularJS (ng-newsletter)
- Dynamic Visualizations with AngularJS and D3 / Protractor E2E testing for AngularJS
- Replacing (most of) d3.js with pure SVG + AngularJS
- Diagramme in AngularJS mit D3/nvd3
- Using the D3.js Visualization Library with AngularJS
- Angularjs-nvd3-directives (GitHub)
- angular-d3-directives(GitHub
by Curran Kelleher March 2014