AngularJS tutorial

Description

This tutorial is aimed at participants who are interested in learning the basic workings of AngularJS, as well as the ways in which it can be used to build rich web applications. We will start from scratch, loading AngularJS into an empty web page, and will cover how to use the most important parts of the framework to handle user interaction, bind the user interface to our JavaScript models, and talk to a backend server. We will also briefly cover some best practices and patterns around structuring AngularJS applications.

A general outline of the talk is as follows:

Introduction

• Background on AngularJS
• What is a client-side web framework?
• Why would you use a client-side web framework?
• MVC pattern
• Why use MVC?
• Alternatives to AngularJS

Hello world

• Load AngularJS into our page
• ng-app
  – Initialize AngularJS
• Adding extra elements to the DOM
• ng-controller
  – Creates our first controller
• Exercise

Two-way data binding

• Add an input tag
• ng-model
• Bind the input to a scope property
• Interpolation from model
• Exercise

Tying input to scope changes

• Add a button
• ng-click
  – Use the value of the input box
  – Adds value to a list in $scope
• Exercise

Display the list prettily

• ng-repeat
• Exercise

Architectural cleanup

• Move js into separate file
• Load the file in via a script tag

Break

Filters

• Add filter into ng-repeat
• Change which values are seen
• Exercise

Using filters in javascript

• $filter
• Exercise

Server interaction

• $http
• Load data asynchronously from a server
• Exercise

Create our first module

• Pull everything we’ve done so far into an external module

Cool stuff we didn’t get to (brief overview)

• Directives
• Services
• Testing
• Providers