AngularJS HTTP
$http est un service principal d'AngularJS, utilisé pour lire les données des serveurs distants.
Lire le fichier JSON
Voici le fichier JSON stocké sur le serveur Web :
http://www.php.cn/try/angularjs/data/Customers_JSON.php
"records":
[
{
"Nom" : "Alfreds Futterkiste",
"Ville" : "Berlin",
"Pays" : "Allemagne"
},
{
"Nom" : "Berglunds snabbköp",
"Ville" : "Luleå",
"Pays" : "Suède"
},
{
"Nom" : "Centro comercial Moctezuma",
"Ville" : "México D.F.",
"Pays" : "Mexique"
},
{
"Nom" : "Ernst Handel",
" Ville" : "Graz",
"Pays" : "Autriche"
},
{
"Nom" : "FISSA Fabrica Inter. Salchichas S.A.",
"Ville" : "Madrid",
"Pays" : "Espagne"
},
{
"Nom" : "Galería del gastrónomo",
"Ville" : "Barcelone",
"Pays" : "Espagne"
},
{
"Nom" : "Île Trading",
"Ville" : "Cowes",
"Pays" : "Royaume-Uni"
},
{
"Nom" : "Königlich Essen",
"Ville" : "Brandebourg",
"Pays" : "Allemagne"
},
{
"Nom" : "Caves à vin Bacchus qui rit",
"Ville" : "Vancouver",
"Pays" : "Canada"
},
{
"Nom" : "Magazzini Alimentari Riuniti",
"Ville" : "Bergame" ,
"Pays" : "Italie"
},
{
"Nom" : "Nord/Sud",
"Ville" : "Londres",
"Pays" : "UK"
},
{
"Nom" : "Paris spécialités",
"Ville" : "Paris",
"Pays" : "France"
},
{
"Nom" : "Rattlesnake Canyon Grocery",
"Ville" : "Albuquerque ",
"Pays" : "USA"
},
{
"Nom" : "Simons bistro",
"Ville" : "København",
"Pays" : "Danemark"
},
{
"Nom" : "Le Gros Fromage",
"Ville" : "Portland",
"Pays" : "USA"
},
{
"Nom" : "Vaffeljernet",
"Ville" : "Århus",
"Pays " : "Danemark"
},
{
"Nom" : "Wolski Zajazd",
"Ville" : "Warszawa",
"Pays" : "Pologne"
}
]
}
AngularJS $http
AngularJS $http est un service de lecture de données sur le serveur web.
$http.get(url) est la fonction utilisée pour lire les données du serveur.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Analyse de l'application :
Remarque : La demande d'obtention du code ci-dessus est le serveur de ce site. Vous ne pouvez pas le copier directement sur votre exécution locale. problèmes inter-domaines. La solution est de copier les données de Customers_JSON.php sur votre propre serveur. Ci-joint : la meilleure solution aux problèmes inter-domaines PHP Ajax.
Les applications AngularJS sont définies via ng-app. L'application s'exécute dans un <div>. La directive
ng-controller définit le contrôleur Objet nom. La
fonction customersController est un constructeur d'objet JavaScript standard.
L'objet contrôleur a une propriété : $scope.names.
$http.get() Lire les données JSON statiques à partir du serveur Web.
Le fichier de données du serveur est : http://www.php.cn/try/angularjs/data/Customers_JSON.php.
Lors du chargement des données JSON depuis le serveur, $scope.names devient un tableau.
 | 以上代码也可以用于读取数据库数据。 |
|---|
