Http de AngularJS

AngularJS XMLHttpRequest

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

使用格式：

//　简单的　GET　请求，可以改为　POST
$http({
　　　　method:　'GET',
　　　　url:/someUrl'
}).then(function　successCallback(response)　{
　　　　　　　　//　请求成功执行代码
　　　　},　function　errorCallback(response)　{
　　　　　　　　//　Ejecutar código en caso de fallo de la solicitud
});

简写方法

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":　"www.w"3codebox.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 es un servicio para leer datos del servidor web.

$http.get(url) es una función para leer datos del servidor.

Declaración de obsolescencia (v1.5)

v1.5 en$http del success y error Método obsoleto. Utilizar then Método en sustitución.

Ejemplo de método general

AngularJS1.5 Versión anterior - Ejemplo

var　app　=　angular.module('myApp',　[]);
　　　　
app.controller('siteCtrl',　function($scope,　$http)　{
　　　　$http({
　　　　　　　　method:　'GET',
　　　　　　　　url:　'https://es.oldtoolbag.com/try/angularjs/data/sites.php'
　　　　}).then(function　successCallback(response)　{
　　　　　　　　　　　　$scope.names　=　response.data.sites;
　　　　　　　　},　function　errorCallback(response)　{
　　　　　　　　　　　　//　Ejecutar código en caso de fallo de la solicitud
　　　　});
　　
});

Ejemplo de método abreviado

AngularJS1.5 Versión anterior - Ejemplo

<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://es.oldtoolbag.com/run/angularjs/data/("sites.php")
　　.then(function　(response)　{$scope.names　=　response.data.sites;});
});</script>

AngularJS1.5 Versión siguiente - Ejemplo

<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://es.oldtoolbag.com/try/angularjs/data/("sites.php")
　　.success(function(response) {$scope.names = response.sites;});
});
</script>

Análisis de la aplicación:

Nota: La solicitud GET del código anterior es del servidor de este sitio, no puede copiarla directamente para ejecutarla localmente, ya que habrá problemas de cors. La solución es copiar los datos de Customers_JSON.php a su propio servidor.

Las aplicaciones de AngularJS se realizan a través de ng-app Definición. Se ejecuta en <div>.

ng-controller La directiva estableció controller Objeto nombres.

función customersController Es un estándar de JavaScript Constructor de objetos

El objeto del controlador tiene una propiedad: $scope.names

$http.get() Leer datos estáticos del servidor web 　Datos JSON

El archivo de datos del servidor es:　https://es.oldtoolbag.com/run/angularjs/data/sites.php

Cuando se cargan datos JSON desde el servidor$scope.names Convertirlo en un array.