Introduction to AngularJS

Workshop

Pete Bacon Darwin

AngularJS 1.x Team Lead

Get the slides

https://slides.com/petebd/introduction-to-angularjs-2016

FoodMe App

Install development tools

Make sure you have node installed

node.js - version 4/5
npm - version 2/3

Get the code

clone using git

git clone https://github.com/petebacondarwin/foodme-intro

or download zip file

https://github.com/petebacondarwin/foodme-intro/archive/master.zip

or copy from USB stick

AngularJS Basics

Directives

Add behaviour to HTML
ng-app - defines your Angular App

Scope

Scope provides the data to the view

Data Binding

{{ ... }} interpolation
ng-model two-way binding

Step 1

Add Angular and basic bindings to the page

More directives

ng-show / ng-hide
ng-click

Step 2

Show and hide parts of the page dynamically

Angular Building Blocks

Modules - define components
Controllers - provide logic for a view
Filters - modify rendering of bindings
Services - singleton helper objects and functions
Directives - provide low level DOM access
Components - provide reusable widgets

Step 3

Move logic into a Controller

Scope Hierarchy

There is more than one scope
$rootScope
- child scope 1
  - grandchild scope
- child scope 2
Useful for structural directives
- ng-repeat
- ng-if

Step 4

Encapsulate the logic in a component

Step 5

Display a list of restaurants

Filters

Simple functions that modify bindings

Use the pipe | symbol in an expression to apply

{{ name | uppercase }}

Step 6

Enable sorting of the restaurant list

Step 7

Improve price and rating displays

Form Validation

Angular provides sophisticated declarative validation

A named form gets attached to the scope
Forms contain validation information
Directives on input elements control validation
Use ngMessages to display error messages

Step 8

Add validation to delivery form

Services

Well Defined Singleton Objects/Functions

Defined on an AngularJS module
Can be injected into components such as controllers, filters, directives and other services
You specify a "recipe" for creating the service:
- value - simply register the service instance
- factory - register a function that will return the service instance
- service - register a class/type that will be instantiated