ltng:require

Loads scripts and stylesheets while maintaining dependency order. The styles are loaded in the order that they are listed. The styles only load once if they are specified in multiple <ltng:require> tags in the same component or across different components.

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

<aura:component>

    <ltng:require 

        styles="{!$Resource.SLDSv1 + '/assets/styles/lightning-design-system-ltng.css'}"

        scripts="{!$Resource.jsLibraries + '/jsLibOne.js'}"

        afterScriptsLoaded="{!c.scriptsLoaded}" />

</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.

scripts="{!join(',', 

    $Resource.jsLibraries + '/jsLibOne.js', 

    $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

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
scripts String[] The set of scripts in dependency order that will be loaded.
styles String[] The set of style sheets in dependency order that will be loaded.

Events

Event Name Event Type Description
afterScriptsLoaded COMPONENT Fired when ltng:require has loaded all scripts listed in ltng:require.scripts
beforeLoadingResources COMPONENT Fired before ltng:require starts loading resources