0

I currently have an API that returns the url of a CSS file that I would like to have included into my whole site. Do to this url changing, I can not hard code the url. I currently have this working on 'view1' but what I want to do is have it work over the whole site. (so try to implement it in index.html). I am not sure what the best way to do this is, and I am sure my approach is wrong. Any insight would be helpful, or a solution to my issue.

My App is formatted as fallowed. 

app/                    --> all of the source files for the application
  app.css               --> default stylesheet
  components/           --> all app specific modules
    API/                  --> Mock Slim API for testing
      index.php             --> Root for the API
  view1/                --> the view1 view template and logic
    view1.html            --> the partial template
    view1.js              --> the controller logic
    view1_test.js         --> tests of the controller
  view2/                --> the view2 view template and logic
    view2.html            --> the partial template
    view2.js              --> the controller logic
    view2_test.js         --> tests of the controller
  app.js                --> main application module
  index.html            --> app layout file (the main html template file of the app)

Here is View1 that is currently working

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>

Here is my root files that don't work

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 better way of doing this? <-this is what I want

Question 2: If not, why is this not working? <- will settle for

My guesses are that the HTML is running before the JS and when the JS runs to change {{css}} into the correct response it's too late to include it. But If that were the case, why does it work on View1 and not the root index?

Improve this question
4
  • Did you bind your controller to your view using ng-controller ? In your case you should consider binding it to <html> or <head> Commented Sep 24, 2015 at 13:26
  • why can't you include it without ajax? Also probable your <head> is out of scope of the controller. A directive would be better Commented Sep 24, 2015 at 13:26
  • 2
    The scope of View1Ctrl is not the same scope as in MyAppCtrl. You could use the $rootScope (bad). So now in your application the MyAppCtrl updates the .css property your using in the head tag. View1Ctrl is doing nothing and MyAppCtrl is not recreated on url (route) change Commented Sep 24, 2015 at 13:37
  • I have updated the question to display more of the JS files. Commented Sep 24, 2015 at 13:53

3 Answers 3

Reset to default
1

Let me answer your Question 2 first.

When an angular bootstraps, it will first traverse down the DOM nodes, then look for all the appropriate directives, evaluate them, compile and finally link them up. The reason why your second piece of code doesn't work is because your {{css}} evaluates to nothing, since it does not have a proper scope binded to.

What you can do is actually declare an ng-controller at your <head> level, and let this controller do its work. Something like this: 

.controller('cssCtrl',['$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);
        });
 }]

And in your html: 

<head ng-controller="cssCtrl">
  <link ng-attr-href="{{css}}" rel="stylesheet" type="text/css">
</head>

Here is a plnkr that demonstrates how.

ng-controller will come in handy here as you do not really have to define a route for it, per se. Note that your css will not be loaded until your angular bootstraps finishes and your cssCtrl gets instantiated. There will be some delay in this though, and hence our first question, do we have a better way in doing this?

I would say if you have really conditional presentation logic based on the angular app itself, then use ng-if and ng-class. If you need more low level ones, use ng-style.

If you are talking about really loading the entire new css stylesheet based on certain configuration/settings, then I would say, let the server (backend) handle this. The server will determine what kind of css should be loaded based on the configuration (maybe different regional apps have different css styles) and spawn its site. Your front end app (angular) will just need to listen to the server, and load without really digesting it.

Of course, this is not 100% the best way. If you really need a front-end-determined css, then go for it and design the app in that way! Only you know that use case of the app well. Maybe you can wrap the entire SPA into a MainCtrl and MainView, and let every configuration resolves first before the DOM is manipulated.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You still need to produce further information.

  • are you using ui-router or the regular angular routing?
  • how are your url's structured, what inherits from what?

If its ui router it makes things easier. All you need to do is get the CSS in the controller of the parent from which other URLs are deribed. I usually try to make sure all my pages inherit from a single parent which is usually an empty page.

Also since your site depends on this css file, I suggest delaying your site showing content. You could just show a spinner till the CSS is gotten from the promise and then you apply it.

Improve this answer

1 Comment

I have updated the question to display more of the JS files.
0

What server side technology are you using? I think it would be much easier and less problematic to retrieve the CSS file from the server side and output it to a static CSS file that you just include in your index.html page. The server side code will run first and then your client side code doesn't need to be concerned with this at all.

You could also check for the existence of the file and only retrieve a new copy when the current version is older a certain amount of time.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.