Using External JavaScript Libraries

The framework’s content security policy mandates that external JavaScript libraries must be uploaded to Salesforce static resources. For more information on static resources, see “What is a Static Resource?” in the Salesforce online help.

Here’s an example of using <ltng:require>:

1<ltng:require scripts="/resource/resourceName"
2    afterScriptsLoaded="{!c.afterScriptsLoaded}" />

resourceName is the Name of the static resource. Note that the framework doesn’t currently support the $Resource global variable available in Visualforce.

The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded.

Here are some considerations for loading scripts:

Loading Sets of Scripts

Specify a comma-separated list of resources in the scripts attribute to load a set of resources.

Loading Order

The scripts are loaded in the order that they are listed.

One-Time Loading

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

Parallel Loading

Use separate <ltng:require> tags for parallel loading if you have multiple sets of scripts that are not dependent on each other.

Encapsulation

To ensure encapsulation and reusability, add the <ltng:require> tag to every .cmp or .app resource that uses the JavaScript library.

<ltng:require> also has a styles attribute to load a list of CSS resources. You can set the scripts and styles attributes in one <ltng:require> tag.