AngularJS Tutorial（9）from w3school


The code from the previous chapter can also be used to read from databases.

Fetching Data From a PHP Server Running MySQL

AngularJS Example

<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.w3schools.com/angular/customers_mysql.php")

.success(function (response) {$scope.names = response.records;});

});

</script>

Try it Yourself »

Fetching Data From an ASP.NET Server Running SQL

AngularJS Example

<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.w3schools.com/angular/customers_sql.aspx")

.success(function (response) {$scope.names = response.records;});

});

</script>

Try it Yourself »

Server Code Examples

The following section is a listing of the server code used to fetch SQL data.

Using PHP and MySQL. Returning JSON.
Using PHP and MS Access. Returning JSON.
Using ASP.NET, VB, and MS Access. Returning JSON.
Using ASP.NET, Razor, and SQL Lite. Returning JSON.

Cross-Site HTTP Requests

Requests for data from a different server (than the requesting page), are called
cross-site HTTP requests.

Cross-site requests are common on the web. Many pages load CSS, images, and scripts from different servers.

In modern browsers, cross-site HTTP requests from scripts are restricted to
same site for security reasons.

The following line, in our PHP examples, has been added to allow cross-site access.

header("Access-Control-Allow-Origin: *");

1. Server Code PHP and 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. Server Code PHP and 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. Server Code ASP.NET, VB and 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. Server Code ASP.NET, VB Razor and 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