AngularJS's http service always returns error

Question

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 database. So php is working fine. The retrieved data is as follows:

[{"id":"1","Name":"Mark","Gender":"Male","City":"London"},  
{"id":"2","Name":"John","Gender":"Male","City":"Chenni"},
{"id":"3","Name":"Hint","Gender":"Male","City":"Singapore"},    
{"id":"4","Name":"Sara","Gender":"Female","City":"Sydney"},   
{"id":"5","Name":"Tom","Gender":"Male","City":"New York"},   
{"id":"6","Name":"Pam","Gender":"Male","City":"Los Angeles"},  
{"id":"7","Name":"Catherine","Gender":"Female","City":"Chicago"},  
{"id":"8","Name":"Mary","Gender":"Femal","City":"Houston"},  
{"id":"9","Name":"Mike","Gender":"Male","City":"Phoenix"},  
{"id":"10","Name":"Rosie","Gender":"Female","City":"Manchestor"},  
{"id":"11","Name":"Lim","Gender":"Male","City":"Singapore"},  
{"id":"12","Name":"Tony","Gender":"Male","City":"Hong Kong"},  
{"id":"13","Name":"Royce","Gender":"Male","City":"London"},  
{"id":"14","Name":"Hitler","Gender":"Male","City":"Germany"},  
{"id":"15","Name":"Tommy","Gender":"Male","City":"New Jersy"}]

This PHP file is called from my AngularJS http service, but that call returns always an error with status -1.

I looked at all the resources but got no clues. My database is setup at localhost using Sql.

My queries are what could be the error. I think that those are making the http service return with error status -1.

My codes are is as follows:

Ajax.php

<?php
    require 'connect.php';

    $connect = connect();

    // Get the data
    $students = array();
    $sql = "SELECT id, Name, Gender, City  FROM tblStudents";

    if($result = mysqli_query($connect,$sql))
    {

      $count = mysqli_num_rows($result);
      $cr = 0;
      while($row = mysqli_fetch_assoc($result))
      {
          $students[$cr]['id']    = $row['id'];
          $students[$cr]['Name']  = $row['Name'];
          $students[$cr]['Gender'] = $row['Gender'];
          $students[$cr]['City'] = $row['City'];         
          $cr++;          
      }
    }

    $json = json_encode($students);
    echo $json;
    exit;

?>

connect.php

<?php
    // db credentials
    define('DB_HOST', 'localhost');
    define('DB_USER','root');
    define('DB_PASS','nyan');
    define('DB_NAME','Students');

    // Connect with the database.
    function connect()
    {
      $connect = mysqli_connect(DB_HOST ,DB_USER ,DB_PASS ,DB_NAME);

      if (mysqli_connect_errno($connect))
      {
        die("Failed to connect:" . mysqli_connect_error());
      }

      mysqli_set_charset($connect, "utf8");


      return $connect;
    }


?>

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) {
                 $scope.students;
                 $http({                    
                    method: 'GET',
                    url: 'api/ajax.php'
                 }).then(function (response) {
                    $scope.students = response.data;
                 }, function (response) {  
                    console.log(response.data,response.status);
                 });                 
            });

index.html

<!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 ng-app="Demo">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="Scripts/angular.min.js" type="text/javascript"></script>
        <script src="Scripts/angular-route.min.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 >         
         <table style="font-family: Arial">
            <tr>
                <td colspan="2" class="header">
                    <h1>
                        WebSite Header
                    </h1>
                </td>
            </tr>
            <tr ng-controller="studentsController">
                <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>

Answer 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.

Answer 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>