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.
The services methods are created using the this keywords and angular module. please see the
detail in example.
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 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>
|
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..
|