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>

##執行實例»點擊"運行實例" 按鈕查看線上實例

ASP.NET 中執行SQL 取得資料

實例

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

運行實例»點擊"運行實例"按鈕查看線上實例

#服務端程式碼

以下列出了列出了幾個服務端程式碼類型：

  1. 使用PHP 和MySQL。返回 JSON。

  2. 使用 PHP 和 MS Access。返回 JSON。

  3. 使用 ASP.NET, VB, 及 MS Access。 返回 JSON。

  4. 使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。

跨網域 HTTP 請求

如果你需要從不同的伺服器（不同網域）取得資料就需要使用跨網域 HTTP 請求。

跨網域請求在網頁上非常常見。很多網頁從不同伺服器載入 CSS, 圖片，Js腳本等。

在現代瀏覽器中，為了數據的安全，所有請求都被嚴格限制在同一網域下，如果需要呼叫不同網站的數據，則需要透過跨域來解決。

以下的 PHP 程式碼執行使用的網站進行跨域存取。

# header("Access-Control-Allow-Origin: *");
更多跨域存取解決方案可參閱：PHP Ajax 跨域問題最佳解決方案。

1. PHP 與MySql 程式碼實例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/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 .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country" . "}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();

echo ($outp);
?>

2。 PHP 與 MS Access 程式碼實例

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("SELECT CompanyName, City, Country FROM 客戶");

$outp = "";
while (!$rs->EOF) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"城市":"'   . $rs["城市"]        . '",';
    $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 源=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT 公司名稱、城市、來自客戶的國家/地區", conn)
objAdapter.Fill(objDataSet, "myTable")
#objTable=objDataSet.Tables("myTable")

outp = ""
#c = chr(34)
對於objTable.Rows 中的每個x
if輸出<> "" then outp = outp & ","
outp = outp & "{" & c & "名稱"    & c & ":" & c & x("公司名稱") & c & ","
outp = outp &       c & "城市"    & c & ":" & c & x("城市")        & c & ","
outp = outp &       c & "國家/地區" & c & ":" & c & x("國家/地區")     & c & "}"
next

outp ="{" & c & "記錄" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>
#

4。 ASP.NET、VB Razor 和 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, 來自客戶的城市、國家");
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 = outp +       c +「國家/地區」+ c + ":" + c + @row.Country     + c + "}"
}
outp = "{" + c + "記錄" + c + ":[" + outp + "]}"
@outp
##
←
→