AngularJS Services (Service)

The service in AngularJS is a function or object.

In AngularJS you can create your own services or use built-in services.

What is a service?

In AngularJS, a service is a function or object that can be used in your AngularJS app.

AngularJS has more than 30 services built into it.

There is $location service that returns the URL address of the current page.

Instance

var app = angular.module( 'myApp' , []);
app.controller( 'customersCtrl' , function ($scope, $location) {
$scope.myUrl = $location.absUrl();
});

Try it out . . .

Note $location service is passed to the controller as a parameter. If you want to use it, you need to define it in controller.

Why use the service?

$http is the most commonly used service in AngularJS applications. The service sends a request to the server, and the application responds to the data transferred by the server.

AngularJS monitors applications and handles event changes all the time, and AngularJS uses $location services better than windows.location objects.

$http service

$http is the most commonly used service in AngularJS applications. The service sends a request to the server, and the application responds to the data transferred by the server.

Instance

Use $http service to request data from the server:

var app = angular.module( 'myApp' , []);
app.controller( 'myCtrl' , function ($scope, $http) {
$http.get( "welcome.htm" ).then( function (response) {
$scope.myWelcome = response.data;
});
});

Try it out . . .

These are a very simple $http service instances, and for more $http service apps, check out the AngularJS Http tutorial.

$timeout service

The AngularJS $timeout corresponds to the JS window.setTimeout function.

Instance

Two seconds later, the message is displayed:

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

Try it out . . .

$interval service

The AngularJS $interval corresponds to the JS window.setInterval function.

Instance

Every second of display information:

var app = angular.module( 'myApp' , []);
app.controller( 'myCtrl' , function ($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval( function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000 );
});

Try it out . . .

Create a custom service

You can create custom access to link to your module:

Create an access named hexafy:

app.service( 'hexafy' , function () {
this.myFunc = function (x) {
return x.toString( 16 );
}
});

To use custom access, you need to add it separately when defining filters:

Instance

Convert a number to a 16-step number using the custom service hexafy:

app.controller( 'myCtrl' , function ($scope, hexafy ) {
$scope.hex = hexafy .myFunc( 255 );
});

Try it out . . .

Filter, use a custom service

When you create a custom service and connect to your app, you can use it in controllers, instructions, filters, or other services.

Use the service hexafy in the filter myFormat :

app.filter( 'myFormat' ,[ 'hexify' , function ( hexify ) {
return function (x) {
return hexify .myFunc(x);
};
}]);

Try it out . . .

You can use filters when getting values in an array of objects:

Create a service hexafy :

< Ul >
< li ng-repeat= "x in counts" > {{x | myFormat}} < /li >
< /ul >

Try it out . . .