Lightning Components Basics : Handling Actions in Controller.js

Lightning component bundle comes with different resources like controller.js, helper.js, style.css etc.

All the actions performed on lightning component, can be handled in controller.js.

helper.js worked as an utility which can be called multiple times. If you want to call same piece of code multiple times, then specify it as separate reusable function in helper.js and call it from controller.

I have created a sample lightning component "SK_LightningBasics". Below is code for that:

SK_LightningBasics.cmp

<aura:component >
    <aura:attribute name="ltngFirstname" type="string" default="Sunil"/>
    <aura:attribute name="ltngLastname" type="string" default="Kumar"/>
    <!--Mark up starts-->
    <lightning:input aura:id="userFn" value="{!v.ltngFirstname}" name="ufn" label="Firstname"/>
    <lightning:input aura:id="userLn" value="{!v.ltngLastname}" name="uiln" label="Lastname"/>
    <lightning:input aura:id="useremail" value="" name="uinput" label="Enter Email"/>
    <lightning:button name="btn" label="Display" onclick="{!c.displayMessage}"/>
    <!--Mark up ends-->
</aura:component>

SK_LightningBasicsController.js

({
displayMessage : function(component, event, helper) {
             var fname= component.get("v.ltngFirstname");
             var lname= component.get("v.ltngLastname");
             //how to get input by user 
             //which is not related to attribute
             var emailInputTag= component.find("useremail");
             //Now you can refer any attribute on input tag
            var emailvalue= emailInputTag.get("v.value");
            console.log('*******emailvalue-'+emailvalue);
            //to find label for email input
            var emailLabel= emailInputTag.get("v.label");
            console.log('*******emailLabel-'+emailLabel);
            var alertMsg='displayMessage function get called.\n';
           alertMsg = alertMsg +'Email entered is -'+emailvalue;
           alert(alertMsg);
    }
})

Lightning is based on MVCC (Modal-View-Client side controller-Server side controller), so first functions defined in controller.js is called first and then if needed we can call server side apex class methods.

In above lightning components, we are using onclick attribute on lightning button which invokes controller.js function.

In lightning, we refer controller.js functions using c.annotation inside "{! and }".
For example{!c.displayMessage}

Way to invoke controller.js function when component loaded initially

Lightning framework provide standard events which can be used to invoke controller.js function.
Use below syntax to invoke controller.js function when component is getting loaded:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

Specify the controller.js function which you want to invoke. By using above code snippet, we are calling doInit function in controller.js.

({
doInit: function(component, event, helper) {
             alert(' doInit get called');
      },
      displayMessage : function(component, event, helper) {
             //your logic
      } 
})

Way to invoke controller.js function when any attribute value gets changed

Use change event on attribute to invoke controller.js function.

Sample code snippet:

<aura:attribute name="ltngFn" type="string" default="Sunil"/>
<aura:handler name="change" value="{!v.ltngFn}" action="{!c.OnChangeFunction}"/>

So whenever "ltngFn" attribute value will be changed then, OnChangeFunction will be invoked

({
doInit: function(component, event, helper) {
             alert(' doInit get called');
      },
      displayMessage : function(component, event, helper) {
             //your logic
      },
      OnChangeFunction: function(component, event, helper) {
             alert(' Attribute value gets changed');
      } 
})

In order to test these component code, you can either create lightning tab or create lightning app and preview it. Below is code for lightning app:

SK_LightningBasicsApp.app

<aura:application extends="force:slds">
    <c:SK_LightningBasics/>

</aura:application>

After creating this app, click on preview button on top right side in developer console.

Hope this will help!!