AngularJS Services

In AngularJS, you can create your own services or use one of the many built-in services.

What are services?

In AngularJS, services are functions or objects that can be used and are limited to your AngularJS application.

AngularJS has about 30 built-in services. One of them is $location services.

$location The service has methods that can return information about the current page location:

Example

Using $location service in the controller:

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

Try It Yourself

Please note that,$location Services are passed as parameters to controllers. To use the service in a controller, it must be defined as a dependency.

Why use services?

For many services, such as $location services, you can seemingly use objects that already exist in the DOM (for example window.location object），but it will have some limitations, at least for your AngularJS application.

AngularJS constantly monitors your application, and it prefers that you use $location service instead of the window.location object.

$http service

$http The service is one of the most commonly used services in AngularJS applications. It sends requests to the server and allows your application to handle the responses.

Example

Request data from the server using the $http service:

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

Try It Yourself

This example demonstrates $http The very simple usage of the service. For more information about the $http service, please refer to the AngularJS Http tutorial.

$timeout service

$timeout The service is the AngularJS version of window.setTimeout function.

Example

Display a new 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);
});

Try It Yourself

$interval service

$interval The service is the AngularJS version of window.setInterval function.

Example

Display the time 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);
});

Try It Yourself

Create your own service

To create your own service, connect the service to the module:

Create a named hexafy service:

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

To use your custom service, add it as a dependency when defining the controller:

Example

Use a custom service named hexafy to convert numbers to hexadecimal numbers:

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

Try It Yourself

Using Custom Services in Filters

After creating the service and connecting it to your application, you can use this service in any controller, directive, filter, or even other services.

To use a service in a filter, add it as a dependency when defining the filter:

Service used in the filter myFormat: hexafy

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

Try It Yourself

You can use this filter to display values in objects or arrays:

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

Try It Yourself