I need to use some icons in static resources in an ng-grid table.
I wonder what is the best way to make use of the platform's url resolving.
If I put the code src="{!URLFOR($Resource. in Javasript of the controller it doesn't get interpreted and expanded to a proper URL.
I saw people storing the urls in the window. object on page load. Is there anything better?
No, assigning these to the global (window) context is the way this is done.
The thing to recognize is that any expression in {!...} is evaluated on the server turned into HTML/CSS/JavaScript as the VF page is server-side rendered, then shipped off to the client to become something the browser can use.
Your JS controller file should be in a static resource or stored as a static file in a CDN...which is exactly that on the server...static, therefore no way to evaluate any {!...} expressions obviously
So unless you stick all your JS for the controller inline on the page (and who wants to do that?) you have to do something that will be evaluated on the VF page then set into a global context of some kind.
The one thing you could to do keep it manageable is to not assign these individually, but in your own variable.
<script>
var staticItems = {
//this one is referencing a static HTML template in a zip
'ganttTemplate' : "{!URLFOR($Resource.efLibs,'angular-gantt/template/gantt.tmpl.html')}",
//another html template that is itself a
'efMainHTML' : "{!URLFOR($Resource.efMainHTML)}",
//this is getting an JS Remote method and storing it
'getSessionTopics' : '{!$RemoteAction.EventFlexServices.getSessionTopics}'
};
</script>
Unless they give us a way to dynamically generate JS into an external JS file, I'm afraid this is how it is.
{!...} syntax. But LCF is all client rendered with these expressions evaluated on the client as well.