current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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
share|improve this question
    
Do You have routes defined like this: resources :declarations ? –  Edgars Jekabsons Oct 16 '13 at 21:31
    
yes, post your routes.rb code –  n_i_c_k Oct 16 '13 at 22:01
    
I have added the routes. I had resources :declarations already. –  Jonathan Oct 17 '13 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 Oct 17 '13 at 11:42
    
@ Manuel van Rijn. I'm running the Angular code locally on my desktop –  Jonathan Oct 17 '13 at 13:13
add comment

1 Answer

up vote 2 down vote

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.