J
jts-law
Guest
Hello, I have a couple services in my KUIB2 app and am running into some timing issues. We are new to Angular so I'm sure there are better ways to code this but for now, this is what I have. Both of my services initialize data using $http put calls (invokes). The issue is that these return promises that may or may not be resolved by the time the view tries using the data. What is the recommended way (within the KUIB architecture) to guarantee that the services are completely initialized before the view loads? The following is one of the services: class MylibService { constructor($injector, $compile, $http, $location) { this.injector = $injector; this.compile = $compile; this.http = $http; this.providerService = this.injector.get('providerService'); this.serviceUri = this.getServiceUri(); } // constructor getServiceUri() { return this.injector.get('$q')((resolve, reject) => { if (this.serviceUri) { resolve(this.serviceUri); } else { this.providerService .providers() .then( (res) => { this.serviceUri = res.MYAPI.serviceUri; resolve(this.serviceUri); }, (res) => { this.serviceUri = ''; reject(this.serviceUri); } ); } // !this.serviceUri }); } // getServiceUri getMenus(sModule) { return this.injector.get('$q')((resolve, reject) => { this.getServiceUri() .then( (serviceUri) => { if (this.ttMenus[sModule]) { console.log('Getting ' + sModule + ' menus from local data'); resolve({ ttMenus: this.ttMenus[sModule] }); } else { console.log('Getting ' + sModule + ' menus from server'); let req = { headers: { 'Content-Type': 'application/json'}, timeout: 3000, processData: false }, jsonReq = { module: sModule }; this.http .put(serviceUri + 'web/pdo/UI/Prm/Menus', JSON.stringify(jsonReq), req) .then( (res) => { this.ttMenus[sModule] = res.data.response.ttMenus.ttMenus; resolve({ ttMenus: this.ttMenus[sModule] }); }, (res) => { reject({ ttMenus: [] }); } ); } }); }, (res) => { return reject({ ttMenus: [] }); } ) } // getMenus ... } // class MylibService MylibService.$inject = ['$injector', '$compile', '$http', '$location']; export default MylibService; This is how I'm trying to use the service: import BaseController from './controller.js' class SystemInfoTenantStatusCtrl extends BaseController { constructor($scope, $injector, stateData, MylibService, MyDomainService) { super($scope, $injector); this.scope = $scope; this.injector = $injector; this.mylibService = mylibService; this.myDomainService = myDomainService; this.ttPrmBank = []; } // Fired when custom html section is loaded includeContentLoaded() { } // Fired when custom html section loading failed includeContentError(e) { } // Fired when view content is loaded onShow($scope) { var removeWatch = $scope.$watch(() => { return angular.element("#gridStatus").html(); }, (gridPrmBank) => { if (gridPrmBank !== undefined) { this.setupGrid(); removeWatch(); } }); } setupGrid() { let req = { headers: { 'Content-Type': 'application/json'}, processData: false }; this.injector .get('$http') .put(this.mylibService.serviceUri + 'web/pdo/UI/Prm/GetStatus', '', req) .then( (res) => { this.ttPrmBank = res.data.response.ttStatus.ttStatus; let gridPrmBank = angular.element("#gridStatus").kendoGrid({ dataSource: { data: this.ttStatus, pageSize: 999999999, schema: { model: { fields: { ... } } } }, pageable: false, sortable: true, filterable: true, selectable: 'single, row', columns: [ ... ], }); angular.element("#loadingTempLbl").hide(); }, (rej) => { this.scope.$emit('notification', { type: 'error', message: 'An error occurred loading stats. Try refreshing and if error continues, contact support for assistance.' }); } ); } // setupGrid } SystemInfoTenantStatusCtrl.$inject = ['$scope', '$injector', 'stateData', 'mylibService', 'myDomainService']; export default SystemInfoTenantStatusCtrl Not shown is a navigation module that also uses the ttMenus from mylibService.getMenus() to determine how to build the side navigation panel. The whole app is hit and miss, sometimes it loads correctly and sometimes it doesn't. When it doesn't, refreshing (sometimes a few times) will eventually result in the app loading correctly. Thanks, Louis
Continue reading...
Continue reading...