ajax.html

<!DOCTYPE html>

<html ng-app="myApp">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Ajax - AngularJS Test</title>
		<style type="text/css">
			.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
		</style>
	</head>
	<body>
		<div class="test-div" ng-controller="myCtrl">
			<button ng-click="loadData()">Load Data</button>
			<div>
				{{result}}
			</div>
		</div>
		
		<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
		<script type="text/javascript">
			/**
			 * $httpProvider - $http
			 * 使用$httpProvider可以修改全局Ajax配置，或者对Ajax请求进行拦截
			 */
			
			var myApp = angular.module("myApp", []);
			myApp.config(function($httpProvider) {
				$httpProvider.interceptors.push(function() {
					return {
						request: function(config) {
							console.log("Request URL: " + config.url);
							return config;
						},
						response: function(resp) {
							console.log("Response Status: " + resp.status);
							return resp;
						}
					}
				});
			});
			myApp.controller("myCtrl", function($scope, $http) {
				$scope.loadData = function() {
					$http.get("data/players.json").then(function(resp) {
						console.log("Data Length: " + resp.data.length);
						$scope.result = resp.data;
					}, function(resp) {
						console.log("Resp Status: " + resp.status);
						$scope.result = resp.status;
					})
				};
			});
		</script>
	</body>
</html> 