6. Step 6 - Implement the Delete Use Case

This use case corresponds to the delete/destroy operation from the four basic CRUD data management operations. The request URL path of this operation is #/deleteBook.

Like for the Update use case, we have a view template for the user interface, partials/deleteBook.html, which invokes a corresponding BooksController method, destroyBook(). The deleteBook view template has a select field for choosing the book to be deleted and an output field for each attribute of the $scope.book view model that is to be shown. Notice that by using output fields, we do not allow changing any value.

<h1>Public Library: Delete a book record</h1>
<form ng-init="getAllBooks()">
  <div ng-hide="book">
    <label>Select book:
      <select ng-model="book" ng-options="book.title for book in books">
        <option value="">---</option>
      </select>
    </label>
  </div>
  <div ng-show="book">
    <div>
      <label>ISBN:
        <output type="text" name="isbn" ng-bind="book.isbn" />
      </label>
    </div>
    <div>
      <label>Title:
        <output type="text" name="title" ng-bind="book.title" />
      </label>
    </div>
    <div>
      <button type="submit" name="commit" ng-click="destroyBook()">
        Delete
      </button>
    </div>
  </div>
</form>

After the user selects a book, the data binding mechanism of AngularJS, specified with ng-bind, takes care of showing the book's ISBN and title in the corresponding output fields.

Let's take a look at the BooksController method destroyBook():

plControllers.controller('BooksController',
    ['$scope', '$http', function ( $scope, $http){
  ...
  $scope.destroyBook = function () {
    var bookUrl = 'https://api.parse.com/1/classes/Book/';
    $http({
      method: 'DELETE',
      url: bookUrl + $scope.book.objectId
    })
      .success( function () {
        alert("SUCCESS: Delete book");
        $scope.book = {};
      })
      .error( function ( data) {
        alert("ERROR: Delete book", data);
      });
    };
  ...
}]);