AngularJS入门教程中SQL实例详解
AngularJS SQL
在前面章节中的代码也可以用于读取数据库中的数据。
使用 PHP 从 MySQL 中获取数据
AngularJS 实例
<!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>
运行结果：
| Alfreds Futterkiste | Germany |
| Ana Trujillo Emparedados y helados | Mexico |
| Antonio Moreno Taquería | Mexico |
| Around the Horn | UK |
| B's Beverages | UK |
| Berglunds snabbköp | Sweden |
| Blauer See Delikatessen | Germany |
| Blondel père et fils | France |
| Bólido Comidas preparadas | Spain |
| Bon app' | France |
| Bottom-Dollar Marketse | Canada |
| Cactus Comidas para llevar | Argentina |
| Centro comercial Moctezuma | Mexico |
| Chop-suey Chinese | Switzerland |
| Comércio Mineiro | Brazil |
ASP.NET 中执行 SQL 获取数据
AngularJS 实例
<!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>
运行结果：
| Alfreds Futterkiste | Germany |
| Berglunds snabbköp | Sweden |
| Centro comercial Moctezuma | Mexico |
| Ernst Handel | Austria |
| FISSA Fabrica Inter. Salchichas S.A. | Spain |
| Galería del gastrónomo | Spain |
| Island Trading | UK |
| Königlich Essen | Germany |
| Laughing Bacchus Wine Cellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris spécialités | France |
| Rattlesnake Canyon Grocery | USA |
| Simons bistro | Denmark |
| The Big Cheese | USA |
| Vaffeljernet | Denmark |
| Wolski Zajazd | Poland |
服务端代码
以下列出了列出了几种服务端代码类型：
使用 PHP 和 MySQL。返回 JSON。
使用 PHP 和 MS Access。返回 JSON。
使用 ASP.NET, VB, 及 MS Access。 返回 JSON。
使用 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
以上就是AngularJS SQL资料的整理，后续继续补充,希望能帮助学习的朋友。
相关推荐
-
AngularJS入门教程之Select(选择框)详解
AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://a
-
AngularJS 中的事件详解
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.
-
AngularJS入门教程之表格实例详解
AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&g
-
AngularJS中的API（接口）简单实现
AngularJS API API 意为 Application Programming Interface(应用程序编程接口). AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访问. 以下列出了一些通用的 API 函数: API 描述 angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字
-
AngularJS 模块详解及简单实例
AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> "m
-
AngularJS Bootstrap详细介绍及实例代码
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.
-
AngularJS中的包含详细介绍及实现示例
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能. 服务端包含 大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes). 使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器. PHP 实例 <?php require("navigation.php"); ?> 客户端包
-
AngularJS中的表单简单入门
AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 HTML 表单通常与 HTML 控件同时存在. AngularJS 表单实例 First Name: Last Name: RESET form = {"firstName":"John","lastName"
-
AngularJS 入门教程之HTML DOM实例详解
AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bd
-
AngularJS 输入验证详解及实例代码
AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识. AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 注意: 客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的. 应用代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g