AngularJS Service
AngularJS support several kind of service .Service are Javascript functions that do some specific works .The service are unique function and can be test separately . Services are normally injected using dependency injection mechanism . AngularJS contain more than 30 inbuilt service and you can build your own service also.Service always starts with $ prefix .Below are the list of inbuilt service of AngularJS.
Out of 30 inbuilt service , we are discussing here some of the service application.
$http : $http send request to the remote server and handle the response data.The response from server is managed with several properties.
.data : response object ,array,string from server.
.status : HTTP status a number.
.statusText : HTTP status defining string.
myHtmlPage.htm
Thanks ,for comming here
Output :
Thanks ,for comming here
$interval : $interval is same like window.setInterval of Javascript.
Ouput :
*
Ouput :
**
Ouput :
***
$log : Writes the message into the browser's console.This service is to simplify debugging and troubleshooting.This service has several method .
log: call when to write a log message
info:call when to write an information message
warn:call when to write a warning message
error:call when to write an error message
debug:call when to write a debug message
To see the output , press F12 and goto console,you will see the message
Example
$window : An object reference to the browser's window object. AngularJS we always refer to it through the $window service.$window can be override , easily test,alert .prompt can be generated.
Example
Example
Example
AngularJS support several kind of service .Service are Javascript functions that do some specific works .The service are unique function and can be test separately . Services are normally injected using dependency injection mechanism . AngularJS contain more than 30 inbuilt service and you can build your own service also.Service always starts with $ prefix .Below are the list of inbuilt service of AngularJS.
| List of Service | ||
|---|---|---|
| $anchorScroll | $animate | $animateCss |
| $cacheFactory | $templateCache | $compile |
| $controller | $document | $exceptionHandler |
| $filter | $httpParamSerializer | $httpParamSerializerJQLike |
| $http | $xhrFactory | $httpBackend |
| $interpolate | $interval | $jsonpCallbacks |
| $locale | $location | $log |
| $parse | $q | $rootElement |
| $rootScope | $sceDelegate | $sce |
| $templateRequest | $timeout | $window |
Out of 30 inbuilt service , we are discussing here some of the service application.
$http : $http send request to the remote server and handle the response data.The response from server is managed with several properties.
.data : response object ,array,string from server.
.status : HTTP status a number.
.statusText : HTTP status defining string.
<div
style="background-color:
#EAEAEA;">
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
</head>
<script>
var
app = angular.module('myApp',
[]);
app.controller('myControl',
function
($scope, $http)
{
$http.get("myHtmlPage.htm").then(function
(response)
{
$scope.data
= response.data;
});
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myControl">
{{data}}
</div>
</div>
myHtmlPage.htm
Thanks ,for comming here
Output :
Thanks ,for comming here
$interval : $interval is same like window.setInterval of Javascript.
The function execute every
Example
delay milliseconds.$interval can be cancelled by "cancel" method . $interval.cancel() stop interval counting.Example
<div
style="background-color:
#EAEAEA;">
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module('myApp',
[]);
app.controller('myControl',
function
($scope, $interval)
{
$scope.data
= '';
$interval(function
() {
$scope.data
= $scope.data + '*';
},
1000);
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myControl">
{{data}}
</div>
</div>
*
Ouput :
**
Ouput :
***
$log : Writes the message into the browser's console.This service is to simplify debugging and troubleshooting.This service has several method .
log: call when to write a log message
info:call when to write an information message
warn:call when to write a warning message
error:call when to write an error message
debug:call when to write a debug message
To see the output , press F12 and goto console,you will see the message
Example
<div
style="background-color:
#EAEAEA;">
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
myApp = angular.module('myApp',
[]);
myApp.controller("myControl",
function
($log)
{
$log.log('This
is log.');
$log.error('This
is error.');
$log.info('This
is info.');
$log.warn('This
is warning.');
$log.debug('This
is debugging.');
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myControl">
Press
F12 ,Go to Console.
</div>
</div>
Output :
$window : An object reference to the browser's window object. AngularJS we always refer to it through the $window service.$window can be override , easily test,alert .prompt can be generated.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myCtroller",
function
($scope, $window)
{
$scope.ShwoMessage
= function
()
{
$scope.message
= '';
$scope.message
= $scope.DelIndex;
$window.alert($scope.message);
}
$scope.ShwoPrompt
= function
()
{
$scope.msg
= '';
$scope.msg
= $scope.DelIndex;
var
name = $window.prompt($scope.msg);
}
});
</script>
<div
ng-app="myApp"
ng-controller="myCtroller"
>
<input
type="text"
ng-model="DelIndex">
<button
type="button"
ng-click="ShwoMessage()">
Show
Message</button>
<button
type="button"
ng-click="ShwoPrompt()">
Show
Prompt</button>
</div>
Output :
$filter: AngularJS filters are used for formatting data displayed
in the HTML.
in the HTML.
Example
<!doctype
html>
<html
lang="en">
<head>
<script
src="//code.angularjs.org/1.6.10/angular.min.js"></script>
</head>
<script>
angular.module('myApp',
[])
.controller('myController',
function
($scope, $filter)
{
$scope.country
= "This
is a test";
$scope.filteredText
= $filter('uppercase')($scope.country);
});
</script>
<body
ng-app="myApp">
<div
ng-controller="myController">
<span>{{filteredText}}</span><br>
</div>
</body>
</html>
Output :
THIS IS A TEST
$locale : This service provides localization for AngularJS components.AngularJS we always refer to it through the $locale service.
Example
<!doctype
html>
<html
lang="en">
<head>
<script
src="//code.angularjs.org/1.6.10/angular.min.js"></script>
</head>
<script>
var
app=angular.module('myApp',
[])
.controller('myController',
function
($scope, $locale)
{
$scope.localeId
= $locale.id;
$scope.CurrentTimeStap
= new
Date();
});
</script>
<body
ng-app="myApp">
<div
ng-controller="myController">
<span>{{CurrentTimeStap}}</span><br>
</div>
</body>
</html>
Ouput :
"2018-04-19T10:30:53.438Z"
"2018-04-19T10:30:53.438Z"
$rootScope : An application has a single root scope ,Other scopes are descendant scopes of the root scope.Object added in root scope will available to all descendant scopes.AngularJS we always refer to it through the $rootScope service.
Example
<!doctype
html>
<html
lang="en">
<head>
<script
src="//code.angularjs.org/1.6.10/angular.min.js"></script>
</head>
<script>
angular.module('myApp',
[]).controller('myController1',
function
($scope, $rootScope)
{
$rootScope.myValue
= "Hello
!";
});
angular.module('myApp').controller('myController2',
function
($scope, $rootScope) {
$rootScope.myValue
= $rootScope.myValue + "
I am learing";
});
angular.module('myApp').controller('myController3',
function
($scope, $rootScope) {
$scope.myValue
= $rootScope.myValue + "
AngularJS";
});
</script>
<body
ng-app="myApp">
<div
ng-controller="myController1">
</div>
<div
ng-controller="myController2"></div>
<div
ng-controller="myController3">
<span>{{myValue}}</span><br>
</div>
</body>
</html>
Ouput :
Hello ! I am learing AngularJS
