Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

AngularJS and SQL

Author Gunjeev Singh
2 upvotes
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

AngularJS is a web framework built in Javascript by Google. An important thing to note when discussing the features of AngularJS is that it is structural as well. In the world of web development, the MEAN stack is one of the most prominent technical stacks. Knowing the nuances of AngularJS is an essential aspect of being a good MEAN stack developer. 

 

Almost every web application interacting with the users requires saving and accessing data. This data could be anything from forms that the user submits to query results from the user’s requests. This data must be stored in a database. AngularJS is a model-view-controller-based frontend framework that makes working with databases straightforward and convenient. 
 

This blog will look into how we can access and display data from SQL databases into HTML tags and elements using AngularJS directives. 

AngularJS Concepts

Before diving into code examples of accessing and displaying data from databases in HTML elements, let us briefly look into some critical AngularJS features and concepts.

Modules

A module in AngularJS defines the application under production. All controllers in an AngularJS application must be wrapped inside a module. Simply, an AngularJS module is just a collection of Javascript functions.

Directives

Directives are like fields on a DOM element. Directives help make static pages dynamic. When we use directives, we do not manually change the code. Instead, we direct AngularJS on how to change the Document Object Model (DOM)

Expressions

An expression is nothing but a syntactical name given to the code inside {{}} in an AngularJS file. Expressions help us with data binding.

Controller

The controller is a particular directive that controls the AngularJS application. It is nothing but a Javascript Object.

Scope

A scope ($scope) is a Javascript object that helps communicate between the view and the controller. Essentially, it binds the view to the functions in the controller.

Data Binding

Two-way data binding is one of AngularJS’s most powerful features. Two-way binding helps connect the data between a model and a view.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

AngularJS and SQL

Let us understand why we need something like AngularJS to help display the data from a SQL Database and why using simple HTML would be more time-consuming and redundant.

For the same, we will take a straightforward example. 

HTML

Let us look at the HTML version of the code; we would later use SQL and AngularJS.

 

Code

<!DOCTYPE html>
<html>
<style>
   tr, td {
       padding: 2px;
       border: 1px solid black;
   }
</style>
   <table>
       <tr>
           <td>Gunjeev</td>
           <td>Javascript</td>
       </tr>
       <tr>
           <td>Ninja</td>
           <td>Flutter</td>
       </tr>
       <tr>
           <td>Test User</td>
           <td>Java</td>
       </tr>
       <tr>
           <td>Test Robot</td>
           <td>C++</td>
       </tr>
       <tr>
           <td>John</td>
           <td></td>
       </tr>
   </table>
</html>

 

Output

Explanation

The code displays a table of five rows and two columns, where the first column indicates the user’s name while the second column contains the language used by the user. Now imagine we had more users, along the scale of hundreds or thousands. This way of displaying the data becomes a horrendous task. Moreover, this data is hardcoded and cannot be traversed or searched.

Using AngularJS and SQL

If we create a database of the same data in SQL, the number of users would not be directly proportional to the effort needed to be put in. Using AngularJS and SQL is a very efficient way of displaying data from databases. AngularJS and SQL together form a very comfortable pair which makes the work of developers more effortless and more efficient.

 

To demonstrate how efficient it becomes when we use AngularJS and SQL together, we would be using MySQL and PHP for the server-side code.

 

Server-Side 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 DeveloperName, DeveloperCity,
DeveloperLanguage FROM Developers");
  
$output = "";
while ($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($output != "") {
        $output = ", ";
    }
    $output .= '{"Name":"' . $rs["DeveloperName"] . '", ';
    $output .= '"City":"' . $rs["DeveloperCity"] . '", ';
    $output .= '"Language":"' .
      $rs["DeveloperLanguage"] . '"}';
}
$output = '{"records":[' . $output . ']}';
$connection->close();
  
echo $output;
?>


For this example, assume that the Developers table has five records. The above PHP code retrieves the data from MySQL in JSON format.

 

AngularJS and SQL Code

<html>
    <style>
           tr, td {
    padding: 2px;
    border: 1px solid black;
            }
   </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
    <body>
    <div ng-app="devApp"
    ng-controller="developerController">
    <table>
    <tr ng-repeat="output in names">
    <td>{{ output.Name }}</td>
    <td>{{ output.Language }}</td>
    </tr>
    </table>
    </div>

 
    <script>
    var app = angular.module("devApp", []);
    app.controller(
    "developerController", function ($scope, $http) {
    $http.get(
    "developer_mysql.php").then(function (response) {
    $scope.names = response.data.records;
    });
    });
    </script>
    </body>
</html>

Output

Explanation

For an AngularJS application, the ng-app directive is always the starting point. In our example, we have given “devApp” the ng-app tag. The ng-controller directive is assigned the value of developerController. It starts the binding and binds the data retrieved in JSON format from the PHP code to the <tr> and <td> tags, respectively.

FAQs

  1. Can we directly use AngularJS and MySQL?
    No, we can not directly communicate between Angular and MySQL. We will have to build a back-end web service that calls MYSQL using PHP or Node. AngularJS can then communicate with this backend web service via HTTP.
     
  2. What is the use of $http in AngularJS?
    $http is an AngularJS service used to read data from remote servers.

Key Takeaways

We have now learned the usage of AngularJS and SQL and looked at how efficient it becomes to develop applications with AngularJS at the frontend. This blog explained how to access and display data from SQL databases into HTML tags and elements using AngularJS directives. 

 

We hope with the help of this blog, the process of using AngularJS and SQL in the application is clear. To continue your web development journey, follow this link for a series of detailed, easy-to-understand blogs!
 

We hope you found the blog useful. Liked the blog? Then feel free to upvote and share it.

Previous article
AngularJS Select Boxes
Next article
Angular Lazy Loading
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass