Create a Lightning Application Part -2

Types Of Controller

Aura framework consists of two types of controllers:

1. Client-Side Controller: A client-side controller is basically a Javascript file, in which all the logic is written, which is responsible for the interactive view of the component.
2. Server-side controller: A server-side controller is an Apex file(Backend), in which all the Business logic is written, to perform actions from the view.

Value Provider In Aura

Value Providers are the way to access data and methods in the component files.

There are two value providers:

1. c: this ‘c’ value provider stands for the controller. It is basically used to access methods and values of the client-side controller and server-side controller.
2. v: this ‘v’ value provider stands for the view. It is basically used to access attributes created in the component, to set and get their values.

Example to Create a Lighting Component(List of records)

//HTML File

<aura:component controller="c.contactContainer">
    <aura:attribute name ="contacts" type="Contact[]"/>
    <aura:handler event="c:searchKeyChange" action="{!c.searchKeyChange}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ul class="list-group">
    	<aura:iteration items ="{!v.contacts}" var="contact">
           <li class = "list-group-item">
              <a href = "{!'#contact/'+contact.Id}">
                    <p>{!contact.Name}</p>
                    <p>{!contact.Phone}</p>
                </a>
            </li>
        </aura:iteration>
    </ul>
</aura:component>

//JS File

({
doInit : function(component, event) {
	var action =component.get("c.findAll");
        action.setCallback(this,function(a){
                           component.set("v.contacts",a.getReturnValue());
        });
    $A.enqueueAction(action);
	},
    
searchKeyChange :function(component,event)
    {
    	var searchKey = event.getParam("searchKey");
    	var action = component.get("c.findByName");
    	action.setParams({
    		"searchKey" : searchKey
		});
	action.setCallback(this,function(a)
	{
    component.set("v.contacts",a.getReturnValue());	
	})	
    
    $A.enqueueAction(action);
}
})

Next Topic