Angularjs Http Intro


Angularjs Http Intro : AngularJs Http is core service used to read data from remote server. It basically interacts with HTTP servers and reads data.


Syntax : Angularjs Http Intro

$http.get('Url').then(Callback);
$http.post('Url', data).then(Callback);

Url : Thet Url from where you want to load data.
Callback : Callback function after success.

Let us call getUsers.php from server with the following data

{"users":[{"id":"1","name":"John","email":"johnk@yopemail.com","phone":"121323232"},{"id":"2","name":"Kelly","email":"kellyk@yopemail.com","phone":"121212122"},{"id":"3","name":"Ryan","email":"ryank@yopemail.com","phone":"22222212"},{"id":"4","name":"Kojo","email":"kojao@yopemail.com","phone":"12144444"},{"id":"5","name":"Kinjal","email":"kinjal@yopemail.com","phone":"22555212"},{"id":"6","name":"Tani","email":"tanya@yopemail.com","phone":"121334444"},{"id":"7","name":"Brak","email":"barak@yopemail.com","phone":"2444444512"},{"id":"8","name":"Uman","email":"uman@yopemail.com","phone":"12334444"}]}

Angularjs Http Intro : Example

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>

<body>
<div ng-app="userApp" ng-controller ="userController">
    <table id="searchResults">
    <tr><th>Id</th><th>Name</th><th>Email</th><th>Phone</th></tr>
    <tr ng-repeat="data in usersData">
    <td>{{data.id}}</td>
    <td>{{data.name}}</td>
    <td>{{data.email}}</td>
    <td>{{data.phone}}</td>
    </tr>
    </table>

</div>
<script>
var app = angular.module('userApp', []);
app.controller('userController', function($scope, $http) {
    $http.get("http://runtest.tutorialsplane.com/json/getUsers.php")
    .success(function(response) {$scope.usersData = response.users;});
});
</script>

</body>
</html>

Try it »


Add Comment

📖 Read More


Advertisements