I'm doing an AngularJS tutorial (the tutorial is more than a year old but it still works). I am in a lesson in which the get method is used to obtain the data of a JSON file. Of course, to handle the errors I use (or use in the tutorial) the functions .success and .error . When I'm going to run the example, it sends me a message to the console saying that .success and .error are not function names and reading around I find out they were discontinued (the version of Angular that I downloaded is newer than the which is used in the tutorial) and that I should use .then and .catch .
The problem is that, when using .then and making the call with the ng-repeat directive, it only shows 5 items (out of 100 that should be) and also empty.
Another detail is that I send data to the console and it shows them all in the console. Out of curiosity I got the version of Angular that is used in the tutorial to use .success and .error . My surprise is that with .success it shows me all the JSON data.
Could someone tell me if the .then method has any limitations on the amount of data it processes or with the ng-repeat directive?
Here are the codes with version 1.6 ( .then and .catch ) and with 1.3 ( .success and .error )
AngularJS 1.6
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="MyFirstApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>HTTP</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-controller="FirstController">
<input type="text" name="" id="" ng-model="newPost.title">
<br>
<textarea name="" id="" cols="30" rows="10" ng-model="newPost.body"></textarea>
<br>
<button ng-click="addPost()">Enviar</button>
<ul>
<li ng-repeat="pos in posts">
<h2>{{pos.title}}</h2>
<p>{{pos.body}}</p>
</li>
</ul>
</body>
</html>
JS:
angular.module("MyFirstApp", [])
.controller("FirstController", function($scope, $http)
{
$scope.posts = [];
$scope.newPost = {};
$http.get('http://jsonplaceholder.typicode.com/posts')
.then(function(data)
{
console.log(data);
$scope.posts = data;
})
.catch(function(err)
{
});
$scope.addPost = function()
{
$http.post('http://jsonplaceholder.typicode.com/posts',
{title: $scope.newPost.title,
body: $scope.newPost.body,
userID: 1})
.success(function(data, status, header, config)
{
console.log(data);
$scope.posts.push($scope.newPost);
$scope.newPost = {};
})
.error(function(err, status, header, config)
{
console.log(err);
});
}
});
AngularJS 1.3
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="MyFirstApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>HTTP</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-controller="FirstController">
<input type="text" name="" id="" ng-model="newPost.title">
<br>
<textarea name="" id="" cols="30" rows="10" ng-model="newPost.body"></textarea>
<br>
<button ng-click="addPost()">Enviar</button>
<ul>
<li ng-repeat="pos in posts">
<h2>{{pos.title}}</h2>
<p>{{pos.body}}</p>
</li>
</ul>
</body>
</html>
JS:
angular.module("MyFirstApp", [])
.controller("FirstController", function($scope, $http)
{
$scope.posts = [];
$scope.newPost = {};
$http.get('http://jsonplaceholder.typicode.com/posts')
.success(function(data)
{
console.log(data);
$scope.posts = data;
})
.error(function(err)
{
});
$scope.addPost = function()
{
$http.post('http://jsonplaceholder.typicode.com/posts',
{title: $scope.newPost.title,
body: $scope.newPost.body,
userID: 1})
.success(function(data, status, header, config)
{
console.log(data);
$scope.posts.push($scope.newPost);
$scope.newPost = {};
})
.error(function(err, status, header, config)
{
console.log(err);
});
}
});