Displaying data from MySQL table using Angular

By using Angular JS we will receive data from our MySQL sample table by using JSON format and then display the rows.
The Angular JS code is here.

<div ng-app="my_app" ng-controller="studentCtrl">

<table>
  <tr ng-repeat="x in details">
    <td>{{ x.name }}</td><td>{{ x.class }}</td><td>{{ x.mark }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('my_app', []);
app.controller('studentCtrl', function($scope, $http) {
  $http.get("student-data.php")
  .then(function (response) {$scope.details = response.data.student_data;});
});
</script>

Here is the output

Back end PHP code

Usually we have two common ways of connecting to MySQL database.

Using PDO
Using MySQLi
Here is the code using MySQLi
Here the variable $connection is declared inside the database connection file config.php. Read more on MySQL database connection file config.php here.

<?php
require "config.php"; // mysqli connection string 

$result = $connection->query("SELECT id,name,class,mark FROM student LIMIT 0,10");
$row = array();
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
$row[] = $rs;
}

echo json_encode(array("student_data"=>$row));
$connection->close();
?>

Using PDO

The variable $dbo is declared inside the database connection file config.php, read more on PDO connection and config file here.

<?php
require "config.php"; // database connection 

$sql="SELECT id, name ,class ,mark FROM student LIMIT 0,10"; 
$row=$dbo->prepare($sql);
$row->execute();
$result=array('student_data'=>$row->fetchAll(PDO::FETCH_ASSOC));

echo json_encode($result); 
?>

Populating data from MySQL table as options of drop down select box.
Angular Home

Displaying records taken from MySQL database

Back end PHP code

Using PDO