Introduction to AngularJS
26
Associate Professor David Parsons Massey University Auckland, New Zealand
-
Upload
david-parsons -
Category
Software
-
view
77 -
download
0
Transcript of Introduction to AngularJS
Associate Professor David Parsons
Massey University
Auckland, New Zealand
Outline
• AngularJS components
• Directives and Expressions
• Data binding
• Modules And Controllers
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
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
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
AngularJS Components
1. ModelThe data shown to the users (JavaScript Objects)
2. ViewThis is what the users see (generated HTML)
3. ControllerThe business logic behind an application
4. ScopeA context that holds data models and functions
5. DirectivesExtend HTML with custom elements and attributes.
6. ExpressionsRepresented by {{}} in the HTML, can access models and functions from the scope
7. TemplatesHTML with additional markup in the form of directives and expressions
Libraries
• The main library is the angular.js file
• Download from angularjs.org or use
the Google CDN
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
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>
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 }}
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
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
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>
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' "
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>
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">
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
});
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>
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
}
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>
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;
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>
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>
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" },
…
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}}" />
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
