what and how to use AngularJS Services

AngularJS Services

AngularJS Services are singleton object that is used to persist and share data between Controllers and perform specific task.  It is separate entity that is easily maintainable and testable.

Angular Services follow SRP principle (Single Responsibility Principle) and are bind together using dependency injection (DI).

SRP principle ensures that each object will have only one responsibility.

AngularJS in-built Services

AngularJS provides many in-built services and services start with a $ symbol.

Following are the most used services:

-$http

-$location

-$interval

-$timeout

-$filter

$http: - $http service is used for Ajax calls to get data from server or post data to server.

The below example will demonstrate you to use $http in AngularJS.

Example:

<script>

        var myApp = angular.module('myApp', []);

        myApp.controller('EmpController', function ($scope, $http) {

            // the $http service is called to get the data. you need to pass api url to get the data

            $http.get("url/Employeelist")

            .then(function(response) {

                $scope.students = response.data;

            });

        });

</script>

$interval:- $interval service is same as setInterval() method in JavaScript.

The specified function will execute on every specified time interval by using this service.

The below example will demonstrate you to use $interval in AngularJS.

Example:

<script>

    var myApp = angular.module('myApp', []);

        app.controller('EmpController', function ($scope, $interval) {

            $scope.count = 0;

            $scope.counter = function() {

                $scope.count += 1;

            };

            $interval(function() {

                $scope.counter();

            }, 5000);

        });

</script>

$location:- The $location service exposes the current URL in the address bar. It use "window.location" in base and make URL available to our application. Any Changes made to the URL are also reflected into $location.

Following are the URL object as a set of methods

$location.url ():-  this is RW (read/write) method. It read and returns URL of address bar when you are called without parameter. AngularJS try to change the address of browser when you pass the parameter.

The below example will demonstrate you to use $location.url () in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $location) {

        $scope.currentURL = $location.url();

        });

</script>

$location.absUrl(): - This method is use to get the full url path with all segments. it is  read only method.

The below example will demonstrate you to use $location.absUrl() in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $location) {

        $scope.AbsoluteURL = $location.absUrl();

        });

</script>

$location.protocol(): - This method is used to get the protocol (http, https) of current url. It is also read only method.

The below example will demonstrate you to use $location.protocol() in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $location) {

        $scope.protocol = $location.protocol();

        });

</script>

$location.port():
this method is used to get the port number in which application is running. It is read only method

The below example will demonstrate you to use $location.port() in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $location) {

        $scope.PortNumber = $location.port();

        });

</script>

$location.path():- This is RW (read/write) method. It has optional parameter. If you are calling without parameter, it returns current url of address bar. It change path when you are calling this url as a parameter.

It should always start with forward slash (/)

The below example will demonstrate you to use $location.path() in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $location) {

        $scope.path = $location.path();

        });

</script>

$location.search():- This is RW (read/write) method. It has optional parameter. When called without parameter, It will returns search part of current URL as object. When call with parameter, It will change search part with parameter and return $location object.

The below example will demonstrate you to use $location.search() in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $location) {

        $scope.currentSearch = $location.search();

        $scope.newValue = function () {

            $location.search("name", "codeview");

            $scope.changeSearchValue = $location.search();

        }

        });

</script>

$location.hash(): - This is RW (read/write) method. It has optional parameter.

When called without parameter, it returns hash part of current url.

When call with parameter, It change hash part with parameter and return $location object

The below example will demonstrate you to use $location.hash() in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $location) {

        $scope.currentHash = $location.hash();

        $scope.NewHashValue = function () {

            $location.hash("codeviewHash");

            $scope.changeHashValue = $location.hash();

        }

        });

</script>

$location.host(): - this method is used to get the host name with port number of current url. It is also read only method.

The below example will demonstrate you to use $location.host() in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $location) {

        $scope.host = $location.host();

        });

</script>

$filter:-  AngularJS Filters is used to format the value for display to the end users.

The below example will demonstrate you to use $filter in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $filter) {

        $scope.WecomeMessage = "welcome to code-view.com !";

        $scope.filteredMessage = $filter('uppercase')($scope.WecomeMessage);

        });

</script>

$timeout: - AngularJS $timeout service is same as setTimeout() function in JavaScript.

You can set time delay to execute functions based on your requirements.

Below example will demonstrate you to use $timeout service in AngularJS.

<script>

    var myApp = angular.module('myApp', []);

    app.controller('EmpController', function ($scope, $filter) {

        $timeout(function () {

            $scope.WecomeMessage = "welcome to code-view.com !";

        }, 3000);

    });

</script>