I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goal is to make it work across the entire site (specifically in index.html). However, I am uncertain about the best approach and suspect that my current method may be incorrect. Any insights or solutions to address this issue would be greatly appreciated.
The structure of my App is as follows:
app/
app.css
components/
API/
index.php
view1/
view1.html
view1.js
view1_test.js
view2/
view2.html
view2.js
view2_test.js
app.js
index.html
This is the code for View1 which is functioning properly:
JS
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', '$http', function($scope, $http) {
$http.get('/api/auth/test').
then(function(response) {
$scope.css = response.data.temp.css;
}, function(response) {
alert('Error retrieving css: ' + response);
});
}]);
HTML
<head>
<link ng-attr-href="{{css}}" rel="stylesheet" type="text/css">
</head>
However, the following root files are not working as expected:
JS
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.authentication',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider','$httpProvider','$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$httpProvider.interceptors.push('TokenInterceptor');
// intercept API 401 responses and force authentication
$httpProvider.interceptors.push(function ($q, $location, AuthenticationService) {
//some code has been removed here
});
$routeProvider.otherwise({redirectTo: '/view1'});
}])
/*This is part of a test*/
.controller('', ['$scope', '$http', function($scope, $http) {
$http.get('/api/auth/test').
then(function(response) {
$scope.css = response.data.temp.css;
}, function(response) {
alert('Error retrieving css: ' + response);
});
}]);
/*This is part of a test*/
HTML
<head>
<link ng-attr-href="{{css}}" rel="stylesheet" type="text/css">
</head>
Question 1: Is there a more effective method to achieve this? <-this is what I desire
Question 2: If not, why is the current implementation failing? <- will suffice
My assumption is that the HTML runs before the JS, causing the correct response to be applied too late when {{css}} gets changed to the appropriate value. However, I am puzzled as to why it works on View1 but not on the root index?