8

I am a newbie to AngularJS. I am using a rails application to expose data in json format. The data is to be used by angular app. The angular repo and the rails repo are completely different. The reason for different repositories is because I want my rails repo just to expose data using APIs which i can use in the angular app.

My rails controller is as below

class Api::V1::PhonesController < ApplicationController
  def index
    render json: Phone.all
  end

  def show
    render json: Phone.find(params[:id])
  end
  ...
end

Now, when i visit 'localhost:3000/api/v1/phones', it returns me the json data for all the phones. When I visit 'localhost:3000/api/v1/phones/1', it returns the the json data for the phone with id 1. I validated the json data format using http://jsonlint.com/. Everything works fine till here.

My angularjs route file is as:

$routeProvider.
   when('/phones', {
     templateUrl: 'list.html',
     controller: 'PhoneListController' 
   }).
   when('/phones/:id', {
     templateUrl: 'show.html',
     controller: 'PhoneShowController'
   }).
   otherwise({
     redirectTo: '/phones'
   });
}]);

My index.html in the angular repo has the list.html template embedded in it.

<html ng-app='phoneCatApp'>
  ...
</html>
<script type="text/ng-template" id="list.html">
  This is the list template.
</script>

the code for the services.js is as:

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

phoneCatApp.factory('appServices', ['$http', '$q', function($http, $q){
  var url = "http://localhost:3000/api/v1/";

  //get all phones
  this.getPhones = function(){
    var defered = $q.defer();
    var listApi = url + "phones";

    $http.jsonp(listApi).then(function(results){
      defered.resolve(results);
    }, function(error){
      defered.reject(error);
    });
    return defered.promise;
    }
  return this;
}]);

The text in the script template is displayed as well when I visit '#/phones'. The problem is that 1) In chrome, following error is displayed when i inspect the page.

Refused to execute script from 'http://localhost:3000/api/v1/phones' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

2) in firefox, the following error is getting displayed.

SyntaxError: missing ; before statement

Thanks for the help.

Prasad Surase
  • 6,486
  • 6
  • 39
  • 58

1 Answers1

7

Hey so I believe your problem is that your rails controller is returning JSON and NOT JSONP. Your controller has to explicitly specify a callback function, which can be specified by the request params.

See Handling jsonp in rails 3 controller for an example of returning JSONP from a rails controller

So your rails code would look like (argh my rails is very very rusty...):

class Api::V1::PhonesController < ApplicationController
  def index
    if params[:callback]
      format.js { render :json => {:phones => Phone.all.to_json}, :callback => params[:callback] }
    else
      format.json { render json: {:phones => Phone.all.to_json}}
    end
end

Then for the angular side, this answer should help you out: parsing JSONP $http.jsonp() response in angular.js

And I think your angular would then look like:

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

phoneCatApp.factory('appServices', ['$http', '$q', function($http, $q){
  var url = "http://localhost:3000/api/v1/";

  //get all phones
  this.getPhones = function(){
    var defered = $q.defer();
    var listApi = url + "phones?callback=JSON_CALLBACK";

    $http.jsonp(listApi).then(function(results){
      defered.resolve(results);
    }, function(error){
      defered.reject(error);
    });
    return defered.promise;
    }
  return this;
}]);
Community
  • 1
  • 1
urban_raccoons
  • 3,499
  • 1
  • 22
  • 33
  • getting error: "ActionController::InvalidCrossOriginRequest (Security warning: an embedded – Prasad Surase Aug 06 '14 at 04:59
  • Suppose there is a service which exports json data to lot many apps. Here, i cant modify the server code to consider the callback. The apps which are going to consume the json data need to handle it. how can that be done? – Prasad Surase Aug 06 '14 at 05:01
  • So this might be better as a separate question, perhaps even on securityexchange, but the docs are here: http://edgeapi.rubyonrails.org/classes/ActionController/RequestForgeryProtection.html http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf (a good rails security guide)... Basically, implementing good csrf protections when you want to provide a JSONP endpoint is a little tricky and requires some careful thinking. Are the apps/consumers going to be on different domains than the REST server? A good start: http://stackoverflow.com/questions/613962/is-jsonp-safe-to-use – urban_raccoons Aug 07 '14 at 04:52
  • the apps/consumers are going to be different apps. My angular app theme is based on the official angularjs tutorial(phones catalogue) app. the only difference is that the tutorials use json files stored in the app to retrieve data whereas i am using a rails app to expose the data using APIs. – Prasad Surase Aug 07 '14 at 05:06
  • 1
    Honestly, if you're interested in having a secure app, I would use CORS (cross-origin-request-sharing) instead of JSONP. That way your REST server can actually choose specific domains to allow cross-domain requests from. Also - you can make use of angular's CSRF protections with tokens in the headers and you can check those tokens on your rails side. – urban_raccoons Aug 07 '14 at 10:03