AngularJS $http Demo

For JavaScript, I believe the most powerful function is Ajax. So I made a very very simple demo for AngularJS as learner.

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
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="" ng-app="httpExample">
<head>
<meta charset="UTF-8">
<title>AngularJS http Demo</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container" ng-controller="SimpleController">
<h3>Simple Controller</h3>
<ul>
<li ng-repeat="user in users">{{user.name}} -- {{user.page}}</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script>

angular.module('httpExample', [])
.controller('SimpleController', ['$scope', '$http',
function($scope, $http) {
$scope.method = 'GET';
$scope.url = 'data.json';

$http({method: $scope.method, url: $scope.url}).
success(function(data, status) {
$scope.status = status;
$scope.users = data;
}).
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
}]);

</script>
</body>
</html>

###JSON data source file data.json

1
[{"name": "Hao Zhou", "page": "Home Pgae"},{"name": "Shan Zhou", "page": "Search Pgae"}]

All set now!

Final Demo Page