How it works

This page is the result of JohnT's attempts to understand how the pieces fit together. May be helpful to others, especially if not familiar with all the technologies.

The root of everything is src\BloomLibrary_AngularApp\app\index.html. This is the page initially loaded into the browser.

It loads a lot of javascript. The bits in components/X are included libraries, mostly angularjs and add-ons. Note that a lot more is included AFTER the main content. I think this might be so that the browser can display the first page without waiting till all the javascript is loaded.

In index.html, the body contains two main divs. The first is responsible for the grey bar at the top, the second for everything else.

The main body of the page is the

<div ui-view></div>.

This makes use of route-ui. Multiple modules can each specify what should be displayed depending on what follows the # in the page url. This line in app.js specifies that if what follows the # is unrecognized, it should change to 'browse':

$urlRouterProvider.otherwise("/browse");

Multiple modules can specify what to do about particular tags on the end of the url. In browse-module.js the angular.module('BloomLibraryApp.browse'... block of code specifies that the default, 'browse' extension shall replace the ui-view div (or its nonexistent content? I'm not sure) with 'modules/browse/browse.tpl.html' and that the BrowseCtrl controller should be used to manage it.

The main body of modules/browse/browse.tpl.html is a listview div, which repeats a block for each book that matches the filter. Todo: explain how the arguments produce the 5/page view with the block index below.

Each book picture is an

<a ui-sref="browse.detail({bookId: book.objectId})">

With an embedded image. The ui-sref causes the url to change when it is clicked (to browse/detail/X, where X is the ID of the particular book).

modules/detail/DetailModule.js specifies that when the url starts with browse.detail followed by some id (the second colon in url: "/detail/:bookId" makes bookId a property of the current scope with value whatever follows /detail/...todo: why isn't url /browse/detail/:bookId?). Such a url displays a dialog when entered.

Restful communication with Parse.com

This is implemented in src\BloomLibrary_AngularApp\app\modules\common\services.js, which defines three services, one for authentication (interacts with the User table), one for the books table, and one I haven't figured out yet. The authService contains the magic that identifies our Parse.com account, and adding appropriate information to it when we have authenticated a user.