Introduction to Angular JS

Outline

• AngularJS components
• Directives and Expressions
• Data binding
• Modules And Controllers

2
 Rise of the Responsive Single Page App

3
 Responsive

• Unified across
experiences
• Can be embedded as
mobile app
• Better deployment and &
maintanence
• Mobile users need to get
access to everything

4
 JavaScript

• SPAs are implemented using

• JavaScript and
• HTML

5
 Challenges in SPA

• DOM Manipulation
– How to manipulate the view efficiently?
• History
– What happens when pressing back button?
• Routing
– Readable URLs?
• Data Binding
– How bind data from model to view?
• View Loading
– How to load the view?

• Lot of coding! You could use a framework instead ...

6
 Single-page Application

• Single page apps typically have

– “application like” interaction
– dynamic data loading from the server-side API
– fluid transitions between page states
– more JavaScript than actual HTML

• They typically do not have

– support for crawlers (not for sites relying on search traffic)
– support for legacy browsers (IE7 or older, dumbphone
browsers)

7
 SPAs Are Good For …

• “App-like user experience”

• Binding to your own (or 3rd party) RESTful API
• Replacement for Flash or Java in your web pages
• Hybrid (native) HTML5 applications
• Mobile version of your web site

The SPA sweet spot is likely not on web sites,

but on content-rich cross-platform mobile apps

8
 PJAX

• Pjax is a technique that allows you to progressively enhance

normal links on a page so that clicks result in the linked content
being loaded via Ajax and the URL being updated using HTML5
pushState, avoiding a full page load.

• In browsers that don't support pushState or that have JavaScript

disabled, link clicks will result in a normal full page load. The Pjax
Utility makes it easy to add this functionality to existing pages.

9
 SPAs and Other Web App Architectures

Server-side Server-side + PJAX SPA

AJAX
What Server round-trip on Render initial page on Render initial page on Serve static page
every app state change server, state changes server, state changes skeleton from server;
on the client on server, inject into render every change on
DOM on client-side client-side

How UI code on server; links UI code on both ends; UI code on server, UI code on client,
& form posting AJAX calls, ugly server client to inject HTTP, server API
API server API if you like

Ease of development

UX & responsiveness

Robots & old browsers

Who’s using it? Amazon, Wikipedia; Facebook?; Twitter, Basecamp, Google+, Gmail, FT;
banks, media sites etc. widgets, search GitHub mobile sites, startups

10
 In Angularjs SPA
application is created with
the help of one of the
most happening features
of Angularjs i.e.
Routing

11
 AngularJS

• A framework rather than a library

App Framework

App

Library

• Good choice for Single Page App development

• Extends HTML by adding new elements and custom
attributes that carry special meaning

12
 Benefits of
Angularjs
•Structure, Quality and Organization
•Lightweight ( < 36KB compressed and minified)
•Free
•Separation of concern
•Modularity
•Extensibility & Maintainability
•Reusable Components

13
 W hat Browsers Does AngularJS Support?

Angular claims to support “Class A Browsers.” As of Angular 1.2,

the Angular team considers the following browsers “Class A”:
● Chrome
● Firefox
● Safari
● iOS
● Android
● IE8+.

14
 https : / /a n g u larjs.org

15
 Libraries

• The main library is the angular.js file

• Download from angularjs.org or use the
Google CDN

16
 AngularJS

• AngularJS is currently being maintained by

developers at Google
• Open source software released under the MIT
license
• Available for download at GitHub
• Called AngularJS because HTML uses angle
brackets

17
 Model-View-Whatever

• AngularJS is an MVW framework

(Model-View-Whatever)
• Can be used to develop apps based on
either
– MVC (Model-View-Controller)
– MVVM (Model-View-ViewModel)
• aka naked objects

18
 AngularJS Components

1. Model
The data shown to the users (JavaScript Objects)
2. View
This is what the users see (generated HTML)
3. Controller
The business logic behind an application
4. Scope
A context that holds data models and functions
5. Directives
Extend HTML with custom elements and attributes.
6. Expressions
Represented by {{}} in the HTML, can access models and
functions from the scope
7. Templates
HTML with additional markup in the form of directives and
expressions

19
 Features

● Modules
● Directives
● Templates
● Scope
● Expressions
● DataBinding
● MVC (Model, View & Controller)
● Validations
● Filters
● Services
● Routing
● Dependency Injection
20
 Module

What is a module?
A container for code for the
different parts of your
applications.
Your module goes here

ng-app=’yourModuleName’

21
 Directive

As we say
controls in
ASP.net or Partial
views in MVC

22
 Directives

• Angular.js extends HTML with directives

• These directives are HTML attributes with an
‘ng’ prefix.
– Or ‘data-ng’ in HTML5
• Important directives:
– ng-app
• defines an AngularJS application
– ng-model
• binds the value of HTML controls to application data
– ng-bind
• binds application data to the HTML view

23
 The ng-app Directive

• This is required for the page to use Angular

• Applied to an HTML element
• The simplest version does not relate to any
external definition
– App name quotes are empty

<body ng-app="">
..
</body>

24
 Expressions

• The main purpose of an expression is binding

data from the model to the view
• The expression is dynamically re-evaluated each
time any of the data it depends on changes
• Written inside double braces

{{ expression }}
• Result is included in the page where the
expression is written
• Simple examples:
– Arithmetic {{ 5 + 4 }}
expressions
– String expressions {{ "Hello " + "World" }}
25
 Testing Angular Configuration
