Connecting Rails backend with Angular frontend

Question

I'm new to Angular, and I'd really appreciate some help in connecting my Rails backend with my Angular frontend.

In my Angular controller, I want to retrieve JSON data from my Rails backend. Using, jbuilder, I am able to retrieve JSON from this URL: http://localhost:3000/assessments/1.json. The JSON is: {"id":1,"course_id":1,"part_id":1,"lesson_id":1,"type_of":"Quiz"}. This seems okay backend-wise. But, when I try to retrieve that JSON in my Angular controller...

app.controller('ThisController', [
'$scope',
'$resource',
function($scope, $resource){
  var Assess = $resource("/assessments/:id.json", {id: "@id", format: 'json'});
  console.log(Assess);
  console.log(Assess.get());

  Assess.get(function(callbackdata){
      //function is called on success
      console.log(callbackdata);
    }
  );

  $scope.findType = function() {
    $resolved = true;
    $scope.description = 'This is a ' + Assess.type_of + '!';
  };

}]);

...I get this in my console.log...

1. function Resource(value)
2. Resource {$promise: Promise, $resolved: false}
3. Resource {0: "<", 1: "!", 2: "D", 3: "O", 4: "C", 5: "T", 6: "Y", 7: "P", 8: "E", 9: " ", 10: "h", 11: "t", 12: "m", 13: "l",...

The third console.log output is individual string characters broken up from my layout/application.html.erb file!

In my Angular view...

<div>
  <h3>Type:</h3>
    <button ng-click='findType()'>Find Type</button>
  <hr>
  {{description}}
</div>

... I get, This is a undefined! when I call the function for 'findType()'... for {{description}}.

If anyone can tell me where I've gone wrong with $resource, I'd sure appreciate it. PS: I'm set up with the ngResource dependency, so that's not an issue. Thanks so much!!

Answer 1

You can check what angular requests and it's response in the Network tab in Chrome Inspector. Also check Rails' log to see if the format is processed correctly.