3. Encode our Web Application with Bidirectional Association

Currently the logical Angualr model Publisher and Author will be:

$scope.publisher = {
  "name": "",
  "address": "",
  "publishedBook": []
};

$scope.author = {
  "authorId": 0,
  "name": "",
  "birthDate": Date,
  "deathDate": Date,
  "authoredBooks": []
};

3.1. Show information about published books in the List Publishers use case

For showing information about published books in the List Publishers use case, we can now exploit the derived inverse reference property publishedBooks in js/controllersPackage/PublishersController.js:

$scope.getAllPublishers = function () {
  $http( {
    method: 'GET',
    url: 'https://api.parse.com/1/classes/Publisher'
  })
    .success( function ( data) {
      $scope.publishers = data.results;
      $scope.publishers.forEach( function ( p) {
        // Get the related published books for each publisher
        $http( {
          method: 'GET',
          url: 'https://api.parse.com/1/classes/Book',
          params: {
            where: {
              publisher: {
                __type: 'Pointer',
                className: 'Publisher',
                objectId: p.objectId
              }
            }
          }
        })
          .success( function ( data) {
            p.publishedBooks = angular.copy( data.results);
          })
          .error( function ( data) {
            console.log("Error for get corresponding books: ", data);
          });
      });
    })
    .error( function ( data) {
      console.log( data);
      alert("ERROR: See the error message in console.");
    });
};

Then add a list of Published books for its view side partials/publishers/showAllPublishers.html:

<h1>List all publishers</h1>
<table>
  <thead><tr>
    <th>Name</th><th>Address</th><th>Published books</th>
  </tr></thead>
  <tbody><tr ng-repeat="publisher in publishers">
    <td>{{publisher.name}}</td><td>{{publisher.address}}</td>
    <td><ul>
      <li ng-repeat="publishedBook in publisher.publishedBooks">
        {{publishedBook.title}}
      </li>
    </ul></td>
    </tr>
  </tbody>
</table>

3.2. Show information about authored books in the List Authors use case

For showing information about authored books in the list authors use case, we can now exploit the derived inverse reference property authoredBooks in js/controllersPackage/AuthorsController.js:

$scope.getAllAuthors = function () {
  $http( {
    method: 'GET',
    url: 'https://api.parse.com/1/classes/Author'
  })
    .success( function ( data) {
      $scope.authors = data.results;
      // format string date to real date
      $scope.authors.forEach( function( a) {
        a.birthDate = new Date( a.birthDate);
        if ( a.deathDate) {
          a.deathDate = new Date( a.deathDate);
        }
      });
      $scope.authors.forEach( function ( a) {
        // Get the authored books for each author
        $http( {
          method: 'GET',
          url: 'https://api.parse.com/1/classes/Book',
          params: {
            where: {
              authors: {
                __type: 'Pointer',
                className: 'Author',
                objectId: a.objectId
              }
            }
          }
        })
          .success( function ( data) {
            a.authoredBooks = angular.copy( data.results);
          })
          .error( function ( data) { 
            console.log("Error for getting related books", data);
          });
      });
    })
    .error( function ( data) {
      console.log( data);
      alert("ERROR: See the error message in console.");
    });
};

Then add a list of Authored books for its view side partials/authors/showAllauthors.html:

<div>
  <h1>List all authors</h1>
  <table>
    <thead>
      <tr>
        <th>ID</th><th>Name</th><th>Date of Birth</th>
        <th>Date of Death</th><th>Authored books</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="author in authors">
        <td>{{author.authorId}}</td><td>{{author.name}}</td>
        <td>{{author.birthDate | date: "yyyy-MM-dd"}}</td>
        <td>{{author.deathDate | date: "yyyy-MM-dd"}}</td>
        <td>
          <ul>
            <li ng-repeat="authoredBook in author.authoredBooks">
              {{authoredBook.title}}
            </li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>