AngularJS SQL
The code in the previous chapter can also be used to read data in the database.
Get data from MySQL using PHP
AngularJS instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></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>{{ }}</td>
<td>{{ }}</td>
</tr>
</table>
</div>
<script>
var app = ('myApp', []);
('customersCtrl', function($scope, $http) {
$("/try/angularjs/data/Customers_MySQL.php")
.success(function (response) {$ = ;});
});
</script>
</body>
</html>
Running results:
| 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 |
Execute SQL to get data
AngularJS instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></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>{{ }}</td>
<td>{{ }}</td>
</tr>
</table>
</div>
<script>
var app = ('myApp', []);
('customersCtrl', function($scope, $http) {
$("/try/angularjs/data/Customers_SQL.aspx")
.success(function (response) {$ = ;});
});
</script>
</body>
</html>
Running results:
| Alfreds Futterkiste | Germany |
| Berglunds snabbköp | Sweden |
| Centro comercial Moctezuma | Mexico |
| Ernst Handel | Austria |
| FISSA Fabrica Inter. Salchichas . | 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 |
Server code
The following lists several server-side code types:
Use PHP and MySQL. Returns JSON.
Use PHP and MS Access. Returns JSON.
Use , VB, and MS Access. Returns JSON.
Use , Razor, and SQL Lite. Returns JSON.
Cross-domain HTTP requests
If you need to get data from different servers (different domain names), you need to use cross-domain HTTP requests.
Cross-domain requests are very common on web pages. Many web pages load CSS, pictures, Js scripts, etc. from different servers.
In modern browsers, for data security, all requests are strictly limited to the same domain name. If you need to call data from different sites, it needs to be solved through cross-domain.
The following PHP code runs using the website for cross-domain access.
header("Access-Control-Allow-Origin: *");
For more cross-domain access solutions, see: Best Solutions for PHP Ajax Cross-domain Problems.
1. PHP and MySql code instances
<?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 and MS Access code instances
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");
$conn = new COM("");
$conn->open("PROVIDER=.4.0;Data Source=");
$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. , VB and MS Access code instances
<%@ Import Namespace=""%>
<%@ Import Namespace=""%>
<%@ Import Namespace=""%>
<%
("Access-Control-Allow-Origin", "*")
("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=.4.0;data source=")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
(objDataSet, "myTable")
objTable=("myTable")
outp = ""
c = chr(34)
for each x in
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 & "]}"
(outp)
%>
4. , VB Razor and SQL Lite code instances
@{
("Access-Control-Allow-Origin", "*")
("Content-type", "application/json")
var db = ("Northwind");
var 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 + @ + c + ","
outp = outp + c + "City" + c + ":" + c + @ + c + ","
outp = outp + c + "Country" + c + ":" + c + @ + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp
The above is the compilation of AngularJS SQL materials. We will continue to add them later. I hope it can help friends who study.