AngularJS's Http Service Always Returns Error
I am wondering why my AngularJS http service is always returning an error with status -1. I have PHP code and run this as localhost/ajax.php. This file can retrieve data from the d
Solution 1:
You state in your question that your scripts probably breaks because of the database query.
When your query takes a long time it can cause a timeout. The response code -1 usually means the request was aborted, e.g. using a config.timeout according to the angular js documentation https://docs.angularjs.org/api/ng/service/$http.
You can try to increase your timeout:
$http.get('ajax.php', {timeout: 5000, method: 'GET'});
In this example it will be set to 5 seconds.. Test your ajax.php to see how long your request takes.
Edit:
Also make sure you use the right URL. In your question you use a different URL to test your ajax call.
Solution 2:
Finally, really finally, I could make it. Following code makes the process works.
index.php
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script src="Scripts/angular-route.js" type="text/javascript"></script>
<script src="Scripts/Script.js" type="text/javascript"></script>
<link href="Styles.css" rel="stylesheet" type="text/css"/>
</head>
<body ng-app="Demo">
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
<a href="#/home">Home</a>
<a href="#/courses">Courses</a>
<a href="#/students">Students</a>
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
database.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
class Database{
// specify your own database credentials
private $host = "localhost";
private $db_name = "Students";
private $username = "root";
private $password = "nyan";
public $conn;
// get the database connection
public function getConnection(){ $this->conn = null;
try{
$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
}catch(PDOException $exception){
echo "Connection error: " . $exception->getMessage();
}
return $this->conn;
}
}
?>
Students.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
class Students{
// database connection and table name
private $conn;
private $table_name = "tblStudents";
// object properties
public $id;
public $name;
public $gender;
public $city;
// constructor with $db as database connection
public function __construct($db){
$this->conn = $db;
}
// read products
public function readAll(){
// select all query
$query = "SELECT
id, name, gender, city
FROM
" . $this->table_name . "
ORDER BY
id";
// prepare query statement
$stmt = $this->conn->prepare( $query );
// execute query
$stmt->execute();
return $stmt;
}
}
?>
ReadStudents.php
<?php
// include database and object files
include_once 'database.php';
include_once 'Students.php';
// instantiate database and product object
$database = new Database();
$db = $database->getConnection();
// initialize object
$students = new Students($db);
// query products
$stmt = $students->readAll();
$num = $stmt->rowCount();
$data="";
// check if more than 0 record found
if($num>0){
$x=1;
// retrieve our table contents
// fetch() is faster than fetchAll()
// http://stackoverflow.com/questions/2770630/pdofetchall-vs-pdofetch-in-a-loop
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
// extract row
// this will make $row['name'] to
// just $name only
extract($row);
$data .= '{';
$data .= '"id":"' . $id . '",';
$data .= '"name":"' . $name . '",';
$data .= '"gender":"' . $gender . '",';
$data .= '"city":"' . $city . '"';
$data .= '}';
$data .= $x<$num ? ',' : ''; $x++; }
}
// json format output
echo '{"records":[' . $data . ']}';
?>
Script.js
var app = angular.module("Demo", ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/home", {
templateUrl:"Templates/home.html",
controller:"homeController"
})
.when("/courses", {
templateUrl:"Templates/courses.html",
controller:"coursesController"
})
.when("/students", {
templateUrl:"Templates/students.html",
controller:"studentsController"
})
})
.controller("homeController", function($scope){
$scope.message = "Home Page";
})
.controller("coursesController", function($scope){
$scope.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
})
.controller("studentsController", function ($scope, $http) {
$http.get("api/ReadStudents.php").success(function(response){
$scope.students = response.records;
});
});
courses.html
<h1>Courses we offer</h1>
<ul>
<li ng-repeat="course in courses">{{course}}</li>
</ul>
home.html
<h1>{{message}}</h1>
<div>
PRAGIM established in 2000 by 3 s/w engineers offers very cost effective training.
</div>
<ul>
<li>Training delivered by real time softwares experets</li>
<li>Realtime project discussion relating to the possible interview questions</li>
<li>Trainees can attend training and use lab untill you get a job</li>
<li>Resume preparation and mockup interviews</li>
<li>100% placement assistant</li>
<li>lab facility</li>
</ul>
students.html
<h1>List of students</h1>
<ul >
<li ng-repeat="student in students">{{student.name}}</li>
</ul>
Post a Comment for "AngularJS's Http Service Always Returns Error"