I am using angular js script to fetch data from external php file encoded in json in html page. I have used $http.get(page2.php) method to fetch json encoded array written in another file. But the problem is its not showing any output just a blank screen I dont know where am I doing wrong.
Here's page1.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.controller('myctrl',function($scope,$http){
$http.get('page2.php').success(function(response){
$scope.names = response;
});
});
</script>
</head>
<body>
<div>
<table ng-app="myapp" ng-controler="myctrl" >
<tr ng-repeat="x in names">
<td>{{ x.id }}</td>
<td>{{ x.name }}</td>
<td>{{ x.age }}</td>
</tr>
</table>
</div>
</body>
</html>
Here's page2.php
<?php
$con = mysqli_connect('localhost','root','','practice');
if(!$con){
die("couldnt connect".mysqli_error);
}
$query = "SELECT * FROM records";
$result = $con->query($query);
$r = array();
if( $result->num_rows>0){
while($row = $result->fetch_assoc()){
$r[] = $row;
}
}
$res = htmlspecialchars(json_encode($r));
echo $res;
?>
I can't figure out where am I doing wrong.
