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= </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:
<?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:
<!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:
