July 20–24, 2015
Portland, OR

AngularJS tutorial

Sam Helman (Flatiron Health)
1:30pm–5:00pm Monday, 07/20/2015
Foundations E145/146
Average rating: ****.
(4.83, 6 ratings)
Slides:   external link

Prerequisite Knowledge

Participants should have a basic knowledge of web applications and JavaScript. No knowledge of AngularJS itself is required.

Materials or downloads needed in advance

A laptop with Git and Python installed.

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
Photo of Sam Helman

Sam Helman

Flatiron Health

Sam Helman currently works as a software engineer at Flatiron Health. Before that, he worked at MongoDB, where he was part of the team that used Go to build a continuous integration system from scratch. When he’s not programming he spends his time reading, cooking, and exploring New York City.

Comments on this page are now closed.

Comments

Picture of Sam Helman
Sam Helman
07/27/2015 10:59am PDT

Hello! The slides are included in the github repo at

https://github.com/shelman/angular-tutorial

as a .pptx file. Are you able to open this? If not I can upload them as a pdf.

Picture of Shahak Nagiel
Shahak Nagiel
07/20/2015 6:26am PDT

Link to slides please?

Picture of Sam Helman
Sam Helman
07/18/2015 2:27pm PDT

I wanted to add one additional point – there is a github repo for this tutorial with some bare bones for the coding we will do. If you are able to before Monday, please clone the appropriate github repo by running

git clone https://github.com/shelman/angular-tutorial.git

to avoid clogging the network during the actual session. Thanks!