AngularJS Services ($http, Custom Services) with Example

Here we will learn services in angularjs with examples, custom service in angularjs and use of services in angularjs and how to create and use custom services and built in services ($http, $location, $interval, etc...) in angularjs applications with example.

What is Service in AngularJs? 

In angularjs, service is the function which is used to handle the server communication over the browser with help of XMLHttpRequest object and $http.

 

In angularjs, we have a 30 built in services like $http, $location, $timeout, $interval, etc… and these are used to share the data and its behaviours in the controller, directive, filters and other services over the apps. In angularjs we can create our own custom services also based on our requirement.

 

In angularjs, service will create singleton instance over the angular apps and call the services using the service name in the controller.

 

We will see how to use services in angularjs applications with examples.

AngularJS $http Service

In angularjs, $http is the most common service which is used in angularjs applications. By using $http service we can communicate with remote HTTP servers over the browser with the help of XMLHttpRequest object.

 

In $http service, we have a different methods available those are $http.get, $http.post, $http.put, $http.delete, etc. We will learn all these methods in-detail in next chapters.

 

Here we will see general usage of $http service in angularjs applications.

Syntax of using AngularJS $http Service

Generally the syntax of using $http service in angularjs applications will be like as shown following 

 

var app = angular.module('serviceApp', []);

app.controller('serviceCtrl', function ($scope, $http) {

// Simple GET request example:

$http({

method: 'GET',

url: '/sampleUrl'

}).then(function success(response) {

// this function will be called when the request is success

}, function error(response) {

// this function will be called when the request returned error status

});

});

If you observe above syntax, we passed $http as argument to the controller. To use service in controller we need to pass $http as an argument. We will see how to use $http request with simple example.

AngularJS $http Service Example

Following is the example of using $http service in angularjs applications with get method.

 

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs $http Service Example

</title>

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

<script type="text/javascript">

var app = angular.module('serviceApp', []);

app.controller('serviceCtrl', function ($scope, $http) {

$http({

method: 'GET',

url: 'sample.html'

}).then(function success(response) {

$scope.myWelcome = response.data;

}, function error(response) {

});

});

</script>

</head>

<body>

<div ng-app="serviceApp" ng-controller="serviceCtrl">

<p>Hi, Guest</p>

<h1>{{myWelcome}}</h1>

</div>

</body>

</html>

If you observe above code we mentioned ‘sample.html’ for url property in $http service. For that create one html file in your application and give name as ‘sample.html’. 

 

Now open ‘sample.html’ file and remove complete default code from the file and write the code like as shown below

 

Welcome to Tutlane.com

Now run the application and verify the output that will be like as shown following

Output of AngularJS $http Service Example

Following is the result of $http service example in angularjs

 

Hi, Guest

Welcome to Tutlane.com

Is it possible to create custom service in angularjs?

For this question answer is YES we can create our own service and use it in our angularjs applications based on our requirements.

AngularJS Create Custom Service

To create our own service first we need to create angularjs module then connect our custom service to angular module like as shown below.

 

var app = angular.module('appServices', []);

app.service('angularServices', function ($http) {

this.squareofnumber = function (x) {

return x * x;

}

});

How to use created custom service?

To use our custom made service in application we need to pass it as dependency to controller like as shown below

 

app.controller("angularController", function ($scope, angularServices) {

$scope.getresult = angularServices.squareofnumber(10);

});

The "angularServices" is the name of angular custom service and call in "angularController". Here when we pass value to custom service it will result from custom service method. We will see complete example of custom service in angularjs.

AngularJS Custom Service Example

Following is the example of creating custom service and use it in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Custom Service Example

</title>

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

<script type="text/javascript">

var app = angular.module('appServices', []);

app.service('angularServices', function ($http) {

this.squareofnumber = function (x) {

return x * x;

}

});

app.controller("angularController", function ($scope, angularServices) {

$scope.getresult = angularServices.squareofnumber(10);

});

</script>

</head>

<body ng-app="appServices">

<div ng-controller="angularController">

<p>AngularJS Custom Service Example</p>

Square of Number 10 : <b>{{getresult}}</b>

</div>

</body>

</html>

If you observe above code we created custom service “angularServices” and calling custom service method “squareofnumber” from controller “angularController”. Now we will run and see the output.

Output of AngularJS Custom Service Example

Following is the result of using custom service in angularjs.

 

AngularJS Custom Service Example

 

Square of Number 10 : 100

This is how we can use built in services and custom services in angularjs applications. We will learn more about built in services in next chapters.