What is services in AngularJs?
AngularJs
services are function which use to handle the server communication over the
browser with help of XMLHttpRequest object and $http.
Also
used to share the data and its behaviors in the controller, directive, filters
and other services over the your apps.
It
create the singleton instance over the angular apps and call the services using
the service name in the controller.
How to create services?
There
are different way to create the services. The services methods are creating
using this keyword and the angular module for more
detail you can seen the below example.
var app = angular.module('appServices', []);
app.service('angularServices',
function ($http) {
this.getUser = function () {
return $http({
method: 'GET',
url: baseURL
});
}
});
OR
app.service('angularServices', getUser);
var
getUser = function (baseURL) {
return $http({
method: 'GET',
url: baseURL
});
};
How to use it?
I am
going to use the services over the services name in the controller as given
below
app.controller
("angularController", function ($scope, angularServices) {
$scope.users = null;
//Call
the services using the services name "angularServices".
angularServices.getUser(baseURL).then(function (data) {
if
(data !== undefined) {
console.log(data);
$scope.users = data;
}
});
});
The above
we can seen the "angularServices" is the name of angular services and call in "angularController". After success
the call, we get the response and assign in the users collection.
The example in detail over
the creating and using the services as give below.
The
AngularJs code sample
var
app = angular.module('appServices',
[]);
app.service('angularServices',
function ($http) {
this.getUser
= function (baseURL) {
return $http({
method: 'GET',
url: baseURL
});
}
});
app.controller("angularController",
function ($scope, angularServices) {
var
baseURL = "http://localhost:9669/";
$scope.users = [{
UserID: 1,
UserName: 'Anil Singh',
UserEmailID: 'anil@gmail.com',
UserAddress: 'Noida, India'
}, {
UserID: 2,
UserName: 'Sunil Singh',
UserEmailID: 'sunil@gmail.com',
UserAddress: 'Noida, India'
}, {
UserID: 3,
UserName: 'Sushil Singh',
UserEmailID: 'sushil@gmail.com',
UserAddress: 'Noida, India'
}];
//Call the services using the
services name "angularServices".
angularServices.getUser(baseURL).then(function (data) {
if
(data !== undefined) {
console.log(data);
$scope.users =
JSON.stringfy(data);
}
});
});
The
HTML Code sample as given below.
<div ng-app="appServices">
<div ng-controller="angularController">
<div>
<h1>Users Detail</h1>
</div>
<div ng-repeat="user in users">
<div>UserID : {{user.UserID}}</div>
<div>UserName: {{user.UserName}}</div>
<div>UserEmail: {{user.UserEmailID}}</div>
<div>UserAddress: {{user.UserAddress}}</div>
<ul></ul>
</div>
</div>
</div
>
The
Full Live (Angular +HTML) code as given below.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script>
var app = angular.module('appServices', []);
app.service('angularServices',
function ($http) {
this.getUser
= function (baseURL) {
return $http({
method: 'GET',
url: baseURL
});
}
});
app.controller("angularController",
function ($scope, angularServices) {
var
baseURL = "http://localhost:9669/";
$scope.users = [{
UserID: 1,
UserName: 'Anil Singh',
UserEmailID: 'anil@gmail.com',
UserAddress: 'Noida, India'
}, {
UserID: 2,
UserName: 'Sunil Singh',
UserEmailID: 'sunil@gmail.com',
UserAddress: 'Noida, India'
}, {
UserID: 3,
UserName: 'Sushil Singh',
UserEmailID: 'sushil@gmail.com',
UserAddress: 'Noida, India'
}];
//Call the services using the services
name "angularServices".
angularServices.getUser(baseURL).then(function (data) {
if
(data !== undefined) {
console.log(data);
$scope.users =
JSON.stringfy(data);
}
});
});
</script>
</head>
<body ng-app="appServices">
<div ng-controller="angularController">
<div>
<h1>Users Detail</h1>
</div>
<div ng-repeat="user in users">
<div>UserID : {{user.UserID}}</div>
<div>UserName: {{user.UserName}}</div>
<div>UserEmail: {{user.UserEmailID}}</div>
<div>UserAddress: {{user.UserAddress}}</div>
<ul></ul>
</div>
</div>
</body>
</html>
The
output go to link http://embed.plnkr.co/DFf0oa/preview
Here is an example for wring
a services that handles GET, PUT, POST, and DELETE calls to API service as
given below.
var app = angular.module('appServices', []);
app.service('angularServices',
function ($http) {
//get
user API call
this.getUser = function (baseurl, id) {
return $http.get(baseurl + '/' + id);
};
//Add user API call
this.insertUser = function (baseurl, user) {
return $http.post(baseurl, user);
};
//Update user API call
this.updateUser = function (baseurl, user) {
return $http.put(baseurl, user);
};
//Delete user API call
this.deleteUser = function (baseurl, id) {
return $http.delete(baseurl + '/' + id);
};
});
app.controller("angularController",
function ($scope, angularServices) {
var baseURL = "http://localhost:9669/";
//Call
the services using the services name "angularServices".
//Call
the get user services.
angularServices.getUser(baseURL +'api/GetUser',
'001').then(function (data) {
if
(data !== undefined) {
console.log(data);
//TODO
}
});
var user ={id:1, name:'anil', age:29};
//Call the update user services.
angularServices.updateUser(baseURL +'api/UpdateUser', user).then(function (data) {
if
(data !== undefined) {
console.log(data);
//TODO
}
});
//Call the add user services.
angularServices.insertUser(baseURL +'api/AddUser', user).then(function (data) {
if
(data !== undefined) {
console.log(data);
//TODO
}
});
//Call the delete user services.
angularServices.deleteUser(baseURL +'api/DeleteUser', '001').then(function (data) {
if
(data !== undefined) {
console.log(data);
//TODO
}
});
});
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
Blogger Comment
Facebook Comment