Within my application, there exists essential data that is utilized by various controllers to carry out their functions.
For instance, the user and other entities must make REST calls to the server. Currently, I have an AppController (app.js) responsible for loading fundamental data needed by all controllers within ng-views (refer to index.html). The methods loadUser() and loadRequiredEntity() store values obtained from REST calls in indexedDb.
Each controller within ng-views displayed on the index.html reads the loaded data from indexedDb. However, there seem to be some significant issues with this approach:
- Does the AppController ensure that all data is loaded before ng-view controllers attempt to access it?
- The loadUser() and loadRequiredEntity() functions initiate services (e.g., userService) that execute rest-calls and return promises, causing AppController to finish before all data is fully loaded. Consequently, ng-view controllers could start reading from indexedDb before any values are stored there.
How can I effectively load the necessary basic data for other controllers' use? Is an AngularJS controller the most suitable option?
index.html:
<body ng-app="app" id="appBody" ng-controller="AppController as appCtrl">
<md-content id="content" ng-view=""></md-content>
</body>
app.ts:
/// <reference path="../typings/tsd.d.ts" />
module app {
export class AppController {
static $inject = ['$log'];
private _LOG_PREFIX : string = 'AppController: ';
constructor(private $log: ng.ILogService) {
this.$log.info(this._LOG_PREFIX + 'started');
this.loadUser()
.then(this.loadRequiredEntity)
.then(this.markAsAuthenticated, this.handleLoadBasedataError);
}
...
}
}