When we write code inside of a controller then we need to fetch data from web server and web server might need to talk to SQL database or XML files on desk and get back data from server in order to communicate to the server and it’s a job of $http service available in AngularJS. $http service is a build-in service that AngularJS provided and it’s just an Object with method we use to call http calls.
$http service provides methods like get(), post(), delete(), put(). Get method is used commonly to read data from the server where post(), put() and delete() methods used to modified data on server.
How to access $http service ?
Just like $scope we can pass $http to controller. Once you have $http inside your controller then you can use methods like $http.get(), $http.post() to communicate with webserver.
Remember, when you can of the $http service methods it doesn’t return the response immediately because it’s an asynchronous call to server. It rather returns a promise object. A promise object is an object which promises you to return the data in future. Data return by the promise will be a data that you need or some error. This promise has a then() method which will take a function as argument and call then function in future. The then() method call my function when the data is ready and pass the data into my function as a parameter.
|
1
2
3
4
5
6
7
|
var app = angular.module(“app”, []);
app.controller(“HelloController”, function($scope, $http) {
var promise = $http.get(“your/server/url”);
promise.then(function(response) {
$scope.data = response.data;
});
});
|
AngularJS will invoke then(function(){}) when the response is successful. If there is an error then you can pass a second parameter to then() which will be invoked when an error occur. Following is a code snippet for both success and error condition.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var app = angular.module(“app”, []);
app.controller(“HelloController”, function($scope, $http) {
var onSuccess = function(response) {
$scope.data = response.data;
};
var onError = function(response) {
$scope.error = “Unable to find the record.”;
};
var promise = $http.get(“your/server/url”);
promise.then(onSuccess, onError);
});
|
Another way to use $http service is calling success(), error() functions on promise. Following code snippet will demonstrate this approach.
|
1
2
3
4
5
6
7
8
9
10
11
|
var app = angular.module(“app”, []);
app.controller(“HelloController”, function($scope, $http) {
$http.get(“php/user_details.php”)
.success(function(data, status, headers, config) {
$scope.user = data;
})
.error(function(data, status, headers, config){
console.log(‘Data…..’);
});
});
|
Create a simple PHP file which return an json encoded array containing user profile details.
|
1
2
3
4
5
6
7
8
9
10
|
$user = array(“name” => “Tousif Khan”,
“blog” => “www.tehczoo.org”,
“address”=> “Pune, India”,
“hash” => “df2f852c5bd3f63ac47f9aebfcfc1cdd”,
“description” => “Tousif Khan – Project Lead”,
“email” => “tousifkhan510@gmail.com”);
echo json_encode($user);
?>
|
Now, create a angular controller and call the service.
|
1
2
3
4
5
6
7
8
9
10
11
|
var app = angular.module(“app”, []);
app.controller(“HelloController”, function($scope, $http) {
$http.get(“php/user_details.php”)
.success(function(data, status, headers, config) {
$scope.user = data;
})
.error(function(data, status, headers, config){
$scope.error = “Error in lading user records.”;
});
});
|
Finally, your HTML page should looks like below to display that service result back into HTML tags.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http–equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>AngularJS service</title>
body {font-family:Verdana; margin:20px; background-color:#CCCCCC;}
div#profile {border:solid 1px #0000FF;width:350px;height:90px;background-color:#FFFFFF;}
div#profile img { float:left; padding:5px; margin-right:5px;}
div#profile box {float:right}
div#profile h2 {font-size:16px; color:#993300;}
div#profile p {font-size:14px; color:#0000CC; line-height:10px;}
</head>
<body ng–app=“app”>
<div ng–controller=“HelloController”>
<div id=“profile”>
<img ng–src=“http://www.gravatar.com/avatar/{{user.hash}}”
title=“{{user.description}}”/>
<div id=“box”>
<h2>{{user.name}}</h2>
<p><strong>{{user.address}}</strong></p>
<p>Email: <a href=“mailto:{{user.email}}”>{{user.email}}</a></p>
</div>
</div>
</div>
</body>
</html>
|
Run this program on any PHP server and you will get the result like below.
Hope you enjoy the post and learn AngularJS $http service. 🙂
Source techzoo.org
