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?