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><metacharset="UTF-8"><title></title><scriptsrc="Scripts/angular.min.js"type="text/javascript"></script><scriptsrc="Scripts/angular-route.js"type="text/javascript"></script><scriptsrc="Scripts/Script.js"type="text/javascript"></script><linkhref="Styles.css"rel="stylesheet"type="text/css"/></head><bodyng-app="Demo"><tablestyle="font-family: Arial"><tr><tdcolspan="2"class="header"><h1>
WebSite Header
</h1></td></tr><tr><tdclass="leftMenu"><ahref="#/home">Home</a><ahref="#/courses">Courses</a><ahref="#/students">Students</a></td><tdclass="mainContent"><ng-view></ng-view></td></tr><tr><tdcolspan="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.
*/classDatabase{
// specify your own database credentials private$host = "localhost";
private$db_name = "Students";
private$username = "root";
private$password = "nyan";
public$conn;
// get the database connection publicfunctiongetConnection(){ $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.
*/classStudents{
// 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 publicfunction__construct($db){
$this->conn = $db;
}
// read productspublicfunctionreadAll(){
// 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 foundif($num>0){
$x=1;
// retrieve our table contents// fetch() is faster than fetchAll()// http://stackoverflow.com/questions/2770630/pdofetchall-vs-pdofetch-in-a-loopwhile ($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><ling-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 ><ling-repeat="student in students">{{student.name}}</li></ul>
Post a Comment for "Angularjs's Http Service Always Returns Error"