AngularJS | SQL

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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=
  </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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<?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;
?>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.