AngularJS Services

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 is available for use within your AngularJS application.

AngularJS has more than 30 built-in services.

There is a $location service, which returns the URL of the current page.

Example

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

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

Why use Services?

Many services, like the $location service, use objects that already exist in the DOM, like the window.location object, but the window.location object has limitations within an AngularJS application.

AngularJS continuously monitors the application, handling change events, and using the $location service is better than using the window.location object.

$location vs window.location

$http Service

The $http service is one of the most commonly used services in AngularJS applications. It sends requests to the server and responds to the data sent by the server.

Example

Using the $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;
    });
});

This is a simple example of the $http service. For more $http service applications, see the AngularJS Http Tutorial.

$timeout Service

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

Example

Display a message after two seconds:

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

$interval Service

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

Example

Display a message every second:

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

Creating Custom Services

You can create custom services and link them to your module:

Create a service named hexafy:

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

To use a custom service, you need to add it independently when defining the controller, setting the dependency:

Example

Use the custom service hexafy to convert a number to a hexadecimal number:

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

Using Custom Services in Filters

Once you have created a custom service and connected it to your application, you can use it in controllers, directives, filters, or other services.

Use the service hexafy in the filter myFormat:

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

You can use the filter when getting values from an array of objects:

Create the service hexafy:

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