Scribd
Upload
17 views36 pages

Module 5

Uploaded by

lafiffqhatif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views36 pages

Module 5

Uploaded by

lafiffqhatif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

MODULE 5

INTRODUCTION TO ANGULAR JS
What is AngularJS

• Angular JS is an open source JavaScript framework that is used to


build web applications.
• AngularJS is an open source Model-View-Controller framework which is
similar to the JavaScript framework.
• AngularJS extends HTML with ng-directives.
• The ng-app directive defines an AngularJS application.
• The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.
The various form input types (text, checkbox, radio, number, email, URL,
date, datetime-local time, month, week) can be used with the ngModel
directive. This directive is supported by <input>, <select> & <textarea>.
• The ng-bind directive binds application data to the HTML view.
• <body ng-app="myapp">: The ng-app directive initializes the
AngularJS application named "myapp".
• <div ng-controller="HelloController">: The ng-controller directive
defines a controller named "HelloController" for this div. This
controller is responsible for managing the scope ($scope) within this
div.
• <h2>Hello {{helloTo.title}} !</h2>: The {{helloTo.title}} is an AngularJS
expression. It binds the value of helloTo.title from the controller's
scope to this part of the HTML. The text "Hello World, AngularJS!" will
be displayed
• angular.module("myapp", []): Defines a new AngularJS module
named "myapp". The empty array [] is used to inject dependencies if
needed..
• controller("HelloController", function($scope) {...}): Defines a
controller named "HelloController" within the "myapp" module. The
controller is a JavaScript function that takes $scope as a parameter.
• Inside the controller, $scope.helloTo = {}; creates an empty object
helloTo within the scope.
• $scope.helloTo.title = "World, AngularJS";: Assigns the string "World,
AngularJS" to the title property of the helloTo object in the scope.
• When this HTML file is loaded in a browser, AngularJS will bind the
data ($scope.helloTo.title) to the HTML view.
• The text "Hello World, AngularJS!" will be displayed inside the <h2>
tag.
AngularJS Directives

• AngularJS directives are used to extend HTML. They are special


attributes starting with ng-prefix. Let us discuss the following
directives −
• ng-app − This directive starts an AngularJS Application.
• ng-init − This directive initializes application data.
• ng-model − This directive defines the model that is variable to be used
in AngularJS.
• ng-repeat − This directive repeats HTML elements for each item in a
collection.
<html>
<head>
<title>AngularJS Directives</title>
</head>

<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = “ countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country . locale }}
</li>
</ol>
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">


</script>

</body>
</html>
AngularJS Expressions

• AngularJS expressions are written inside double braces:


{{ expression }}.
• AngularJS will "output" data exactly where the expression is written

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
• <div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
AngularJS Applications

• AngularJS modules define AngularJS applications.


A module is created by using the AngularJS function angular.module

• AngularJS controllers control AngularJS applications.

• The ng-app directive defines the application, the ng-


controller directive defines the 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', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Angular JS Filters
• Filters can be added to expressions by using the pipe character |,
followed by a filter.
<p>The name is {{ lastName | uppercase }}</p>
• 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.
AngularJS Events

• It can be added using the Directives mentioned below:


ng-mousemove The movement of the mouse leads to the execution of the event.
ng-mouseup Movement of the mouse upwards leads to the execution of the event.
ng-mousedown Movement of the mouse downwards leads to the execution of the event.
ng-mouseenter Click of the mouse button leads to the execution of the event.
ng-mouseover Hovering the mouse leads to the execution of the event.
ng-cut Cut operation leads to the execution of the event.
ng-copy Copy operation leads to the execution of the event.
ng-keypress Press of key leads to the execution of the event.
ng-keyup Press of upward arrow key leads to the execution of the event.
ng-keydown Press of downward arrow key leads to the execution of the event.
ng-click Single click leads to the execution of the event.
ng-dblclick: Double click leads to the execution of the event.
ng-blur: Fired when an HTML element loses its focus.
ng-change It is used whenever the value of an input element changes.
ng-focus It is used to apply custom behavior when an element is focused.
ng-paste: It is used to specify custom behavior functions when the text in input fields is pasted into
an HTML element.
ng-mouseleave It is used to apply custom behavior when a mouse-leave event occurs on a specific HTML
element.

Syntax:
<element ng-mousemove="expression"> Contents... </element>
AngularJS Forms
Input Controls
• input elements
• select elements
• button elements
• textarea elements

Input controls provides data-binding by using the ng-model directive.


<input type="text" ng-model="firstname">
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>

It can also be used as:

<form>
First Name: <input type="text" ng-model="firstname">
</form>

<h1>You entered: {{firstname}}</h1>


Validate Data
The following can be used to track error.
• $dirty − states that value has been changed.
• $invalid − states that value entered is invalid.
• $error − states the exact error.
<form name = "studentForm" novalidate>
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input name = "firstname" type = "text" ng-model = "firstName"
required>
<span style = "color:red" ng-show = "studentForm.firstname.$dirty &&
studentForm.firstname.$invalid">
<span ng-show = "studentForm.firstname.$error.required">First Name is
required.
</span>
</span>
</td>
</tr>
Checkbox
• A checkbox has the value true or false. Apply the ng-model directive
to a checkbox, and use its value in your application.

<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>


Radio buttons

<body ng-app="">
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
</body>
Selectbox

<body ng-app="">
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
AngularJS Form Validation

Input fields have the following states:

• $untouched The field has not been touched yet


• $touched The field has been touched
• $pristine The field has not been modified yet
• $dirty The field has been modified
• $invalid The field content is not valid
• $valid The field content is valid
Forms have the following states:

• $pristine No fields have been modified yet


• $dirty One or more have been modified
• $invalid The form content is not valid
• $valid The form content is valid
• $submitted The form is submitted
AngularJS Services

• In AngularJS, a service is a function, or object, that is available for,


and limited to, your AngularJS application.
• Example: $location
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
The $http Service
The service makes a request to the server, and lets your application
handle the response.

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.html").then(function (response) {
$scope.myWelcome = response.data;
});
});
Methods used:
• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()
• var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "welcome.html"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
• The example above executes the $http service with an object as an
argument. The object is specifying the HTTP method, the url, what to do
on success, and what to do on failure.
The $timeout Service

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>
The $interval Service

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
Create Your Own Service

There are two ways to create a service −


• Factory
• Service
Factories are functions that return the object, while
services are constructor functions of the object which are
instantiated with the new keyword.
Using Factory Method

In this method, we first define a factory and then assign method to it.

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


mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
Using Service Method

In this method, we define a service and then assign method to it. We


also inject an already available service to it.

mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
});

You might also like