Preview:
A)	Angular Js data binding.
PROGRAM:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng- init="quantity=1;price=20"> <h2>Cost Calculator</h2> Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>

B)	Angular JS directives and Events.
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Click me!</button> <p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>

C)	Using angular Js fetching data from MySQL.
1.	Table structure
I am using users table in the tutorial example. CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY
AUTO_INCREMENT, `fname` varchar(80) NOT NULL,
`lname` varchar(80) NOT NULL,
`username` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT
CHARSET=latin1; 2. Configuration
Create a new config.php file for database configuration. Completed Code
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
3.	HTML
You can either download and include angular.min.js in the page or use CDN.
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js'></script> Define <body ng-app='myapp'> and <div ng-controller='userCtrl'> on the page.
 
For displaying data create a <table> layout and specify ng-repeat directive on a row. Which loop through all available
data in users Array. Completed Code
<!doctype html>
<html>
<head>
<title>How to get data from MySQL with AngularJS - PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app='myapp'>
<div ng-controller="userCtrl">
<table >
<tr>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
</tr>
<!-- Display records -->
<tr ng-repeat="user in users">
<td>{{user.fname}}</td>
<td>{{user.lname}}</td>
<td>{{user.username}}</td>
</tr>
</table>
</div>
</body>
</html>
4.	PHP
Create a getData.php file.
From here return JSON Array which has user details (fname, lname, and username). Completed Code
<?php
include 'config.php';
$sel = mysqli_query($con,"select * from users");
$data = array();
while ($row = mysqli_fetch_array($sel)) {
$data[] = array("fname"=>$row['fname'],"lname"=>$row['lname'],"username"=>$row['username']);
}
echo json_encode($data);
5.	Script
Create new module and setup AJAX request in controller ( userCtrl ). Path – Passing file name getData.php in url and set method to get.
Success – AJAX successfully callback handle by then where store reponse.data to $scope.users. At HTML end display data using ng-repeat directive.
Completed Code
<script>
var fetch = angular.module('myapp', []);
fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
$http({ method: 'get',
url: 'getData.php'
}).then(function successCallback(response) {
// Store response data
$scope.users = response.data;
});
}]);
</script>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter