AngularJS SQL



Le code du chapitre précédent peut également être utilisé pour lire les données de la base de données.


Obtenir des données de MySQL en utilisant PHP

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>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">
 
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("/try/angularjs/data/Customers_MySQL.php")
   .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne


Exécuter SQL dans ASP.NET pour obtenir des données

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>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
<tr ng-repeat="x in names">
	<td>{{ x.Name }}</td>
	<td>{{ x.Country }}</td>
</tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("http://www.runoob.com/try/angularjs/data/Customers_SQL.aspx")
   .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Code du serveur

Les colonnes sont répertoriées ci-dessous. Plusieurs types de code côté serveur sont disponibles :

  1. Utilisation de PHP et MySQL. Renvoie JSON.

  2. Utilise PHP et MS Access. Renvoie JSON.

  3. Utilisez ASP.NET, VB et MS Access. Renvoie JSON.

  4. Utilise ASP.NET, Razor et SQL Lite. Renvoie JSON.


Requête HTTP inter-domaines

Si vous avez besoin d'obtenir des données de différents serveurs (différents noms de domaine), vous devez utiliser des requêtes HTTP inter-domaines .

Les requêtes d'origine croisée sont très courantes sur les pages Web. De nombreuses pages Web chargent du CSS, des images, des scripts Js, etc. à partir de différents serveurs.

Dans les navigateurs modernes, pour des raisons de sécurité des données, toutes les demandes sont strictement limitées au même nom de domaine. Si vous devez appeler des données depuis différents sites, vous devez les résoudre via plusieurs domaines.

Le code PHP suivant exécute le site Web utilisé pour l'accès inter-domaines.

header("Access-Control-Allow-Origin: *");

Pour plus de solutions d'accès inter-domaines, veuillez vous référer à : La meilleure solution aux problèmes inter-domaines PHP Ajax.


1. Exemples de code PHP et MySql

<?php
header("Access-Control-Allow-Origin: *");
header("Type de contenu : application/json; charset=UTF-8");

$conn = new mysqli("monServeur", "monUtilisateur", "monMot de Passe", "Northwind");

$result = $conn->query("SELECT Nom de l'entreprise, Ville, Pays FROM Clients");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"Ville":' . $rs["Ville"] . '",';
$outp .= '"Pays":'. $rs["Pays"] . ' "}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();

echo ($sortie);
?>

2. PHP et MS Access 代码实例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json ; charset=ISO-8859-1");

$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0; Source de données=Northwind.mdb");

$rs = $conn->execute("SELECT Nom de l'entreprise, Ville, Pays FROM Clients");

$outp = "";
while (!$rs->EOF) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"Ville":'   . $rs["Ville"]        . '",';
    $outp .= '"Pays":"'. $rs["Pays"]     . ' "}';
    $rs->MoveNext();
}
$outp ='{"records":['.$outp.']}';

$ conn->close();

echo ($outp);
?>

3. ASP.NET, VB et MS Access 代码实例

<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"% >
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT Nom de l'entreprise, Ville, Pays FROM Clients", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")

outp = ""
c = chr(34)
pour chaque x dans objTable.Rows
if sortie ≪> "" then outp = outp & ","
outp = outp & "{" & c & "Nom"    & c & ":" & c & x("CompanyName") & c & ","
outp = outp &       c & "Ville"    & c & ":" & c & x("Ville")        & c & ","
outp = outp &       c & "Pays" & c & ":" & c & x("Pays")     & c & "}"
suivant

sortie ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>

4. ASP.NET, VB Razor et SQL Lite 代码实例

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, Ville, Pays FROM Clients");
var outp=""
var c = chr(34)
}
@foreach(var row in requête)
{
if outp <> "" puis outp = outp + ","
outp = outp + "{" + c + "Nom"    + c + ":" + c + @row.CompanyName + c + ","
outp = outp +       c + "Ville"    + c + ":" + c + @row.City        + c + ","
outp = outp +       c + "Pays" + c + ":" + c + @row.Country     + c + "}"
}
outp ="{" + c + "enregistrements" + c + ":[" + outp + "]}"
@outp