Wrong use of !URLFOR inside a controller of aura component

Question

I'm trying to get a .js file inside a zipped file loaded in Salesforce as Static Resource from the controller of an aura component. When I use:

baseUrl: "{!URLFOR($Resource.layer_composer,'js/lib')}",

I get the wrong URL like:

https://sit-sit-octoforce.cs86.force.com/businesscustomer/s/%7B!URLFOR($Resource.layer_composer,'js/lib')

(js/lib it's the folder I want to and layer_composer the static resource). Clearly it's wrong, so which is the right way to retrive js/lib inside the layer_composer Static Resources from the aura component controller?

Answer 1

See $Resource.

To use $Resource in JavaScript, you have to actually call a method. Here's an example from the docs:

({
    profileUrl: function(component) {
        var profUrl = $A.get('$Resource.SLDSv2') + '/assets/images/avatar1.jpg';
        alert("Profile URL: " + profUrl);
    }
})

When using URLFOR in component markup, you can use it directly, as demonstrated here:

<aura:component>
  <ltng:require 
    styles="{!$Resource.SLDSv2 + '/assets/styles/lightning-design-system-ltng.css'}"
    scripts="{!$Resource.jsLibraries + '/jsLibOne.js'}"
    afterScriptsLoaded="{!c.scriptsLoaded}" />
</aura:component>

If you need more than one resource, use join:

scripts="{!join(',', 
    $Resource.jsLibraries + '/jsLibOne.js', 
    $Resource.jsLibraries + '/jsLibTwo.js')}"

URLFOR is an artifact of Visualforce, and is not needed in Lightning at all.