As we saw in the previous section, we created a basic container called myapp using a standalone Lightning app. It contained a single instance of our mycomponent component. It may not have looked like much, but <aura:application> provided a number of services for its components and for you as the developer. The following list details some of these services and how they are provided:
- It constructed the page <HTML> tag and loaded the appropriate JavaScript and CSS resources, such as the SLDS, and the Lightning JavaScript runtime, which allows your components to react to user interactions through client-side controller code.
- It loaded the components within its body, namely, the mycomponent component, but also any HTML markup that is present is also injected into the page. Each component started its own life cycle within the container. Much like an object in Apex, it was constructed, initialized, tracked, and can be destroyed.
- URL parameters are mapped automatically to aura:attribute components specified in the body of aura:application. See here, for example:
/c/myapp.app?myparam=myvalue
<aura:application extends="force:slds">
<aura:attribute name="myparam" type="String"/>
<h2>The value of myparam is '{!v.myparam}'</h2>
</aura:application>
This results in the following text being displayed in the browser:
The value of myparam is 'myvalue'
- URL-centric navigation is an important aspect of the user experience and is an expectation when users are bookmarking or sharing links to records or certain pages in your web application. Since the application is designed to be long-lived, and changing the URL causes the entire page to reload, an alternative is needed. Modifying the bookmark portion of a URL does not reload the page. As such, Lightning applications leverage this to add more context to links stored by users, as well as using it during the application's own navigation. You can see this in action as you navigate through Lightning Experience. The framework provides the aura:locationChange event (Aura) or the standard window.onhaschange event (LWC) for your client-side logic to listen on to determine when changes are made.
You can see a simple example of the URL convention used at /c/myapp.app#showraceresults-2016.
You can read more about the attributes of aura:application in the Lightning Aura Components Developer Guide. Also, refer to the Lightning Web Components Developer Guide for more details on the navigation service, which is recommended when building more complex navigations that work within Salesforce containers. Not all the services may be relevant, depending on the container you're using. However, it is good to have a basic understanding of how things work even if you only ever leverage the Salesforce containers.