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.
Contents
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.phpinurland setmethodtoget. - Success – AJAX successfully callback handle by
thenwhere storereponse.datato$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>
6. 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.
