3. AngularJS
âą A framework rather than a library
âą Good choice for Single Page App development
âą Extends HTML by adding new elements and
custom attributes that carry special meaning
Library
App Framework
App
4. 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
5. 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
6. 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
7. Libraries
âą The main library is the angular.js file
âą Download from angularjs.org or use
the Google CDN
8. 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
9. 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>
10. 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
âą Result is included in the page where the
expression is written
âą Simple examples:
â Arithmetic expressions
â String expressions
{{ 5 + 4 }}
{{ "Hello " + "World" }}
{{ expression }}
11. 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
12. 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
13. ng-model and ng-bind
âą An HTML element that contains data
can be bound to a value in the model
âą The innerHTML of another element can
be bound to that part of the model
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
14. The ng-init Directive
âą This directive can be used to initialise
values in the model
âą The ng-init directive can contain
multiple initialisations, separated by
semicolons
<div ng-app="" ng-init="name='Massey' ">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
ng-init="forename='Massey'; lastname='University' "
15. 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>
16. Modules
âą Angular code in external files is
defined in modules
âą The first parameter is the name of the
app module that can be referenced
from an ng-app directive
â The array is for any dependencies we may
have on other modules (can be empty)
var app = angular.module("ticketoffice", [ ]);
<div ng-app="ticketoffice">
17. Controllers
âą Apps have controllers
âą These are JavaScript functions
âą Given a name when added to an app as a
controller
âą Name your controllers using Pascal Case
â Controllers are really constructor functions
â These are usually named in JavaScript using
Pascal case
var app=angular.module("ticketoffice", []);
app.controller("TicketController", function() {
// body of function
});
18. The ng-controller Directive
âą Angular uses the ng-controller
directive to call controller functions
âą Here, TicketController shows an alert
(just as an example, to show it is being
called)
app.controller("TicketController", function(){
alert("TicketController called");
});
<div ng-controller="TicketController"> </div>
19. 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
}
20. Controller Alias
âą To access data from the controller, we can use an
alias
âą Inside the div, the alias can be used to access the
data from the controller, using expressions
â Note:
âą This controllerâs scope is within the div only
âą Sometimes will need a broader scope
<div ng-controller="TicketController as agent">
<h2>Origin: {{agent.traveldoc.origin}}</h2>
<h2>Destination: {{agent.traveldoc.destination}}</h2>
<h3>Price: ${{agent.traveldoc.price}}</h3>
21. Multiple Objects
âą We might have an array of objects
âą We also need to change the controller,
since the name has changed, for
readability (from âticketâ to âticketsâ)
var tickets = [
{ origin : "Wellington", destination : "Auckland", price : 110},
{ origin : "Christchurch", destination : "Dundedin", price : 120},
âŠ
];
this.traveldocs=tickets;
22. Array Access by Index
âą Access by index is now possible, e.g.
âą However, not good for displaying
multiple objects on the same page
<h2>{{agent.traveldocs[0].origin}}</h2>
<h2>{{agent.traveldocs[0].destination}}</h2>
<h3>${{agent.traveldocs[0].price}}</h3>
23. 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>
24. 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" },
âŠ
25. 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}}" />
26. 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