Angular JS Fails After Upgrade from 1.1.0 to 1.1.1

Asked 4/4, 2013 at 12:24 Answered 7/4, 2013 at 20:43

Solved javascript angularjs angularjs-ng-repeat angular-resource

When I upgrade the the ng-repeat takes extraordinarily long to load and tries to display MORE content boxes without the content that is being served by $resource.

I have narrowed the problem down to the update between 1.1.0 and 1.1.1. I looked through the changelog but nothing popped out at me to be the culprit, but it must be in there.

Changelog => https://github.com/angular/angular.js/blob/master/CHANGELOG.md#111-pathological-kerning-2012-11-26

The repository for this app => https://github.com/brianpetro/resume

Currently my angular looks like:

app = angular.module("Resume", ["ngResource"])

app.factory "Entry", ["$resource", ($resource) ->
  $resource("/entries")
]

@EntryCtrl = ["$scope", "Entry", ($scope, Entry) ->
  $scope.entries = Entry.query()
]

This happens on multiple views with using ng-repeat:

<html ng-app="Resume">
  <div ng-controller="EntryCtrl">
    <ul>
      <li ng-repeat="entry in entries">
        {{entry.title}}
      </li>
    </ul>
  </div>
</html>

This is AngularJS version 1.1.0: This is AngularJS version 1.1.1:

Xuanxunit answered 4/4, 2013 at 12:24 Comment(1)

/echo/json is returning {} so I had to replace your resource with a mockup (using timeout). I can't see any problems with ng-repeat. Fiddle. – Lowney 4/4, 2013 at 13:46

It's not entirely true that you have to add .json - at least not from my experience when I have switched from 1.0.x to 1.1.x.

In order to make Rails app return json without specyfing extension in URL for Angular 1.1.x you need to make angular add additional header to http request:

myModule.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
}]);

Without that Rails by default renders whole HTML instead of returning JSON.

Github issue reflecting that

Scrubland answered 7/4, 2013 at 20:43 Comment(1)

Doesn't it fit into your example? If your JSON services are available somewhere create a plunker with your angular code and I can show you what should be changed. Adding this header worked for me for Rails 3.2 and Angular 1.1.4. As it's written in Github issue github.com/angular/angular.js/issues/1004 - header is required by Rails to return JSON (if you don't specify .json extension). Other option for you is just to return only JSON in Rails controllers - so instead of respond_to do |format| ... and different actions for different format just render :json – Scrubland 8/4, 2013 at 6:36

The answer was in the URL file extension. Starting with Angular version 1.1.1, it is necessary to include '.json' in the resource.

 app = angular.module("Resume", ["ngResource"])

 app.factory "Entry", ["$resource", ($resource) ->
-  $resource("/entries")
+  $resource("/entries.json", {}, {}, {})
 ]

 app.factory "Done", ["$resource", ($resource) ->
-  $resource("/dones", {}, {update: {method: "PUT"}})
+  $resource("/dones.json", {}, {update: {method: "PUT"}}, {})
 ]

 app.factory "Resource", ["$resource", ($resource) ->
-  $resource("/resources", {}, {})
+  $resource("/resources.json", {}, {}, {})
 ]

Can someone clarify is this is because of my Rails 4 back-end or if it is a new Angular requirement?

Xuanxunit answered 7/4, 2013 at 20:21 Comment(1)

It's angular requirement. I've just posted answer below – Scrubland 7/4, 2013 at 20:45

Recommended topics

Hot tags