AngularJS database link
index.php
<!doctype html>
<html ng-app="rjtApp">
<head>
<title>PHP MySQL API Consumed with AngularJS</title>
<script src="angular.min.js"></script>
<script src="data.js"></script>
</head>
<body>
<div ng-controller="GetUsers">
<table>
<thead><tr><th>Name</th></tr></thead>
<tbody>
<tr ng-repeat="user in users"><td>{{ user.name }}</td></tr>
</tbody>
</tfoot></tfoot>
</table>
</div>
</body>
</html>
api.php (this connection doesn't have the problems I tested).
<?php
// set up the connection variables
$db_name = 'air';
$hostname = '127.0.0.1';
$username = 'root';
$password = '123456';
// connect to the database
$dbh = new PDO("mysql:host=$hostname;dbname=$db_name", $username, $password);
// a query get all the records from the users table
$sql = 'SELECT USER_NAME FROM air_users LIMIT 1';
// use prepared statements, even if not strictly required is good practice
$stmt = $dbh->prepare( $sql );
// execute the query
$stmt->execute();
// fetch the results into an array
$result = $stmt->fetch( PDO::FETCH_ASSOC );
// convert to json
$json = json_encode( $result );
// echo the json string
echo $json;
?>
data.js
alert("this is connect");
var app = angular.module("rjtApp", []);
app.controller("GetUsers", function($scope, $http)
{
function getProject(){
$http.get("api.php").success(function(data){
$scope.projects = data; //the data are stored in projects
});
};
});
getProject();
I intend to do a live check to see if the database name came out, but I can't even figure out how to connect AngularJS to the database, what was I doing wrong?
source to share
It seems to me that your big problem is that you are using $ http.post instead of $ http.get. The post is for submitting changes and new objects (I think it represents a form), and get is for capturing the output.
So you should be able to change
$http.post("api.php").success(function(data){
$scope.projects = data; //the data are stored in projects
});
to
$http.get("api.php").success(function(data){
$scope.projects = data; //the data are stored in projects
});
This will save the api.php download output (as if you were visiting the site yourself, not the code) across projects. A helpful tip for debugging is
alert(JSON.stringify(varname))
in your code if you want to debug. A warning will appear containing the JSON content of your variable as a string. In your case, it would be:
alert(JSON.stringify($scope.projects)).
Apologies for any code formatting issues. I am new to the system.
source to share
You are calling getProject
from outside the controller, so there is undefined (local to the controller). So move this call inside:
alert("this is connect");
var app = angular.module("rjtApp", []);
app.controller("GetUsers", function($scope, $http)
{
function getProject() {
$http.get("api.php").success(function(data) {
$scope.projects = data; //the data are stored in projects
});
};
getProject(); // moved this line
});
Then the service should run $http
. You should technically use a query GET
, but it will still work similarly to POST
. I want to point out that you are not currently using projects
anywhere on your page, so you will only see the data in the network console.
source to share