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:
