Post
Ask Question

What is Services and How to Create Services Directives in AngularJS

The example in detail as give below. 
 
The AngularJs code sample:
  1. var baseURL = "http://localhost:9669/";  
  2. var cartURL = "api/AddToCart_API/GetMyCarts/";  
  3. var EmailID = "[email protected]";  
  4. var app = angular.module('cartOneAp', []);  
  5. //This is services used to call the cast API.  
  6. app.service("myCarts", function($http) {  
  7.     this.getShopingCart = function(urls, EmailID) {  
  8.         return $http({  
  9.             method: 'GET',  
  10.             url: baseURL + urls + '/' + EmailID  
  11.         });  
  12.     };  
  13. });  
  14. //This is base controller used to call the getShopingCart details.  
  15. app.controller('baseController', function($scope, myCarts) {  
  16.     //This is default constant for shoping cart  
  17.     $scope.carts = null;  
  18.     $scope.email = EmailID;  
  19.     //Calling services by baseController  
  20.     myCarts.getShopingCart(cartURL, $scope.email).then(function(resp) {  
  21.         if (resp !== undefined && resp !== null) {  
  22.             if (resp.data !== undefined && resp.data !== null) {  
  23.                 $scope.carts = resp.data;  
  24.                 console.log($scope.carts);  
  25.             }  
  26.         }  
  27.     });  
  28. });  
The HTML Code sample as given below:
  1. < div ng-app="cartOneAp">  
  2. <div>  
  3.     <div ng-controller="baseController">  
  4.         <ul>  
  5.             <a href="/Products/Cart/{{ProductID}}">  
  6.                 <l>{{ProductName}}}</l>  
  7.             </a>  
  8.         </ul>  
  9.     </div>  
  10. </div>undefined</ div >  
The Full Live (Angular +HTML) code as given below:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <link rel="stylesheet" href="style.css">  
  5.             <script src="https://code.angularjs.org/1.3.14/angular.js"></script>  
  6.             <script>  
  7. var baseURL = "http://localhost:9669/";  
  8. var cartURL = "api/AddToCart_API/GetMyCarts/";  
  9. var EmailID = "[email protected]";  
  10. var app = angular.module('cartOneAp', []);  
  11. //This is services used to call the cast API.  
  12. app.service("myCarts", function ($http) {  
  13. this.getShopingCart = function (urls, EmailID) {  
  14. return $http({  
  15. method: 'GET',  
  16. url: baseURL + urls + '/' + EmailID  
  17. });  
  18. };  
  19. });  
  20. //This is base controller used to call the getShopingCart details.  
  21. app.controller('baseController', function ($scope, myCarts) {  
  22. //This is default constant for shoping cart  
  23. $scope.carts = null;  
  24. $scope.email = EmailID;  
  25. //Calling services by baseController  
  26. myCarts.getShopingCart(cartURL, $scope.email).then(function (resp) {  
  27. if (resp !== undefined && resp !== null) {  
  28. if (resp.data !== undefined && resp.data !== null) {  
  29. $scope.carts = resp.data;  
  30. console.log($scope.carts);  
  31. }  
  32. }  
  33. });  
  34. //End : This is for shoping cart  
  35. });  
  36. </script>  
  37.         </head>  
  38.         <body ng-app="cartOneAp">  
  39.             <div>  
  40.                 <div ng-controller="baseController">  
  41.                     <ul>  
  42.                         <a href="/Products/Cart/{{ProductID}}">  
  43.                             <l>{{ProductName}}}</l>  
  44.                        </a>  
  45.                    </ul>  
  46.               </div>  
  47.          </div>  
  48.      </body>  
  49. </html>