JSON from Rails to Angularjs

Question

I’m trying to use Angularjs to get JSON from a Rails test app that I put on Heroku. Below you will find my Angular and Rails code.

This is the error that I get in my Firebug console. "NetworkError: 404 Not Found - http://desolate-earth-2852.herokuapp.com/declarations.json"

Is there a reason this is not working?

Angularjs code

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('http://desolate-earth-2852.herokuapp.com/declarations.json')
       .then(function(res){
          $scope.todos = res.data;        
        });
});

Rails code

  def index
    @declarations = Declaration.all

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @declarations }
    end
  end

Here are the routes

Test::Application.routes.draw do
  root :to => 'welcome#index'
  get "welcome/index"
  resources :declarations
end

Do You have routes defined like this: resources :declarations ? — Edgars Jekabsons
– Edgars Jekabsons, Commented Oct 16, 2013 at 21:31
I have added the routes. I had resources :declarations already. — Jonathan
– Jonathan, Commented Oct 17, 2013 at 5:10
that's odd you get a 404. Are you running the angular code also from the same herokuapp? Could you specify the url where the angular code runs? — Manuel van Rijn
– Manuel van Rijn, Commented Oct 17, 2013 at 11:42
@ Manuel van Rijn. I'm running the Angular code locally on my desktop — Jonathan
– Jonathan, Commented Oct 17, 2013 at 13:13

jjl2 · Accepted Answer · 2013-10-29 09:14:52Z

It might be because of Rails JS minification. Ryan Bates talks about this in his Railscast about integrating AngularJS. I notice that you have nothing mentioning that you were accounting for the minification in your config files, and if you aren't, then that means that all of your Dependency Injection in your Angular code needs to be put into and array, like this:

App.controller('TodoCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('http://desolate-earth-2852.herokuapp.com/declarations.json')
    .then(function(res){
       $scope.todos = res.data;        
    });
}]);

Instead of this:

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('http://desolate-earth-2852.herokuapp.com/declarations.json')
   .then(function(res){
      $scope.todos = res.data;        
   });
});

This tells AngularJS what the dependencies are so that if the names do change (during minification) it won’t matter. You have to do this for every function that accepts services, for example the one you have here for creating the app's controller.

Collectives™ on Stack Overflow

JSON from Rails to Angularjs

Angularjs code

Rails code

Here are the routes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Angularjs code

Rails code

Here are the routes

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related