AngularJS(03)---Http对象

$http是AngularJS提供的一个服务，用来从远程服务器读取数据。

AngularJS $http

AngularJS $http是一个从Web服务器读取数据的核心服务。

$http.get(url)是一个用来从服务器读取数据的函数。

Web服务器提供的JSON数据

{
"records": [
  {
    "Name" : "Alfreds Futterkiste",
    "City" : "Berlin",
    "Country" : "Germany"
  },
  {
    "Name" : "Berglunds snabbköp",
    "City" : "Luleå",
    "Country" : "Sweden"
  },
  {
    "Name" : "小明",
    "City" : "北京.",
    "Country" : "中国"
  }
]

AngularJS $http

AngularJS $http是一个从Web服务器读取数据的核心服务。

$http.get(url)是一个用来从服务器读取数据的函数。

<!doctype html>
<html ng-app="myApp">

<head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</head>

<body>
    <div ng-controller="myJsonCtrl">
        <ul>
            <li ng-repeat="x in myDepartment">
                {{ x.code + ', ' + x.name }}
            </li>
        </ul>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myJsonCtrl', function($scope, $http) {
        $http.get('http://localhost:8080/dept/servlet/myData')
        .success(function(data){
        	$scope.myDepartment = data.records;
            console.log(data);
            console.log($scope.myDepartment);
            //$scope.myDepartment = JSON.stringify(data.data);
        });
    });
    </script>
</body>

</html>

代码解释：

AngularJS application通过ng-app指令定义。application在<div>元素内运行。

ng-controller指令定义了控制器的名称。

customersCtrl函数是一个标准的JavaScript对象构造函数。

AngularJS通过$scope和$http对象调用customersCtrl函数。

$scope是一个appliation object（即application的变量及函数的所有者）。

$http是一个用来请求外部数据的XMLHttpRequest object。

$http.get()函数从服务器读取JSON数据。

如果成功的话，控制器将在$scope对象中创建一个names属性，并将从服务器端返回的JSON数据赋值给这个属性。