Display data in list format by using PHP and Angular Js

In this blog we have to learn about how to get data from database and show in PHP page in a list format by using Angular Js.

1st Step: – Create a database connection with DB (Mysql)

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "WordPress";
//Create connection
$conn = new mysqli ($servername, $username, $password, $dbname);
// Check connection
If ($conn->connect_error)
{
    Die ("Connection failed: ". $conn->connect_error);
}

2nd Step: – Get data from database table GROUP

$sql = "SELECT `groupID`, `group_name`, `group_description`, `create_date`, `modify_date`, `is_active` FROM `tbl_group` ";
$result = $conn->query ($sql);

3rd Step: – Create an array format of getting data

// Output data of each row
While ($row = $result->fetch_assoc ())
{
      $data [] = $row;
}
// Create an array
$data1 = array (‘records’=>$data);
// Encoded array from JSON ENCODE function
$jsonResult = json_encode ($data1);

4th Step: – Include Angular JS file and create angular js code

<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost/angularJsTest")
    .success(function(response) {
        //alert(response.records);
        $scope.group_name = response.records;
    });
});
</script>

5th Step :- HTML page where we have show all data getting from database.

<div>
  <table width="60%" align="center">
    <tbody>
      <tr>
        <td>Group ID</td>
        <td>Group Name</td>
        <td>Group Description</td>
      </tr>
      <tr>
        <td>{{ x.groupID }}</td>
        <td>{{ x.group_name }}</td>
        <td>{{ x.group_description }}</td>
      </tr>
    </tbody>
  </table>
</div>

We got this blog from www.w3schools.com for blog more information Click Here

Leave a Reply