AngularJS - Can't get AJAX request to work

Question

I'm new to Angular (few hours new). I'm getting pretty much what I want, by adjusting the demo. But i can't get my AJAX request to work.

I tried various solutions, but on gets in an endless loop (figured out that's the way how Angular works). In an other solution nothing really happens..

My current solution (tried to place the peopleController about everywhere):

Controller:

app.controller('MainController', ['$scope','$http', function($scope,$http) {
    //$http is working in this

    var scrollItems = [];

    for (var i=1; i<=100; i++) {
        scrollItems.push('Item ' + i);
    }

    $scope.scrollItems = scrollItems;    


    function peopleController($scope,$http){
        // Simple GET request example :
        $http.get('/public/ajax.php').
        success(function(data, status, headers, config) {
            console.log("worked");
            // this callback will be called asynchronously
            // when the response is available
            scope.people = data;
            }).error(function(data, status, headers, config) {
                console.log("fail");          
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });
     }          
}]);

HTML:

<div ng-controller="peopleController">
     {{people}}
</div>

But it gives me this error:

Error: [ng:areq] http://errors.angularjs.org/1.3.0/ng/areq?p0=peopleController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:6:416
    at Mb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:19:510)
    at nb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:20:78)
    at $get (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:74:494)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:56:415
    at r (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:7:408)
    at M (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:56:281)
    at g (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:51:201)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:50:309

Hope someone can help me out here :)

Other solutions i tried for example

Answer 1

match the controller name in your html and js file, if it's 'peopleController' in you html file name it 'peopleController' in the controller rather than 'MainController'.

than change the line

function peopleController($scope,$http){

to

function peopleController(){

you use dependency injection in the controller function, not on the contained functions, the contained function already have access to $something because they are under the controller function's scope

Answer 2

Your view must refer to the controller you declared, which is MainController:

<div ng-controller="MainController">
        {{people}}
</div>

Inside your controller, set people to [] and bound to $scope, remove the parameters you passed in peopleController and initiate the request. Caution: in the success handler, rename scope to $scope.

$scope.people = [];

peopleController(); //initiate your ajax request

function peopleController(){ //remove the parameters
        // Simple GET request example :
        $http.get('/public/ajax.php').
          success(function(data, status, headers, config) {
          console.log("worked");
            // this callback will be called asynchronously
            // when the response is available
            $scope.people = data; //scope -> $scope
      }).
      error(function(data, status, headers, config) {
      console.log("fail");        
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });
    }     

peopleController() is misleading; its purpose is to get data. I'd recommend to rename it to getPeople().

Answer 3

You need to remove $scope and $http from peopleController function which are overriding the existence of $http & $scope

Other thing you should mention ng-controller='MainController' instead of ng-controller='peopleController'

Also change the name peopleController to getPeople. I'm assuming that you want function there instead of controller.

Answer 4

If you want a separate controller called peopleController you need to define it separately as follows:

app.controller('MainController', ['$scope','$http', function($scope,$http) {
      //$http is working in this

      var scrollItems = [];

      for (var i=1; i<=100; i++) {
        scrollItems.push('Item ' + i);
      }

      $scope.scrollItems = scrollItems;    



 }]);

 app.controller('peopleController', ['$scope','$http', function ($scope,$http){
        // Simple GET request example :
        $http.get('/public/ajax.php').
          success(function(data, status, headers, config) {
          console.log("worked");
            // this callback will be called asynchronously
            // when the response is available
            $scope.people = data;
          }).
          error(function(data, status, headers, config) {
          console.log("fail");        
            // called asynchronously if an error occurs
            // or server returns response with an error status.
          });
        } 
 }]);