How to get data from MySQL with AngularJS – PHP

With only using AngularJS it is not possible to get data from the MySQL database because it only handles Client-side requests.

You have to use any Server side language at the backend which handles the request and returns the response.

In AngularJS $http service is used to send AJAX requests.

How to get data from MySQL with AngularJS - PHP


  1. Table structure
  2. Configuration
  3. HTML
  4. PHP
  5. Script
  6. Demo
  7. Conclusion

1. Table structure

I am using users table in the tutorial example.

CREATE TABLE `users` (
  `fname` varchar(80) NOT NULL,
  `lname` varchar(80) NOT NULL,
  `username` varchar(80) NOT NULL

2. Configuration

Create a new config.php file for database configuration.

Completed Code


$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());


You can either download and include angular.min.js in the page or use CDN.

<script src=''></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>
  <title>How to get data from MySQL with AngularJS - PHP</title>
  <script src=""></script>
 <body ng-app='myapp'>

  <div ng-controller="userCtrl">
    <table >
        <th>First name</th>
        <th>Last name</th>
      <!-- Display records -->
      <tr ng-repeat="user in users">

4. PHP

Create a getData.php file.

From here return JSON Array which has user details (fname, lname, and username).

Completed Code


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 to $scope.users.

At HTML end display data using ng-repeat directive.

Completed Code

var fetch = angular.module('myapp', []);

fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
  method: 'get',
  url: 'getData.php'
 }).then(function successCallback(response) {
  // Store response data
  $scope.users =;


6. Demo

View Demo

7. Conclusion

Angular provide $http service which helps to make an AJAX call to the server.

Similar to jQuery AJAX request you can either send GET or POST type request. Within the tutorial example, I send a GET request from $http to fetch data from the MySQL database in JSON format.

If you found this tutorial helpful then don't forget to share.