Google News
logo
AngularJS Services
In AngularJS you can make your own service, or use one of the many built-in services. AngularJS services are JavaScript functions for specific tasks, which can be reused throughout the 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  :
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Location Service</title>
    <script type="text/javascript" src="../js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
<h4>This is your location (URL) :</h4>
<h3>{{myUrl}}</h3>
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>
 
</body>
</html>
Output :

The AngularJs $location service is passed in to the controller as an argument. In order to use the service in the controller, it must be defined as a dependency.

So many angularjs services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.location object.

The $http Service
The $http service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response.
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS http Service </title>
    <script type="text/javascript" src="../js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<p>$http service message is:</p>
 
<h1>{{myWelcome}}</h1>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome-http.html").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>
 
</body>
</html>
Output :
The $timeout Service
The $timeout service is AngularJS' version of the window.setTimeout function.
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS timeout Service </title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<h4>This header will change after Three seconds :</h4>
 
<h1>{{myHeader}}</h1>
 
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello FTL!";
  $timeout(function () {
      $scope.myHeader = "Welcome to Free Time Learning (www.freetimelearning.com)";
  }, 3000);
});
</script>
 
</body>
</html>
Output : Click here !
The $interval Service
The $interval service is AngularJS' version of the window.setInterval function.
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS interval Service </title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<p>The time is:</p>
<h1>{{theTime}}</h1>
 
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>
 
</body>
</html>
Output :
Custom Service Inside a Filter
To use the service inside a filter, add it as a dependency when defining the filter . The service hexafy used in the filter myFormat :
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Custom Service Inside a Filter</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
<p>Use a filter when displaying the <strong>array [205, 234, 252]</strong> :</p>
 
<ul>
  <li ng-repeat="x in counts" style="font-weight:bold; font-size:20px;">{{x | myFormat}}</li>
</ul>
 
<p>This filter uses a service that converts numbers into <b>hexadecimal</b> values.</p>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
app.controller('myCtrl', function($scope) {
    $scope.counts = [205, 234, 252];
});
</script>
 
</body>
</html>
Output :