Differentiation of AngularJS SQL

If you are interested to learn about the angularJs select boxes

AngularJS is perfect for displaying data from a Database. Just make sure the data is in JSON format. 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>

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>

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

A request for data from a different server (other 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

Features Important concepts in Angular JS Library is given below:

Concept
Template
Directives
Model
Scope
Expressions
Compiler
Filter
Data Binding
Controller
Module
Service

Need of AngularJS Framework explanation with a basic example With the directives to the HTML elements and attributes, dynamic web pages are easily created by adding additional coding. AngularJS is pretty much helpful for displaying data from a Database. Provided data should be in a JSON format. Let’s see an example of it. Data is in MySQL and on server-side PHP interacts with MySQL and gets the data in JSON format. Angular JS displays the output. With the basic example below, let us see in detail about Angular JS SQL.

Example:

<html>
    <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>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
  </script>
    <body>
        <div ng-app="empApp" 
             ng-controller="employeeCtrl">
            <table>
                <tr ng-repeat="output in names">
                    <td>{{ output.Name }}</td>
                    <td>{{ output.Country }}</td>
                </tr>
            </table>
        </div>
  
        <script>
            var app = angular.module("empApp", []);
            app.controller(
              "employeeCtrl", function ($scope, $http) {
                $http.get(
         "employee_mysql.php").then(function (response) {
                    $scope.names = response.data.records;
                });
            });
        </script>
    </body>
</html>

Explanation: The ng-app directive is a starting point. Here “empApp” is given in ng-app, here initialization is started and compiles the HTML template ng-controller is used to specify a controller in the HTML element. This controller will add behavior or maintain the data in that HTML element and its child elements Server Code PHP and MySQL Main thing here is the output should be in the format of JSON

Server Code PHP and MySQL:

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
  
$connection = new mysqli("myServer", 
                         "<username>", 
                         "<password>", 
                         "<dbname>");
  
$result = $connection->query(
"SELECT EmployeeName, EmployeeCity,
EmployeeCountry FROM Employees");
  
$output = "";
while ($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($output != "") {
        $output = ", ";
    }
    $output .= '{"Name":"' . $rs["EmployeeName"] . '", ';
    $output .= '"City":"' . $rs["EmployeeCity"] . '", ';
    $output .= '"Country":"' .
      $rs["EmployeeCountry"] . '"}';
}
$output = '{"records":[' . $output . ']}';
$connection->close();
  
echo $output;
?>

Assume that the Employees table is having 6 records and they are in MySQL. PHP code retrieves the data from MySQL in the format of JSON and angular JS displays the output.
Output:

HTML Code:

<!DOCTYPE html>
<html>
    <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>
    <table>
        <tr>
            <td>Avinash</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Aisha</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Emma</td>
            <td>Australia</td>
        </tr>
        <tr>
            <td>Shreyas</td>
            <td>India</td>
        </tr>
        <tr>
            <td>Rachel</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Shravan</td>
            <td>India</td>
        </tr>
    </table>
</html>

Output:

Differentiation of AngularJS SQL

Differentiation of AngularJS SQL

Fetching Data From a PHP Server Running MySQL

AngularJS Example

Fetching Data From an ASP.NET Server Running SQL

AngularJS Example

Server Code Examples

Cross-Site HTTP Requests

1. Server Code PHP and MySQL

2. Server Code PHP and MS Access

3. Server Code ASP.NET, VB and MS Access

4. Server Code ASP.NET, Razor C# and SQL Lite

Category Posts

Categories

Recent Posts