Open In App

AngularJS SQL

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In any web application, we need to save, update, insert and fetch data to and from a database. AngularJS is a JavaScript MVC (Model-View-Controller) framework developed by Google. It helps developers to build well-structured, easily testable, and maintainable front-end applications. 

Important Features in AngularJS Library are given below:

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

Need for AngularJS Framework

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 JSON format. Let’s see an example of it. Data is in MySQL and on the 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 Angular JS SQL.

Example: This example implements the SQL concepts to illustrate its basic usage in AngularJS.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
   
    <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>
</head>
 
<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




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

HTML




<!DOCTYPE html>
<html>
 
<head>
    <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>
</head>
 
<body>
    <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>
</body>
</html>


Output:



Last Updated : 19 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads