AngularJS SQL

在前面章节中的代码也可以用于读取数据库中的数据。

使用 PHP 从 MySQL 中获取数据

AngularJS 实例

<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(\"https://www.itpon.com/try/angularjs/data/Customers_MySQL.php\")
    
 .success(function (response) {$scope.names = response.records;});
});
</script>

ASP.NET 中执行 SQL 获取数据

AngularJS 实例

<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(\"https://www.itpon.com/try/angularjs/data/Customers_SQL.aspx\")
    .success(function (response) {$scope.names = response.records;});
});
</script>

服务端代码

以下列出了几种服务端代码类型：

  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 代码实例

<?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;Data Source=Northwind.mdb\");


$rs = $conn->execute(\"SELECT CompanyName, City, Country FROM 
Customers\");

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

    $outp .= \'\"City\":\"\'   . $rs[\"City\"]        . \'\",\';
    $outp .= \'\"Country\":\"\'. $rs[\"Country\"]     . \'\"}\';

    $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)
for each x in objTable.Rows
if outp <> \"\" then outp = outp & \",\"

outp = outp & \"{\" & c & \"Name\"    & c & \":\" & c & x(\"CompanyName\") 
& c & \",\"

outp = outp &       c & \"City\"    & c & \":\" & c 
& x(\"City\")        & c & \",\"

outp = outp &       c & \"Country\" & c 
& \":\" & c & x(\"Country\")     & c & \"}\"
next

outp 
 =\"{\" & c & \"records\" & 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, 
City, Country FROM Customers\");
var outp =\"\"
var c = chr(34)
}
@foreach(var row in 
query)
{
if outp <> \"\" then outp = outp + \",\"
outp = outp + \"{\" + c + \"Name\"    + c + \":\" + c 
+ @row.CompanyName + c + \",\"
outp = outp +       c 
+ \"City\"    + c + \":\" + c 
+ @row.City        + c + \",\"
outp = outp 
+       c + \"Country\" + c 
+ \":\" + c + @row.Country     + c + \"}\"
}
outp =\"{\" + c 
 + \"records\" + c + \":[\" + outp + \"]}\"
@outp