AngularJS version 1.6 change from `.success` method to `.then` method

Question

actually am following a spring tutorial .. coming to Angularjs he is using .succes

var app=angular.module("MyApp",[]);
.controller("MyController",function($scope,$http){
    $scope.pageProduits=null;

    $http.get("http://localhost:8080/chercherProduits?mc")
    .success(function(data){
         $scope.pageProduits=data;
    })
    .error(function(err){
         console.log(err);
    });

});

now my problem is that success is not working and after searshing i descovered that The .success and .error methods are deprecated and have been removed from AngularJS 1.6. i have to the standard .then method instead. Can someone convert me the existing code to code with the then mothod ? i tried but i failed can anyone helps plz bcz am not familiar with javaScript ? Thank you

.then(response) => .catch(error) => .finally() – tenderloin Mar 20 '17 at 04:30 — tenderloin, Mar 20 '17 at 04:30

score 4 · Answer 1 · edited May 23 '17 at 11:54

Before

$http(...).success(function onSuccess(data, status, headers, config) {
  // Handle success
  //...
}).error(function onError(data, status, headers, config) {
  // Handle error
  //...
});

After

$http(...).then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    //...
  }).catch(function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    //...
  });

For more information, see AngularJS Developer Guide - Migrating from V1.5 to V1.6

See also, Why are angular $http success/error methods deprecated? Removed from v1.6?

Sachila Ranawaka · Answer 2 · 2017-03-20T04:26:54.660

1

use then like this to catch the response. make sure to use response.data because response data comes under data property

$http.get("http://localhost:8080/chercherProduits?mc")
.then(function(response){
     $scope.pageProduits=response.data;
},function(response){
     console.log(response.data);
})

use ng repeat to show the data in row wise

<body ng-app="MyApp" ng-controller="MyController">
   <div class="container">
      <table class="table table-striped">
         <thead>
            <tr >
               <th>ID</th>
               <th>Désignation</th>
               <th>Prix</th>
               <th>Quantité</‌th> 
            </tr>
         </thead>
         <tbody>
            <tr ng-repeat="p in pageProduits">
               <td>{{p.id}}</td>
               <td>{{p.designation}}</td>
               <td>{{p.prix}}</td>
               <td>{{p.quantite}}</td>
            </tr>
         </tbody>
      </table>
   </div>
   <script type="text/javascript" src="node_modules/angular/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> 
</body>

edited Mar 20 '17 at 04:26

answered Mar 20 '17 at 04:08

Sachila Ranawaka

39,756
7
56
80

thank u sachila `var app=angular.module("MyApp",[]); app.controller("MyController",function($scope,$http){ $scope.pageProduits=null; $http.get("http://localhost:8080/chercherProduits?mc") .then(function(resonse){ $scope.pageProduits=resonse.data; },function(resonse){ console.log(resonse.data); }) });` – Rania El'Oueslati Mar 20 '17 at 04:16
..........

ID Désignation Prix Quantité

{{p.id}} {{p.designation}} {{p.prix}} {{p.quantite}}

– Rania El'Oueslati Mar 20 '17 at 04:21
but the result is not showing :( no errors like before with the js fine but i cannot see the rows like in the tertorial.. can u help me ? – Rania El'Oueslati Mar 20 '17 at 04:22
yesss sachila ^__^ just ng-repeat="p in pageProduits.content" not only ng-repeat="p in pageProduits". bcz in that page (json) there are lots of informations abut the page produit "totalPages": 24, "totalElements": 120, "last": false, "size": 5, "number": 0, "sort": null, "numberOfElements": 5, "first": true .. "content" is the need and thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaankkkk youuuuuu – Rania El'Oueslati Mar 20 '17 at 04:44
No prob. Make sure to mark as answer if this helped – Sachila Ranawaka Mar 20 '17 at 04:57

score 0 · Answer 3 · answered Mar 20 '17 at 04:11

The AngularJS $http service makes a request to the server, and returns a response.Use then instead of success like below:

var app=angular.module("MyApp",[]);
app.controller("MyController",function($scope,$http){
$scope.pageProduits=null;

$http.get("http://localhost:8080/chercherProduits?mc")
.then(function(data){  // function that execute on ajax success
     $scope.pageProduits=data.data;
}, function error(function(err){  //function that execute on ajax error
     console.log(err.statusText);
});
});

score 0 · Answer 4 · answered Mar 20 '17 at 04:28

As per angular Js official documentations. Success and error methods are no longer available. These methods are depreciated instead they recommend to use standard .then method. Succces methods return only the data from the response but in .then method, full response object is returned.

var app=angular.module("MyApp",[])
.controller("MyController",function($scope,$http){
    $scope.pageProduits=null;

    $http.get("http://localhost:8080/chercherProduits?mc")
    .then(function(response){
         if(response.status === 200) {
             $scope.pageProduits=response.data
         }
    }, function(error) {
        console.log(error)
    });
});

For More Info: https://docs.angularjs.org/api/ng/service/$http

AngularJS version 1.6 change from `.success` method to `.then` method

4 Answers4

Before

After

Linked