Introduction on AngularJS
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 :
html
<table>
<tr><td><Strong>Concept</Strong></td></tr>
<tr><td><Strong>Template</Strong></td></tr>
<tr><td><Strong>Directives</Strong></td></tr>
<tr><td><Strong>Model</Strong></td></tr>
<tr><td><Strong>Scope</Strong></td></tr>
<tr><td><Strong>Expressions</Strong></td></tr>
<tr><td><Strong>Compiler</Strong></td></tr>
<tr><td><Strong>Filter</Strong></td></tr>
<tr><td><Strong>Data Binding</Strong></td></tr>
<tr><td><Strong>Controller</Strong></td></tr>
<tr><td><Strong>Module</Strong></td></tr>
<tr><td><Strong>Service</Strong></td></tr>
</table>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.
//Angular JS
javascript
<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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></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
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 Employees table is having 6 records and they are in MySQL. PHP code retrieve the data from MySQL in the format of JSON and angular JS displays the output
OUTPUT:
As Angular JS repeatedly loops and printing Name and Country, we will be getting the output (sample) in the below given fashion.
<!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>
