$resource Usage

359 views
Skip to first unread message

Pepper Lebeck-Jobe

unread,
May 26, 2012, 10:48:31 AM5/26/12
to ang...@googlegroups.com
So, I'm trying to set up a $resource which is backed by the json api for spreadsheet data. https://developers.google.com/gdata/samples/spreadsheet_sample

Here's what I've tried so far:

<html ng-app>
 <head>
    <title>All That Data</title>
    <script>
      function AgencyCtrl($scope, $resource) {
        $scope.key = "0AnxoLlU0hUtvdHcwUm15NVQwVEdJNzBJUmYxcE03bWc";
            {atl: 'json-in-script', callback:'JSON_CALLBACK'},
            {get: {method: 'JSONP'}});
        $scope.data = []
        $scope.fetch = function() {
          $scope.data = $scope.Sheet.get({key: $scope.key, sheet: 1});
        }
      }
    </script>
    <body>
    <h1>All That Data</h1>
    <button ng-click="fetch()">Fetch</button>
    <div ng-controller="AgencyCtrl">
      <span ng-show="data.length == 0">Loading ...</span>
      <span ng-hide="data.length == 0">{{ data.length }} Results!</span>
      <p ng-repeat="agency in data">
        <span ng-repeat="(label, value) in agency">{{ label }}<b>:</b> {{ value }} <br/></span>
      </p>
    </div>
  </body>
</html>

When I load the page, I get the following error on the javascript console:


I'm not sure how to interpret the error.  I think I'm following the example at: http://code.angularjs.org/1.0.0rc10/docs-1.0.0rc10/api/angular.module.ngResource.$resource

Is that documentation correct?

Also, in the future, I'd like the app to call fetch() as soon as everything is bootstrapped.  Is that something I should do in an ng-init call?

Thanks,
Pepper

Pawel Kozlowski

unread,
May 26, 2012, 10:58:15 AM5/26/12
to ang...@googlegroups.com
Hi Pepper!

From what I can quickly see you need to at least inculde
angular-resource - $resource definition is in a separate module /
file, so you should have something like:

<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0rc10.min.js"></script>

Next time don't hesitate to send jsFiddle (you can start with
http://jsfiddle.net/IgorMinar/ADukg/) - it is way easier to help when
there is a running code example.

Hope this helps,
Pawel
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.

Pepper Lebeck-Jobe

unread,
May 26, 2012, 11:14:35 AM5/26/12
to ang...@googlegroups.com
Pawel,

Thanks for the pointer.  I think the documentation for $resource should be updated to mention that you need the angular-resource javascript file as well.

However, even after adding that <script> line, I'm still getting the same exact javascript message.

I thought about putting together a jsfiddle for my question.  But, I didn't think it would work well with the $resource thing because of concerns about cross-site api calls.

I'll try to put one together now.  http://jsfiddle.net/eljobe/W6gb7/

But, that also doesn't work, and I don't know how to debug in jsfiddle.

Thanks,
Pepper

Robert B. Weeks

unread,
May 26, 2012, 11:20:05 AM5/26/12
to ang...@googlegroups.com
Hey -

So on here - you need to define a module - something like:

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

and then in your 'ng-app' definition (like you have in your fiddle under "Info":

<body ng-app="agencyModule">

(I just have it there because that is where you are setting the 'ng-app' in this fiddle.

Then you shouldn't have those errors.

HTH.
Robert B. Weeks




Reply all
Reply to author
Forward
0 new messages