AngularJS - Не удается получить запрос AJAX на работу

Question

Я новичок в Angular (несколько часов нового). Я получаю в значительной степени то, что хочу, путем настройки демо. Но я не могу получить мой AJAX запрос на работу.

Я пробовал различные решения, но наступает бесконечный цикл (выясняется, что так работает Angular). В другом решение ничего не происходит ..

мое текущее решение (пытался поместить peopleController везде):

Контроллер:

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> 

Но дает мне эту ошибку:

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 

Надежда кто-то может помочь мне здесь :)

Other solutions i tried for example

Answer 1

Если вы хотите отдельный контроллер под названием peopleController вам нужно определить его отдельно следующим образом:

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. 
      }); 
     } 
}]);  

Answer 2

Вам нужно удалить $ рамки и $ HTTP от peopleController функции, которые подменяют существование $ HTTP & Amp; Amp; $ Сфера

Другое дело, вы должны упомянуть ng-controller='MainController' вместо ng-controller='peopleController'

Изменение имени peopleController в getPeople. Я предполагаю, что вы хотите использовать функцию вместо контроллера.

Answer 3

соответствует имени контроллера в вашем файле html и js, если это «peopleController» в вашем имени файла html, это «peopleController» в контроллере, а не «MainController».

чем изменить строку

function peopleController($scope,$http){ 

в

function peopleController(){ 

вы используете инъекции зависимостей в функции контроллера, а не на содержавшихся функциях, содержащаяся функция уже есть доступ к $ что-то, потому что они в области функции контроллера

Answer 4

Ваш view должен ссылаться на указанный вами контроллер, который является MainController:

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

Внутри вашего controller, установите people в [] и связанный с $scope, удалите параметры, передаваемые в peopleController и инициировать запрос. Внимание: в обработчике успеха переименуйте scope в $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() вводит в заблуждение; его цель - получить данные. Я бы рекомендовал переименовать его в getPeople().