Detailed explanation of SQL example in AngularJS introductory tutorial
- 2021-07-06 09:50:30
- OfStack
AngularJS SQL
The code in the previous section can also be used to read the data in the database.
Using PHP to get data from MySQL
AngularJS instance
<!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>
Run 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 in ASP. NET to obtain data
AngularJS instance
<!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>
Run results:
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 |
Server-side code
The following list lists several server-side code types:
Use PHP and MySQL. Returns JSON.
Use PHP and MS Access. Returns JSON.
Use ASP. NET, VB, and MS Access. Returns JSON.
Use ASP. NET, Razor, and SQL Lite. Returns JSON.
Cross-domain HTTP request
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 the sake of data security, all requests are strictly limited under the same domain name. If you need to call data from different sites, you need to solve them through cross-domain.
The following PHP code runs using the Web site for cross-domain access.
header("Access-Control-Allow-Origin: *");
For more cross-domain access solutions, see: PHP Ajax Best Solutions for Cross-Domain Problems.
1. PHP and MySql code examples
<?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 examples
<?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, and MS Access code examples
<%@ 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, and SQL Lite code examples
@{
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
The above is the collation of AngularJS SQL data, which will continue to be supplemented in the future, hoping to help friends who study.