How to conditionally render CSS and JavaScript inside head element of an HTML

Question

I need to use two different styles for two different looks of a page and I need different CSS and JavaScript files for that. Is there anyway I could conditionally render CSS and JavaScript files inside the head element in an html file?

I am working on an AngularJS application with Angular UI-Router module.

<html lang="en" ng-app="myApp">
  <head>

    <!-- if {{$state.current.name}} is "front" then list these CSS files -->
    <!-- if {{$state.current.name}} is "admin" then list these CSS files -->

  </head>
  <body>
    <!-- ... -->
    <!-- if {{$state.current.name}} is "front" then list these JavaScript files -->
    <!-- if {{$state.current.name}} is "admin" then list these JavaScript files -->
  </body>
</html>

Could somebody help me with it?

Are ng-if and ng-src of any help? As in, <link ng-if="condition" rel="stylesheet" ng-src="style.css"> and similar for scripts? Just an idea. — nicolagi
– nicolagi, Commented Sep 14, 2014 at 18:29
@idrarig: Could I not have a list of <link> elements based on a condition rather than having ng-if on every <link> element? Could I have two <head> elements and render only one of them based on <head ng-if="condition">.. </head>? Would it be valid html? — skip
– skip, Commented Sep 14, 2014 at 18:43

nicolagi · Accepted Answer · 2014-09-14 22:52:24Z

1

I played around a bit and came up with this gist. From index.html you can see that what you want can be achieved using the ngIf, ngSrc, and ngHref directives as I suggested in my comment. From index-grouped.html you can see that you can indeed group <link> and <script> tags that need to appear under the same condition, but I'm not sure whether my approach works cross-browser. I only tried Google Chrome.

Anyway, having two <head> elements is not valid HTML. You can verify this yourself using an online validator.

I hope this helps.

answered Sep 14, 2014 at 22:52

nicolagi

1,36913 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to conditionally render CSS and JavaScript inside head element of an HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related