With only using AngularJS it is not possible to get data from 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
Define
For displaying data create a
Completed Code
From here return JSON Array which has user details (fname, lname, and username).
Completed Code
Completed Code
Similar to jQuery AJAX request you can either send GET or POST type request. Within tutorial example, I send GET request from
If you found this tutorial helpful then don't forget to share.
In AngularJS
$http service is use to send AJAX request.1. Table structure
I am usingusers 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 newconfig.php file.
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 includeangular.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 agetData.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.phpinurland setmethodtoget. - Success – AJAX successfully callback handle by
thenwhere storereponse.datato$scope.users.
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. 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 tutorial example, I send GET request from
$http to fetch data from MySQL database in JSON format.If you found this tutorial helpful then don't forget to share.
0 Comments:
Post a Comment