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 :)
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
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()
.
You need to remove $scope and $http from peopleController
function which are overriding the existence of $http &amp; $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.
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.
});
}
}]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.