How to update request array on angular resource

I have angular to talk to a collection of objects with REST using the $ resource framework. Something like that:

angular.module('ngBooks', ['ngResource'])

    .factory('Book', ['$resource', function ($resource) {
        return $resource('/books/:id', {}, {
            all: {method: 'GET', url: '/books/', isArray: true},
            get: {method: 'GET', params: {id: '@id'}},
            delete: {method: 'DELETE', params: {id: '@id'}}
        });
    }])

    .controller(
        'ngBookController',
        ['$scope', '$http', 'Book', function ($scope, $http, Book) {
            $scope.books = Book.all();
        }]
    );

So this is really good. Now I have special methods for all book objects in my area, so I can make them a beautiful dynamic table as follows:

<div ng-app="ngBooks" ng-controller="ngBookController as controller">
  <table>
    <thead><tr><th>Title</th><th>Author</th></tr></thead>
    <tbody>
      <tr ng-repeat="book in books">
        <td>{{ book.title }}</td>
        <td>{{ book.author }}</td>
        <td><button ng-click="book.$delete()">Delete</button></td>
      </tr>
    <tr ng-show="!books.length"><td colspan="3"><i>No books here.</i> </td></tr>
  </table>
  </div>
  <button ng-click="???">Refresh books list</button>
</div>

Question: How to make a button to update the list of books? I know that I can "steer mine" in the controller, something like this:

        $scope.refresh = function () {
            $scope.books = Book.all();
        };

And then use

  <button ng-click="refresh()">Refresh books list</button>

But I feel that there has to be some kind of β€œmagical” way to do this, right? In the end, all my objects bookmagically have book.$delete()... I want to be able to do something like:

  <button ng-click="books.$all()">Refresh books list</button>

- ? angular ngResource?

+4

All Articles