Transferring Data between Rails and Angularjs using JSON

Question

Transferring Data between Rails and Angularjs using JSON

Utilizing Angularjs to fetch JSON data from a Rails test app deployed on Heroku is proving to be a bit challenging. Below you can find the snippets of my Angular and Rails code.

An error message displayed in my Firebug console reads: "NetworkError: 404 Not Found - "

Any insights on why this setup isn't functioning correctly?

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

Route Configuration

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

javascript ruby-on-rails json angularjs heroku

Answer 1

Answer №1

One possible reason for the issue could be due to Rails JS minification. This topic is covered by Ryan Bates in his Railscast on integrating AngularJS. It appears that you haven't accounted for minification in your configuration files, which means all Dependency Injection in your Angular code should be structured within an array like the example below:

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;        
    });
}]);

As opposed to this approach:

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

By specifying dependencies in an array, AngularJS can properly handle changes in names during minification without any issues. This practice should be applied to every function that utilizes services, such as the controller creation function demonstrated here.

Answer 2

One possible reason for the issue could be due to Rails JS minification. This topic is covered by Ryan Bates in his Railscast on integrating AngularJS. It appears that you haven't accounted for minification in your configuration files, which means all Dependency Injection in your Angular code should be structured within an array like the example below:

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;        
    });
}]);

As opposed to this approach:

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

By specifying dependencies in an array, AngularJS can properly handle changes in names during minification without any issues. This practice should be applied to every function that utilizes services, such as the controller creation function demonstrated here.

Transferring Data between Rails and Angularjs using JSON

Angularjs code

Rails code

Route Configuration

Answer №1

Similar questions

AngularJS `addClass` function is failing to apply styles

What makes AJAX take so much time to load?

How can I update a property within an object in a sequential manner, similar to taking turns in a game, using React.js?

Utilizing Node/Express to create dynamic flash messages through res.locals on the Heroku platform

What is the best method for storing numerical data for a Next.js/React website? Should you use a CSV file, make a backend API call, or download

The element is being offset by SVG animation that incorporates transform properties

What is the best way to incorporate variables into the useState hook in React?

Change a Typescript class into a string representation, utilizing getter and setter methods in place of private variables

Angular: synchronously updating scope using data fetched asynchronously from a factory

Modifying the anchor link in a pop-up window according to the clicked link using JQuery

Detecting the failure of chrome.extension.sendRequest

Sinon Stub generates varying values with each invocation

What steps can I take to resolve a memory issue in node.js?

utilize ajax success method to extract json data

The scripts are mistakenly interpreted as stylesheets, but are actually being transferred with the MIME type text/html

Using Angular JS, apply multiple column filters within a table to refine the displayed data

Is there a way to duplicate an image a specified number of times depending on a given output value?

The background image fails to display properly on the server in Next.js

Issue with firing Facebook pixel after router.push() in Next.js

Passing data between child components using Vuejs 3.2 for seamless communication within the application