Angular Services

AngularJS Services

---

In AngularJS y'all tin brand your ain service, or utilization i of the many built-in services.

---

What is a Service?

In AngularJS, a service is a function, or object, that is available for, in addition to express to, your AngularJS application.
AngularJS has virtually thirty built-in services. One of them is the $location service.
The $location service has methods which furnish information virtually the place of the electrical current spider web page:

Example

Use the $location service inwards a controller:

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

Note that the $location service is passed inwards to the controller equally an argument. In guild to utilization the service inwards the controller, it must last defined equally a dependency.

---

Why utilization Services?

For many services, similar the $location service, it seems similar y'all could utilization objects that are already inwards the DOM, similar the window.location object, in addition to y'all could, exactly it would convey roughly limitations, at to the lowest degree for your AngularJS application.
AngularJS constantly supervises your application, in addition to for it to grip changes in addition to events properly, AngularJS prefers that y'all utilization the $location service instead of the window.location object.

---

The $http Service

The $http service is i of the most mutual used services inwards AngularJS applications. The service makes a asking to the server, in addition to lets your application grip the response.

Example

Use the $http service to asking information 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 trial demonstrates a really unproblematic utilization of the $http service. Learn to a greater extent than virtually the $http service inwards the AngularJS Http Tutorial.

---

The $timeout Service

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

Example

Display a novel message later 2 seconds:

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

---

The $interval Service

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

Example

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

---

Create Your Own Service

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

Create a service named hexafy:

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

To utilization your custom made service, add together it equally a dependency when defining the controller:

Example

Use the custom made service named hexafy to convert a let on into a hexadecimal number:

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

---

Use a Custom Service Inside a Filter

Once y'all convey created a service, in addition to connected it to your application, y'all tin utilization the service inwards whatsoever controller, directive, filter, or fifty-fifty within other services.
To utilization the service within a filter, add together it equally a dependency when defining the filter:

The service hexafy used inwards the filter myFormat:

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

You tin utilization the filter when displaying values from an object, or an array:

Create a service named hexafy:

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

---