4

I'm currently migrating from custom framework to Angular. Since we've got legacy, all front-end resources like stylescheets, images and scripts should be located on a subdomain, and all urls should be absolute. I've got a bunch of css files with a parameter specifying our static domain. I'm looking for a native Angular approach to using parameters in css, so I'll be able to write smth like:

.body {background: "{{domain}}/img/bg.png";}

Currently in our framework styles are loaded with, say, $http.get(), then processed with .replace and then appended to DOM.

Any ideas?

Thank you.

chiki-pibarum
  • 49
  • 1
  • Were you planning on putting something like your code snippet in a css or an html file? – Jesus is Lord Sep 16 '13 at 15:20
  • 1
    You can store the CSS in that subdomain along with your image resources so you don't need to have dynamic URLs in your CSS – enriquecastl Sep 16 '13 at 15:24
  • @WordsLikeJared I'm not getting you, I'm sorry. Do you mean stylesheet is embedded into html or is a single file? It should be a single file. – chiki-pibarum Sep 16 '13 at 15:45
  • @enr.code OMG css actually IS on a subdomain but I haven't even checked if it works:) Thank you! Anyway, I think if there is a way to parametrize stylesheets, it could be useful. – chiki-pibarum Sep 16 '13 at 15:45
  • What I was getting at was if you were having that code snipped reside in a referenced css file (in which case I think Angular wouldn't work over there using that syntax) or within an html file inside a ` – Jesus is Lord Sep 16 '13 at 18:06

2 Answers2

2

Try the $interpolate service. Inject it in a method, then use like this:

var fn = $interpolate(cssText); 
var processedCssText = fn(scope); // scope is whatever obj that contains `domain` and other properties that might be used inside cssText

You can even configure the opening & closing symbols, if needed. See the documentation for $interpolate for more information.

Buu
  • 49,745
  • 5
  • 67
  • 85
  • @finishingmove the OP already fetched the string content of the css file with $http.get(). $interpolate works with any string containing interpolated text. So yes, will achieve what the question asks for. – Buu Sep 24 '13 at 14:34
  • I think the question was if it were possible to put javascript (Angular) variables in *.css files. I'm not calling you out, but I don't think what you suggested works for that. If I'm wrong, please explain. I don't see how you can place this code in a *.css file. – holographic-principle Sep 24 '13 at 14:37
  • Read the question again, he said "Currently in our framework styles are loaded with, say, $http.get(), then processed with .replace and then appended to DOM." My answer works based on that: instead of having to do .replace(), he can uses the approach I suggested to make binding works. And no, AngularJS doesn't work directly on CSS files, you have to fetch the content as text and perform interpolation manually, which is the whole point of my answer. – Buu Sep 24 '13 at 14:40
1

You want LESS.

http://lesscss.org

It's the "dynamic stylesheet language".

aet
  • 7,192
  • 3
  • 27
  • 25
  • Assuming there were multiple domains, could you retrieve them dynamically without hardcoding it into a variable? – holographic-principle Sep 24 '13 at 01:47
  • Supposedly you can interact with less variables from javascript, see this post: http://stackoverflow.com/questions/3175013/load-less-js-rules-dynamically – aet Sep 24 '13 at 01:49