3. Step 3 - Implement the Retrieve/List All Use Case

This use case corresponds to the "Retrieve/Read" operation from the four basic CRUD data management operations.

The user interface for this use case is provided by the view template partials/listAllBooks.html containing a table for displaying information about books with the request URL path #/showAllBooks:

<h1>Public Library: List all books</h1>
<table ng-init="getAllBooks()">
  <thead><tr>
    <th>ISBN</th><th>Title</th><th>Year</th>
  </tr></thead>
  <tbody><tr ng-repeat="book in books">
    <td>{{book.isbn}}</td>
    <td>{{book.title}}</td>
    <td>{{book.year}}</td>
  </tr></tbody>
</table>

This view template, as well as any other one, is rendered within the ng-view container element defined in index.html. By setting the ng-init event handler attribute to getAllBooks() we make AngularJS invoking the method getAllBooks() defined in BooksController before the table element is rendered, .which retrieves all book records from the Parse cloud data store and makes them available in the array $scope.books.

Then, due to the table row rendering loop specified by the ng-repeat attribute in the table/tbody/tr element, the table body is populated with book data rows showing the ISBN, title and year of each book, as specified by the expressions {{book.isbn}}, {{book.title}} and {{book.year}}.

Let's take a look at the BooksController and its method getAllBooks():

plControllers.controller('BooksController',
    ['$scope', '$http', function ( $scope, $http){
  ...
  $scope.getAllBooks = function () {
    $http({
      method: 'GET',
      url: 'https://api.parse.com/1/classes/Book'
    })
      .success( function( data){
        $scope.books = data.results;
      })
      .error( function( data) {
        alert("ERROR when getting all books", data);
      });
  };
  ...
}]);

When the GET request succeeds, all objects retrieved from the Parse class Book are stored in data.results and then copied to $scope.books. When the request fails, an error message is stored in data and then shown in an alert box.