• A simple expression is a good way of checking
that the angular library is found and that you
have the required ng-app directive

26
 Two-way Data Binding

• One important feature of Angular is the way it

binds values to expressions
• These values can be in the HTML (view) or in
JavaScript variables or objects (model)
• Data binding is automatic
• Angular automatically updates bound values

27
 ng-model and ng-bind

• An HTML element that contains data can be

bound to a value in the model

<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

• The innerHTML of another element can be bound

to that part of the model

28
 The ng-init Directive

• This directive can be used to initialise values in the

model

<div ng-app="" ng-init="name='Massey' ">

<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

• The ng-init directive can contain multiple initialisations,

separated by semicolons

ng-init="forename='Massey'; lastname='University' "

29
 Binding an Expression

• The ng-bind directive can contain an expression

• In this example it multiplies a data value from the
model (“number”) by itself

<div ng-app="" ng-init="number=10">

<p>Number: <input type="text" ng-model="number" ></p>
<p>Square:</p>
<p ng-bind="number * number"> </p>
</div>

30
 Modules

• Angular code in external files is defined in modules

var app = angular.module("ticketoffice", [ ]);

• The first parameter is the name of the app

module that can be referenced from an ng-app
directive
<div ng-app="ticketoffice">

– The array is for any dependencies we may have on other

modules (can be empty)

31
 Controllers

• Apps have controllers

• These are JavaScript functions
• Given a name when added to an app as a controller

var app=angular.module("ticketoffice", []);

app.controller("TicketController", function() {
// body of function
});

• Name your controllers using Pascal Case

– Controllers are really constructor functions
– These are usually named in JavaScript using Pascal case

32
 The ng-controller Directive

• Here, TicketController shows an alert (just as an example, to

show it is being called)

• Angular uses the ng-controller directive to call controller functions

<div ng-controller="TicketController"> </div>

app.controller("TicketController", function(){
alert("TicketController called");
});

33
 Object Data in the Controller

• The controller might access object data

• In this case a travel ticket (‘traveldoc’)

app.controller("TicketController", function(){
this.traveldoc=ticket;
});
var ticket=
{
origin : "Wellington",
destination : "Auckland",
price : 110
}
34
 Controller Alias

• To access data from the controller, we can use an

alias
<div ng-controller="TicketController as agent">

• Inside the div, the alias can be used to access the

data from the controller, using expressions
<h2>Origin: {{agent.traveldoc.origin}}</h2>
<h2>Destination: {{agent.traveldoc.destination}}</h2>
<h3>Price: ${{agent.traveldoc.price}}</h3>

– Note:
• This controller’s scope is within the div only
• Sometimes will need a broader scope
35
 Multiple Objects

• We might have an array of objects

var tickets = [
{ origin : "Wellington", destination : "Auckland", price : 110},
{ origin : "Christchurch", destination : "Dundedin", price : 120},
…
];

• We also need to change the controller, since the name has

changed, for readability (from ‘ticket’ to ‘tickets’)

this.traveldocs=tickets;
36
 Array Access by Index

• Access by index is now possible, e.g.

<h2>{{agent.traveldocs[0].origin}}</h2>
<h2>{{agent.traveldocs[0].destination}}</h2>
<h3>${{agent.traveldocs[0].price}}</h3>

• However, not good for displaying multiple objects

on the same page

37
 The ng-repeat Directive

• Can be used to iterate over an array of objects

• Note the ‘in’
• The controller reference is moved to the enclosing
scope

<body ng-controller="TicketController as agent" >

<div ng-repeat="traveldoc in agent.traveldocs">
<h2>{{traveldoc.origin}}</h2>
<h2>{{traveldoc.destination}}</h2>
<h3>${{traveldoc.price}}</h3>

38
 Adding Images with ng-src

• When adding images with Angular, we need to use

the ng-src directive,
instead of the standard ‘src’ attribute of the ‘img’
tag
• Let’s assume our ticket objects each include an
array of images:
var tickets = [
{ origin : "Wellington", destination : "Auckland", price : 110, isAvailable : false,
images: [
{ full : "wellington1-full.jpg", thumb : "wellington1-thumb.jpg" },
{ full : "wellington2-full.jpg", thumb : "wellington2-thumb.jpg" },
…

39
 Using ng-src

• In the HTML img tag, replace ‘src’ with ‘ng-src’,

along with an Angular expression to locate the
image.

<img ng-src="{{traveldoc.images[0].full}}" />

40
 Basic Concepts

• 1) Templates
– HTML with additional markup, directives,
expressions, filters ...
• 2) Directives
– Extend HTML using ng-app, ng-bind, ng-
model
• 3) Filters
– Filter the output: filter, orderBy, uppercase
• 4) Data Binding
– Bind model to view using expressions {{
}}
41
 First Example – Template

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8" />
<style media="screen"></style>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/an
Template gular.min.js"></script>
</head>
<body>
<div ng-app>
<!-- store the value of input field into a variable name -->
<p>Name: <input type="text" ng-model="name"></p>
<!-- display the variable name inside (innerHTML) of p -->
<p ng-bind="name"></p>
</div>
</body>
</html>

42
 Directive Summary

• Here is summary of the directives that

we have seen so far:
– ng-app
– ng-model
– ng-init
– ng-bind
– ng-controller
– ng-src
– ng-repeat

43
 References

• Brad Dayley, Brendan Dayley, Caleb Dayley , “Node.js, MongoDB

and Angular Web Development: The definitive guide to using the
MEAN stack to build web applications”, Pearson Education, Second
Edition, 2017.

44