AngularJS SQL (JNNC Technologies)

AngularJS is perfect for displaying data from a Database. Just make sure the data is in JSON format.

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("customers_mysql.php")
    .then(function (response) {$scope.names = response.data.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("customers_sql.aspx")
    .then(function (response) {$scope.names = response.data.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, Razor C# 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 != "") {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