ltng:require

ltng:require enables you to load external CSS and JavaScript libraries after you upload them as static resources.

1<aura:component>
2
3    <ltng:require 
4
5        styles="{!$Resource.SLDSv1 + '/assets/styles/lightning-design-system-ltng.css'}"
6
7        scripts="{!$Resource.jsLibraries + '/jsLibOne.js'}"
8
9        afterScriptsLoaded="{!c.scriptsLoaded}" />
10
11</aura:component>

Due to a quirk in the way $Resource is parsed in expressions, use the join operator to include multiple $Resource references in a single attribute. For example, if you have more than one JavaScript library to include into a component the scripts attribute should be something like the following.

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

The comma-separated lists of resources are loaded in the order that they are entered in the scripts and styles attributes. The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded. To ensure encapsulation and reusability, add the <ltng:require> tag to every .cmp or .app resource that uses the CSS or JavaScript library.

The resources only load once if they are specified in multiple <ltng:require> tags in the same component or across different components.

Attributes

Events