Seeking guidance from AngularJS experts as I develop an AngularJS application with a control suite comprising a loading screen and a showing screen defined in HTML. The data that needs to be manipulated is stored in JSON files, like the one below:
{
"Styles": [
{ "name": "Blue", "stylesheet": "/Resources/Stylesheets/Styles/Blue/OfficeUI.Style.Blue.min.css" },
...
...
],
"DefaultStyle": "LightBlue",
...
...
}
The challenge lies in dynamically embedding stylesheets referenced in the JSON file on the page. Moving on to the AngularJS implementation, we start with defining the module:
var OfficeUI = angular.module('OfficeUIApplication', ['ngSanitize']);
Then, a service is created to load the JSON file:
OfficeUI.factory('OfficeUIConfigurationService', function($http) {
// Service logic here
});
A controller handles the initialization process:
OfficeUI.controller('OfficeUIController', function(OfficeUIConfigurationService, $scope, $http) {
// Controller logic here
});
The key objective is to prevent displaying the loading div until all resources (like CSS files) have been fully loaded. Any suggestions on handling this issue? Also, is there a way to extend this behavior to include ng-include directives, images, etc.? Your insights would be highly appreciated.
Thanks & Regards,