LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Services


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


What is service?

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

AngularJS has more than 30 services built in.

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

Example

Use the $location service in a controller:

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

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


Why use Services?

In many services, such as the $ location service, it can use objects that exist in the DOM, similar to the window.location object, but the window.location object has certain limitations in AngularJS applications.

AngularJS constantly monitors the application and handles event changes. AngularJS uses $ location Services are better than using window.location objects.


The $http Service

The $http service is a standout amongst the most widely recognized utilized service in AngularJS applications. The service makes a demand to the server, and lets your application handle the response.

Example

Use the $http service to ask for information from the server:

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

The above is a very simple $ http service example. For more $ http service applications, please see the AngularJS Http tutorial.


The $timeout Service

AngularJS $timeout Service corresponds to JS window.setTimeout function.

Example

Display another message after two seconds:

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

The $interval Service

AngularJS $interval Service corresponds JS window.setInterval function.

Example

Show information every second:

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

Create Your Own Service

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

Create an service named hexafy:

app.service('hexafy', function() {
    this.myFunc = d (x) {
        return x.toString(16);
    }
});
Try it Yourself »

To use custom services, you need to add them separately when defining the controller and set the dependencies:

Example

Convert a number to a hexadecimal number using the custom service hexafy:

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

Use a Custom Service Inside a Filter

Once you have made an service , and associated it to your application, you can utilize the service in any controller, order, channel, or even inside other services.

To utilize the service inside a channel, include it as a reliance when characterizing the filter:

After you create a custom service and connect it to your application, you can use it in controllers, directives, filters, or other services.

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

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

Create an service named hexafy:

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