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="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>Running results:
| Alfreds Futterkiste | Germany |
| Ana Trujillo Emparedados y heldos | 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 preparedas | 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 get 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>Running results:
| Alfreds Futterkiste | Germany |
| Berglunds snabbköp | Sweden |
| Centro comercial Moctezuma | Mexico |
| Ernst Handel | Austria |
| FISSA Fabrica Inter. Salchichas SA | 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 ASP.NET, VB, and MS Access. Returns JSON.
Use ASP.NET, 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
<?phpheader("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
<?phpheader("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 instances
<%@ 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 OleDbConnectionDim objAdapter As OleDbDataAdapterDim objTable As DataTableDim objRow As DataRowDim objDataSet As New DataSet()Dim outpDim cconn = 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.Rowsif 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 & "}"nextoutp ="{" & c & "records" & c & ":[" & outp & "]}"response.write(outp)conn.close%>4. ASP.NET, VB Razor and SQL Lite code instances
@{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 + "]}"@outpThe above is the compilation of AngularJS SQL materials. We will continue to add them later. I hope it can help friends who study.