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!