Http لـ AngularJS

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

使用格式：

//	简单的	GET	请求，可以改为	POST
$http({
　　　　method:　'GET',
　　　　url:	'/someUrl'
}).then(function　successCallback(response)　{
　　　　　　　　//	请求成功执行代码
　　　　},　function　errorCallback(response)　{
　　　　　　　　//　请求失败执行代码
});

简写方法

POST 与 GET 简写方法格式：

$http.get('/someUrl',	config).then(successCallback,	errorCallback);
$http.post('/someUrl',	data,	config).then(successCallback,	errorCallback);

此外还有以下简写方法：

• $http.get

• $http.head

• $http.post

• $http.put

• $http.delete

• $http.jsonp

• $http.patch

更详细内容可参见：https://docs.angularjs.org/api/ng/service/$http

读取 JSON 文件

以下是存储在web服务器上的 JSON 文件：

{
　　　　"sites":	[
　　　　　　　　{
　　　　　　　　　　　　"Name":	"基础教程网",
　　　　　　　　　　　　"Url":	"ar.oldtoolbag.com",
　　　　　　　　　　　　"Country":	"CN"
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　　　"Name":	"Google",
　　　　　　　　　　　　"Url":	"www.google.com",
　　　　　　　　　　　　"Country":	"USA"
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　　　"Name":	"Facebook",
　　　　　　　　　　　　"Url":	"www.facebook.com",
　　　　　　　　　　　　"Country":	"USA"
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　　　"Name":	"微博",
　　　　　　　　　　　　"Url":	"www.weibo.com",
　　　　　　　　　　　　"Country":	"CN"
　　　　　　　　}
　　　　
}

AngularJS $http

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法代替。

通用方法示例

AngularJS1.5 以上版本 - 示例

var　app　=　angular.module('myApp',　[]);
　　　　
app.controller('siteCtrl',　function($scope,　$http)　{
　　　　$http({
　　　　　　　　method:　'GET',
　　　　　　　　url:　'https://ar.oldtoolbag.com/try/angularjs/data/sites.php'
　　　　}).then(function　successCallback(response)　{
　　　　　　　　　　　　$scope.names　=　response.data.sites;
　　　　　　　　},　function　errorCallback(response)　{
　　　　　　　　　　　　//　请求失败执行代码
　　　　});
　　
});

简写方法示例

AngularJS1.5 以上版本 - 示例

<div　ng-app="myApp"　ng-controller="siteCtrl">　
　<ul>
　　<li　ng-repeat="x　in　names">
　　　　{{　x.Name　+　',　'　+　x.Country　}}　　</li></ul>
　</div>
　<script>var　app　=　angular.module('myApp',　[]);
app.controller('siteCtrl',　function($scope,　$http)　{
　　$http.get("https://ar.oldtoolbag.com/run/angularjs/data/sites.php")
　　.then(function　(response)　{$scope.names　=　response.data.sites;});
});</script>

AngularJS1.5 以下版本 - 示例

<div　ng-app="myApp"　ng-controller="siteCtrl">　
　
<ul>
　　<li　ng-repeat="x　in　names">
　　　　{{　x.Name　+　',　'　+　x.Country　}}
　　</li>
</ul>
　
</div>
　
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('siteCtrl',　function($scope,　$http)　{
　　$http.get("https://ar.oldtoolbag.com/try/angularjs/data/sites.php")
　　.نجاح(function (response) { $scope.names = response.sites; });
});
</script>

تحليل التطبيق:

ملاحظة: طلب get المذكور في الكود أعلاه هو لخادم هذا الموقع، لا يمكنك نسخه مباشرة لتشغيله محليًا، سيكون هناك مشكلة التداخل بين المناطق. الحل هو نسخ بيانات Customers_JSON.php إلى خادمك الخاص.

يتم تنفيذ تطبيقات AngularJS من خلال ng-app التعريف. يتم تنفيذ التطبيق في <div>.

ng-controller تعيينت التعليمات controller كائن اسم.

وظيفة customersController هو معيار JavaScript مستطيع بناء

لدي كائن التحكم الخاص بي خاصية: $scope.names

$http.get() قراءة البيانات الثابتة من خادم الويب 　بيانات JSON

ملف البيانات الخاص بالخادم هو:　https://ar.oldtoolbag.com/run/angularjs/data/sites.php

عند تحميل بيانات JSON من الخادم$scope.names تصبح قائمة.