What is Services and How to Create Services Directives in AngularJS

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);
            }
        }
    });
});

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

<!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>