Service

AngularJS services are JavaScript functions for specific tasks, which can be reused throughout the application.
Note:-AngularJS built-in services starts with $, same as other built-in objects.
AngularJS includes services for different purposes. For example, $http service can be used to send an AJAX request to the remote server. AngularJS also allows you to create custom service for your application.
Most AngularJS services interact with the controller, model or custom directives. However, some services interact with view (UI) also for UI specific tasks.

The following table lists all the built-in AngularJS services.


$anchorScroll

$exceptionHandler

$interval

$rootScope

$animate

$filter

$locale

$sceDelegate

$cacheFactory

$httpParamSerializer

$location

$sce

$templateCache

$httpParamSerializerJQLike

$log

$templateRequest

$compile

$http

$parse

$timeout

$controller

$httpBackend

$q

$window

$document

$interpolate

$rootElement

 

What is a Service?

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.
AngularJS has about 30 built-in services. One of them is the $location service.
The $location service has methods which return information about the location of the current web page:
Use the $location service in a controller:
<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>The url of this page is:</p>
<h3>{{myUrl}}</h3>
</div>

<p>This example uses the built-in $location service to get the absolute url of the page.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>

Why use Services?

For many services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.location object, and you could, but it would have some limitations, at least for your AngularJS application.
AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location service instead of the window.location object.

$http Service:

The $http service is used to send or receive data from the remote server using browser's XMLHttpRequest or JSONP.
$http is a service as an object. It includes following shortcut methods.


Method

Description

$http.get()

Perform Http GET request.

$http.head()

Perform Http HEAD request.

$http.post()

Perform Http POST request.

$http.put()

Perform Http PUT request.

$http.delete()

Perform Http DELETE request.

$http.jsonp()

Perform Http JSONP request.

$http.patch()

Perform Http PATCH request.

Let's look at some of the important methods of $http.

$http.get():

$http.get() method sends http GET request to the remote server and retrieves the data.
Signature: HttpPromise $http.get(url)
$http.get() method returns HttpPromise object, which includes various methods to process the response of http GET request.
The following example demonstrates the use of $http service in a controller to send HTTP GET request.
Example: $http.get()
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app ="myApp">
<div>
<div ng-controller="myController">
Response Data: {{data}} <br />
Error: {{error}}
</div>
</div>
<script>
var myApp = angular.module('myApp', []);

        myApp.controller("myController", function ($scope, $http) {

var onSuccess = function (data, status, headers, config) {
$scope.data = data;
};

            var onError = function (data, status, headers, config) {
$scope.error = status;
}

var promise = $http.get("filter.html");

promise.success(onSuccess);
promise.error(onError);

});
</script>
</body>
</html>

In the above example, 'myController' controller includes $http parameter, so that it can be used to send GET request. AngularJS automatically injects $scope parameter at runtime. The $http.get() method returns HttpPromise which includes methods like success() and error(). The success() method registers a callback method which is called when a request completes successfully. The error() method registers a callback method which is called when a request fails and returns an error.

The onSuccess() method above, attaches the response data to the $scope. The onError() method attaches status property to the $scope. These methods can be called in chain, as shown below.
Example: $http.get()
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<h1>AngularJS $http.get() Demo: </h1>
<div>
<div ng-controller="myController">
Response Data: {{data}} <br />
Error: {{error}}
</div>
</div>
<script>
var myApp = angular.module('myApp', []);

myApp.controller("myController", function ($scope, $http) {

var onSuccess = function (data, status, headers, config) {
$scope.data = data;
};

            var onError = function (data, status, headers, config) {
$scope.error = status;
}

var promise = $http.get("/demo/getdata").success(onSuccess).error(onError);

});
</script>
</body>
</html>

$http.post:

The $http.post() method sends Http POST request to the remote server to submit and retrieve the data.
Signature: HttpPromise $http.post(url, dataToSubmit);
The following example demonstrates $http.post() method.
<!DOCTYPE html>
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Response Data: {{data}} <br />
Error: {{error}}
</div>
<script>
var myApp = angular.module('myApp', []);

myApp.controller("myController", function ($scope, $http) {

var onSuccess = function (data, status, headers, config) {
$scope.data = data;
};

            var onError = function (data, status, headers, config) {
$scope.error = status;
}

$http.post('/demo/submitData', { myData: 'Hello World!' })
.success(onSuccess)
.error(onError);

});
</script>
</body>
</html>

$http():

You can use construction function of $http service to perform http request, as shown below.

<html >
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Response Data: {{data}} <br />
Error: {{error}}

</div>
<script>
var myApp = angular.module('myApp', []);

myApp.controller("myController", function ($scope, $http) {

var onSuccess = function (data, status, headers, config) {
$scope.data = data;
};

            var onError = function (data, status, headers, config) {
$scope.error = status;
}

var getReq = {
method: 'GET',
url: '/demo/getdata'
};

$http(getReq).success(onSuccess).error(onError);

            var postReq = {
method: 'POST',
url: '/demo/submitData',
data: { myData: 'test data' }
};

            $http(postReq).success(onSuccess).error(onError);

});
</script>

</body>
</html>

 

 

For
More Explanation
&
Online Classes

Contact Us:
+919885348743