python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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 = "[email protected]";
        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 = "[email protected]";
        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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions