Simple restangular example broken with AngularJS 1.2

Issue

I’m doing a basic Restangular example and it works on AngularJS 1.1, however on 1.2, the REST request is sent, data is received, but the table is not displayed properly.

I read through some threads here about upgrading from 1.1 to 1.2 but I don’t see the issue as the example is very simple and does not explicitly use ngRoute, isolated scopes or custom directives.

HTML

<!DOCTYPE html>

<html ng-app="countries">

  <head>
    <meta charset="utf-8" />
    <title>REST Country Example</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="//code.angularjs.org/1.2.27/angular.min.js"></script>
    <script src="//code.angularjs.org/1.2.27/angular-resource.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="//cdn.rawgit.com/mgonto/restangular/master/dist/restangular.min.js"></script>

    <script src="app.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <div>
    <h2>Restangular Example with RESTCountries.eu</h2>


      <input type="text" ng-model="search" class="search-query" placeholder="Search">
      <table class="table table-responsive table-striped">
        <thead>
        <tr>
          <th>Country</th>
          <th>Capital</th>
          <th>Code</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="country in countries | filter:search | orderBy:'name'">
          <td>{{country.name}}</td>
          <td>{{country.capital}}</td>
          <td>{{country.alpha2Code}}</td>
        </tr>
        </tbody>
      </table>

  </div>

  </body>

</html>

JS

app = angular.module('countries', ['restangular']);
app.config(function(RestangularProvider) {
      RestangularProvider.setBaseUrl('http://restcountries.eu/rest/v1');
  });

app.controller('mainCtrl', function($scope, Restangular) {
  $scope.countries = Restangular.all('all').getList();
});

1.1.5 Plunk (working)

1.2.27 Plunk (not working)

Any idea what is missing/incorrect in order to get this working properly on 1.2?

Cheers,

Solution

I have never used restangular before. Looks like it returns a promise for 1.2 version, instead of data, I am able to load the data with this minor modification:

app.controller('mainCtrl', function($scope, Restangular) {
  Restangular.all('all').getList().then(function(result) {
    $scope.countries = result;
  });
});

Plunker

Answered By – udalmik

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.