AngularJS
h,ps://www.w3schools.com/angular/default.asp
Introduc<on
• AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
– <script src="h,ps://ajax.googleapis.com/ajax/
libs/angularjs/1.6.4/angular.min.js"></script>
• AngularJS extends HTML a,ributes with
Direc2ves, and binds data to HTML with
Expressions.
Introduc<on
• AngularJS extends HTML with ng-‐direc2ves.
– The ng-‐app direc<ve defines an AngularJS applica<on.
– The ng-‐model direc<ve binds the value of HTML controls (input, select, textarea) to applica<on data.
– The ng-‐bind direc<ve binds applica<on data to the
HTML view.
Introduc<on
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro
<!DOCTYPE html>
<html>
<script src="h,ps://ajax.googleapis.com/ajax/libs/
angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-‐app="">
<p>Name: <input type="text" ng-‐model="name"></p>
<p ng-‐bind="name"></p>
</div>
</body>
</html>
The ng-‐app direc<ve tells AngularJS that the <div>
element is the "owner" of an AngularJS applica<on.
The ng-‐model direc<ve binds the value of the input field to the applica<on variable name.
The ng-‐bind direc<ve binds the innerHTML of the
<n> element to the applica<on variable name.
Introduc<on
• AngularJS expressions are wri,en inside double braces: {{ expression }}.
• AngularJS will "output" data exactly where the expression is wri,en.
• AngularJS modules define AngularJS applica<ons.
• AngularJS controllers control AngularJS applica<ons.
• The ng-‐app direc<ve defines the applica<on, the ng-‐
controller direc<ve defines the controller.
Introduc<on
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_controller
<div ng-‐app="myApp" ng-‐controller="myCtrl">
First Name: <input type="text" ng-‐model="firstName"><br>
Last Name: <input type="text" ng-‐model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', funcZon($scope) { $scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS Expressions
• AngularJS expressions can be wri,en inside double braces: {{ expression }}.
• AngularJS expressions can also be wri,en inside a direc<ve: ng-‐bind="expression".
• AngularJS will resolve the expression, and return the result exactly where the expression is wri,en.
– {{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS Expressions
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_expression_3
<!DOCTYPE html>
<html>
<script src="h,ps://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Change the value of the input field:</p>
<div ng-‐app="" ng-‐init="myCol='lightblue'">
<input style="background-‐color:{{myCol}}" ng-‐model="myCol" value="{{myCol}}">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in the input field.</p>
</body>
</html>
AngularJS Expressions Numbers
<div ng-‐app="" ng-‐
init="quanZty=1;cost=5">
<p>Total in dollar: {{ quanZty * cost }}</p>
</div>
<div ng-‐app="" ng-‐
init="quanZty=1;cost=5">
<p>Total in dollar: <span ng-‐
bind="quanZty * cost"></span></
p>
</div>
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions
AngularJS Expressions Strings
<div ng-‐app="" ng-‐
init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
AngularJS Expressions Objects
<div ng-‐app="" ng-‐
init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions_objects
AngularJS Expressions Arrays
<div ng-‐app="" ng-‐init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions_arrays
AngularJS vs Javascript Expressions
• Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.
• Unlike JavaScript expressions, AngularJS expressions can be wri,en inside HTML.
• AngularJS expressions do not support condi<onals, loops, and excep<ons, while JavaScript expressions do.
• AngularJS expressions support filters, while
JavaScript expressions do not.
AngularJS Modules
• An AngularJS module defines an applica<on.
• The module is a container for the different parts of an applica<on.
• The module is a container for the applica<on controllers.
• Controllers always belong to a module.
AngularJS Modules
<div ng-‐app="myApp">..</div>
<script>
var app =
angular.module("myApp", []);
</script>
• A module is created by using the AngularJS
func<on angular.module
• The "myApp" parameter refers to an HTML
element in which the applica<on will run.
• Now you can add
controllers, direc<ves,
filters, and more, to your
AngularJS applica<on.
AngularJS Controller
<div ng-‐app="myApp" ng-‐
controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app =
angular.module("myApp", []);
app.controller("myCtrl", funcZon($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
• Add a controller to your
applica<on, and refer to the controller with the ng-‐
controller direc<ve.
• It is common in AngularJS applica<ons to put the
module and the controllers in JavaScript files.
AngularJS Direc<ves
• AngularJS direc<ves are extended HTML a,ributes with the prefix ng-‐.
• The ng-‐app direc<ve ini<alizes and defines the root element of an AngularJS applica<on.
• The ng-‐init direc<ve ini<alizes applica<on data (normally, you will not use ng-‐init but you will use a controller or
module instead).
• The ng-‐model direc<ve binds the value of HTML controls (input, select, textarea) to applica<on data.
• Data binding in AngularJS binds AngularJS expressions with AngularJS data.
– {{ firstName }} is bound with ng-‐model="firstName"
AngularJS Direc<ves
The ng-‐repeat direc2ve repeats an HTML element:
<div ng-‐app="" ng-‐
init="names=['Jani','Hege','Kai']">
<ul>
<li ng-‐repeat="x in names">
{{ x }}
</li>
</ul>
</div>
The ng-‐repeat direc2ve used on an array of objects:
<div ng-‐app="" ng-‐init="names=[
{name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]">
<ul>
<li ng-‐repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_object
AngularJS Direc<ves
• In addi<on to all the built-‐in AngularJS direc<ves, you can create your own direc<ves.
• New direc<ves are created by using the .direc<ve func<on.
• To invoke the new direc<ve, make an HTML element with the same tag name as the new direc<ve.
• When naming a direc<ve, you must use a camel case name, w3TestDirec<ve, but when invoking it, you must use -‐ separated name, w3-‐test-‐
direc<ve
AngularJS Direc<ves
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_direc<ve_tagname
<body ng-‐app="myApp">
<w3-‐test-‐direcZve></w3-‐test-‐direcZve>
<script>
var app = angular.module("myApp", []);
app.direcZve("w3TestDirecZve", funcZon() { return {
template : "<h1>Made by a direcZve!</h1>"
};
});
</script>
</body>
AngularJS Direc<ves
• You can invoke a direc<ve by using:
– Element name
• <w3-‐test-‐direcZve></w3-‐test-‐direcZve>
– A,ribute
• <div w3-‐test-‐direcZve></div>
– Class
• <div class="w3-‐test-‐direcZve"></div>
– Comment
• <!-‐-‐ direcZve: w3-‐test-‐direcZve -‐-‐>
AngularJS Direc<ves
• You can restrict your direc<ves to only be invoked by some of the methods.
• The legal restrict values are:
– E for Element name – A for A,ribute
– C for Class
– M for Comment
• By default the value is EA.
var app =
angular.module("myApp", []);
app.direcZve("w3TestDirecZve
", funcZon() { return {
restrict : "A",
template : "<h1>Made by a direcZve!</h1>"
};
});
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_direc<ve_restric<ons
AngularJS Model
<form ng-‐app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-‐model="text">
<span ng-‐show="myForm.myAddress.$error.email">Not a valid e-‐
mail address</span>
</form>
• The ng-‐model direc<ve can provide type valida<on for applica<on data.
• In the example above, the span will be displayed only if the expression in the ng-‐show a,ribute returns true.
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_validate
AngularJS data binding
• Data binding in AngularJS is the synchroniza<on between the model and the view.
• AngularJS applica<ons usually have a data model.
The data model is a collec<on of data available for the applica<on.
• The HTML container where the AngularJS applica<on is displayed, is called the view.
• The view has access to the model, and there are
several ways of displaying model data in the view.
AngularJS data binding
• Use the ng-‐model direc<ve to bind data from the model to the view on HTML controls (input, select, textarea).
• The ng-‐model direc<ve provides a two-‐way binding between the model and the view:
– When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and
automa<cally, which makes sure that the model and the view is updated at all <mes.
AngularJS data binding
• Applica<ons in AngularJS are controlled by controllers.
• Because of the immediate synchroniza<on of the model and the view, the controller can be
completely separated from the view, and simply concentrate on the model data.
• Thanks to the data binding in AngularJS, the view will
reflect any changes made in the controller.
AngularJS data binding
h,ps://www.w3schools.com/angular/angular_databinding.asp
<div ng-‐app="myApp" ng-‐controller="myCtrl">
<h1 ng-‐click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', funcZon($scope) { $scope.firstname = "John";
$scope.changeName = funcZon() { $scope.firstname = "Nelly";
} });
</script>
AngularJS Controller
• AngularJS applica<ons are controlled by controllers.
• The ng-‐controller direc<ve defines the applica<on controller.
• A controller is a JavaScript Object, created by a
standard JavaScript object constructor.
AngularJS Controller
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_property
<div ng-‐app="myApp" ng-‐controller="personCtrl">
First Name: <input type="text" ng-‐
model="firstName"><br>
Last Name: <input type="text" ng-‐
model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', funcZon($scope) { $scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = funcZon() { return $scope.firstName + " " +
$scope.lastName;
};
});
</script>
• The AngularJS applica<on is defined by ng-‐app="myApp". The applica<on runs inside the <div>.
• The ng-‐controller="myCtrl" a,ribute is an AngularJS direc<ve. It defines a controller.
• The myCtrl func<on is a JavaScript func<on.
• AngularJS will invoke the controller with a
$scope object. In AngularJS, $scope is the applica<on object (the owner of
applica<on variables and func<ons).
• The controller creates two proper<es (variables) in the scope (firstName and lastName) and a method (fullName).
• The ng-‐model direc<ves bind the input fields to the controller proper<es
(firstName and lastName).
AngularJS Scopes
• If we consider an AngularJS applica<on to consist of:
– View, which is the HTML.
– Model, which is the data available for the current view.
– Controller, which is the JavaScript func<on that makes/
changes/removes/controls the data.
• Then the scope is the Model.
• The scope is a JavaScript object with proper<es and
methods, which are available for both the view and
the controller.
AngularJS Scopes
• When you make a controller in AngularJS, you pass the $scope object as an argument.
• When adding proper<es to the $scope object in the controller, the view (HTML) gets access to these
proper<es.
• In the view, you do not use the prefix $scope, you just refer to a propertyname, like {{carname}}.
AngularJS Scopes
• All applica<ons have a $rootScope which is the scope created on the HTML element that contains the ng-‐
app direc<ve.
• The rootScope is available in the en<re applica<on.
• If a variable has the same name in both the current
scope and in the rootScope, the applica<on uses the
one in the current scope.
AngularJS Filters
• AngularJS provides filters to transform data:
– currency Format a number to a currency format.
– date Format a date to a specified format.
– filter Select a subset of items from an array.
– json Format an object to a JSON string.
– limitTo Limits an array/string, into a specified number of elements/characters.
– lowercase Format a string to lower case.
– number Format a number to a string.
– orderBy Orders an array by an expression.
– uppercase Format a string to upper case.
<div ng-‐app="myApp" ng-‐controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
AngularJS Filters
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby
• Filters are added to direc<ves, like ng-‐repeat, by using the pipe character |, followed by a filter
<div ng-‐app="myApp" ng-‐controller="namesCtrl">
<ul>
<li ng-‐repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Filters
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_input
• The filter filter selects a subset of an array.
• The filter filter can only be used on arrays, and it returns an array containing only the matching items.
• By segng the ng-‐model direc<ve on an input field, we can use the value of the input field as an expression in a filter.
• By adding the ng-‐click direc<ve on the table headers, we can run a func<on that changes the sor<ng order of the array (next slide).
<div ng-‐app="myApp" ng-‐controller="namesCtrl">
<p><input type="text" ng-‐model="test"></p>
<ul>
<li ng-‐repeat="x in names | filter : test">
{{ x }}</li>
</ul>
</div>
Filters
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click
<div ng-‐app="myApp" ng-‐controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-‐click="orderByMe('name')">Name</th>
<th ng-‐click="orderByMe('country')">Country</th>
</tr>
<tr ng-‐repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', funcZon($scope) { $scope.orderByMe = funcZon(x) {
$scope.myOrderBy = x;
} });
</script>
Custom Filters
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_custom
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', funcZon() { return funcZon(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) { c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', funcZon($scope) { $scope.names = [
'Jani', 'Carl',
'Margareth’
];
});
</script>
You can make your own filters by registering a new filter factory func<on with your module.
Services
• In AngularJS, a service is a func<on, or object, that is
available for, and limited to, your AngularJS applica<on.
• AngularJS has about 30 built-‐in services. One of them is the $loca<on service.
• The $loca<on service has methods which return
informa<on about the loca<on of the current web page:
var app = angular.module('myApp', []);
app.controller('customersCtrl', funcZon($scope, $locaZon) { $scope.myUrl = $locaZon.absUrl();
});
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_services
Services
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_h,p_get
• $hOp is an AngularJS service for reading data from remote servers.
• The AngularJS $h,p service makes a request to the server, and returns a response (an object with proper<es).
• The data you get from the response is expected to be in JSON format.
<div ng-‐app="myApp" ng-‐controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', funcZon($scope, $h,p) { $h,p.get("welcome.htm")
.then(funcZon(response) {
$scope.myWelcome = response.data;
});
});
</script>
Services
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_services_custom
• To create your own service, connect your service to the module:
app.service('hexafy', funcZon() { this.myFunc = funcZon (x) { return x.toString(16);
} });
• To use your custom made service, add it as a dependency when defining the controller:
app.controller('myCtrl', funcZon($scope, hexafy) { $scope.hex = hexafy.myFunc(255);
});
Services
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_services_filter2
• Once you have created a service, and connected it to your applica<on, you can use the service in any
controller, direc<ve, filter, or even inside other services.
• To use the service inside a filter, add it as a dependency when defining the filter:
app.filter('myFormat',['hexafy', funcZon(hexafy) { return funcZon(x) {
return hexafy.myFunc(x);
};
}]);
…
<ul>
<li ng-‐repeat="x in counts">{{x | myFormat}}</li>
</ul>
Tables
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_orderby
<div ng-‐app="myApp" ng-‐controller="customersCtrl">
<table>
<tr ng-‐repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', func<on($scope, $h,p) { $h,p.get("customers.php")
.then(func<on (response) {$scope.names = response.data.records;});
});
</script>
Select Boxes
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_select
• If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-‐op<ons direc<ve:
• If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-‐op<ons direc<ve:
<div ng-‐app="myApp" ng-‐controller="myCtrl">
<select ng-‐model="selectedName" ng-‐opZons="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', funcZon($scope) { $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
Select Boxes
h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_repeat
• You can also use the ng-‐repeat direc<ve to make the same dropdown list:
<div ng-‐app="myApp" ng-‐controller="myCtrl”>
<select>
<opZon ng-‐repeat="x in names">{{x}}</opZon>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', funcZon($scope) { $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
Select Boxes
• Assume you have an array of objects.
• The ng-‐repeat direc<ve has its limita<ons, the selected value must be a string
– h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_repeat_selected
• When using the ng-‐op<ons direc<ve, the selected value can be an object.
– h,ps://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_selected
