How do I use an angular-js $resource?

Question

So I'm trying to use the angular-js $resource function while building an app with ionic framework. But I can't seem to make it work. Relevant code:

Service.js

.factory('Pages', function($resource) {
    var source = $resource("http://localhost:5432/api/pages",{},
    {query: { method: "GET", isArray: false }});
    return source;
})

controllers.js

.controller('PagesCtrl', function($scope, Pages) {
$scope.pages =  Pages.query();
$scope.results = $scope.pages.results;
console.log($scope.results);
})

browse.html

<ion-view view-title="Browse">
  <ion-content>
    <h1>Browser</h1>
    <ion-list>
      <ion-item ng-repeat="page in results">
        <h2>{{page.title}}</h2>
      </ion-item>

    </ion-list>
  </ion-content>
 </ion-view>

and the data

{
"count": 2,
"next": null,
"previous": null,
"results": [
    {
        "id": 1,
        "parent": null,
        "title": "Blog",
        "content": "<p>Blog</p>",
        "content_model": "richtextpage",
        "slug": "blog",
        "publish_date": null,
        "login_required": false,
        "meta_description": "Blog",
        "tags": ""
    },
    {
        "id": 2,
        "parent": null,
        "title": "Lorem Ipsum",
        "content": "Lorem ipsum ....",
        "tags": ""
    }
]
}

But the console log (in controllers.js) will always print 'undefined'. I've been at it for hours and I can't seem to find what's wrong.

Answer 1

$scope.pages is a promise. To write to console you'll need to use a callback function like this:

$scope.pages = Pages.query();
$scope.pages.$promise.then(function (result) {
  console.log(results);
});

Answer 2

The actual result object of .query() is a promise that will hold the result at some point.

So at the moment you try to access the result property of your payload, it is likely that the request is not yet finish.

However, Angular ng-repeat statement has a built in support for promises so in your view, browse.html, if you do:

  <ion-item ng-repeat="page in pages.results">

Instead of dealing with a $scope.results in your controller, everything should looks better.

Answer 3

Here is my suggestion for the service:

.factory('Pages', function($resource) {
    return {
       source: $resource("http://localhost:5432/api/pages",{},
                   { 
                      query: { 
                          method: "GET", 
                          isArray: false 
                      }
                    })
    }
})

and then in the ctrl:

.controller('PagesCtrl', function($scope, Pages) {
    $scope.pages =  Pages.source.query();
    $scope.results = $scope.pages;
    console.log($scope.results);
})

But you know that the query is returning only an object because you tell the $resource that your query doesn't return an Array (it is false).

This only have to work if your Backend is correct defined.