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;
?>
You can also try this code with Online PHP Compiler
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
-
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.
-
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.
46+ registered 