AngularJS | SQL - GeeksforGeeks

14 Aug, 2020
In any web application we need to save, update, insert and fetch data to and from a database. AngularJS is a JavaScript MVC or Model-View-Controller framework developed by Google. It helps developers to build well structured, easily testable, and maintainable front-end applications.
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:
<?phpheader("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:
AngularJS-Misc
Picked
AngularJS
PHP
Web Technologies
PHP
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular PrimeNG Dropdown Component
Angular | keyup event
Auth Guards in Angular 9/10/11
How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
How to execute PHP code using command line ?
How to Insert Form Data into Database using PHP ?
How to convert array to string in PHP ?
PHP in_array() Function
How to pop an alert message box using PHP ?