AngularJS SQL

前の章のコードは、データベースからデータを読み取るために使用することもできます。

PHP を使用して MySQL からデータを取得します

インスタンス

<!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>

インスタンスを実行する»

オンラインの例を表示するには、[インスタンスを実行] ボタンをクリックしてください

SQL を実行して ASP.NET でデータを取得します

例

<!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>

インスタンスの実行»

オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

サーバー側コード

以下にいくつかのサーバー側コードタイプを示します:

PHP と MySQL を使用します。 JSON を返します。
PHP と MS Access を使用します。 JSON を返します。
ASP.NET、VB、および MS Access を使用します。 JSON を返します。
ASP.NET、Razor、SQL Lite を使用します。 JSON を返します。

クロスドメイン HTTP リクエスト

異なるサーバー (異なるドメイン名) からデータを取得する必要がある場合は、クロスドメイン HTTP リクエストを使用する必要があります。

クロスドメインリクエストはウェブページでは非常に一般的です。多くの Web ページは、CSS、画像、JS スクリプトなどをさまざまなサーバーから読み込みます。

最新のブラウザでは、データセキュリティのため、すべてのリクエストは同じドメイン名に厳密に制限されています。異なるサイトからデータを呼び出す必要がある場合は、クロスドメインを通じて解決する必要があります。

次の PHP コードは、クロスドメインアクセスに使用される Web サイトを実行します。

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

その他のクロスドメインアクセスソリューションについては、「PHP Ajax クロスドメイン問題に対する最適なソリューション」を参照してください。

1. PHP と MySQL のコード例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: アプリケーション/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp . = '"都市":"' . $rs["都市"] . '",';
$outp .= '"国":"'. $rs["国"] . '"}';
}
$outp ='{"レコード":['.$outp.']}';
$conn->close();

echo($outp);
?>

2. PHP と MS Access の代償例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: アプリケーション/json; charset=ISO-8859-1");

$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;データソース=Northwind.mdb ");

$rs = $conn->execute("会社名、都市、国を FROM から選択顧客");

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

$conn->close();

echo ($outp);
?>

3. ASP.NET、VB、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 CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")

outp = ""
c = chr(34)
objTable.Rows の各 x について
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & ","
outp = outp & c & "都市" & c & ":" & c & x("都市") & c & ","
outp = outp & c & "国" & c & ":" & c & x("国") & c & "}"
次

出力 ="{" & c & "レコード" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>

4. ASP.NET、VB Razor および SQL Lite の代打例

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("コンテンツタイプ", "アプリケーション/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, 顧客からの都市、国");
var outp =""
var c = chr(34)
}
@foreach(var row in クエリ)
{
if outp <> "" then outp = outp + ","
outp = outp + "{" + c + "名前" + c + ":" + c + @row.CompanyName + c + ","
outp = outp + c + "都市" + c + ":" + c + @row.City + c + ","
outp = 出力 + c + 「国」 + c + ":" + c + @row. Country + c + "}"
}
outp ="{" + c + "レコード" + c + ":[" + outp + "]}"
@outp