What is services? How to create services directives in angularjs? how to use it?

What is services? How to create services in angularjs? how to use it?

Hello everyone, I am going  to share the code sample for creating services and calling the services in angular controller.  

The Angular services are objects that provide the way to handle the services communication over the browser(XMLHttpRequest object) using the $http API.


Angular services are used to share the data in the controller, directive, filters etc. over the your apps.

The services are create a  singleton instance and  the services are used within the apps over the name of the service.

The services methods are created using the this keywords and angular module. please see the detail in example.


The example in detail as give below.

The AngularJs code sample

        var baseURL = "http://localhost:9669/";
        var cartURL = "api/AddToCart_API/GetMyCarts/";
        var EmailID = "anil.singh581@gmail.com";
        var app = angular.module('cartOneAp', []);

        //This is services used to call the cast API.
        app.service("myCarts", function ($http) {
            this.getShopingCart = function (urls, EmailID) {
                return $http({
                    method: 'GET',
                    url: baseURL + urls + '/' + EmailID
                });
            };
        });

        //This is base controller used to call the getShopingCart details.
        app.controller('baseController', function ($scope, myCarts) {
            //This is default constant for shoping cart
            $scope.carts = null;
            $scope.email = EmailID;

            //Calling services by baseController
            myCarts.getShopingCart(cartURL, $scope.email).then(function (resp) {
                if (resp !== undefined && resp !== null) {
                    if (resp.data !== undefined && resp.data !== null) {
                        $scope.carts = resp.data;
                        console.log($scope.carts);
                    }
                }
            });
        });

The HTML Code sample as given below.

< div ng-app="cartOneAp">
    <div>
        <div ng-controller="baseController">
            <ul>
                <a href="/Products/Cart/{{ProductID}}"><l>{{ProductName}}}</l></a>
            </ul>
        </div>
    </div>
</ div >

The Full Live (Angular +HTML) code as given below.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script>

        var baseURL = "http://localhost:9669/";
        var cartURL = "api/AddToCart_API/GetMyCarts/";
        var EmailID = "anil.singh581@gmail.com";
        var app = angular.module('cartOneAp', []);

        //This is services used to call the cast API.
        app.service("myCarts", function ($http) {
            this.getShopingCart = function (urls, EmailID) {
                return $http({
                    method: 'GET',
                    url: baseURL + urls + '/' + EmailID
                });
            };
        });

        //This is base controller used to call the getShopingCart details.
        app.controller('baseController', function ($scope, myCarts) {
            //This is default constant for shoping cart
            $scope.carts = null;
            $scope.email = EmailID;

            //Calling services by baseController
            myCarts.getShopingCart(cartURL, $scope.email).then(function (resp) {
                if (resp !== undefined && resp !== null) {
                    if (resp.data !== undefined && resp.data !== null) {
                        $scope.carts = resp.data;
                        console.log($scope.carts);
                    }
                }
            });
            //End : This is for shoping cart
        });
    </script>
</head>

<body ng-app="cartOneAp">
    <div>
        <div ng-controller="baseController">
            <ul>
                <a href="/Products/Cart/{{ProductID}}"><l>{{ProductName}}}</l></a>
            </ul>
        </div>
    </div>
</body>


</html>

The output, go to link http://embed.plnkr.co/BiOow9/preview

Thank you!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^