AngularJS(03)---Http物件
阿新 • • 發佈：2019-01-08
$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()
如果成功的話，控制器將在$scope物件中建立一個names屬性，並將從伺服器端返回的JSON資料賦值給這個屬性。