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