<aura:attribute name="accountName" type="String" default="" description="Name of the account" required="false" />

<aura:if isTrue="{!v.showDetails}">
    <p>Details are visible</p>
    <aura:set attribute="else">
        <p>Details are hidden</p>
    </aura:set>
</aura:if>

<aura:iteration items="{!v.accounts}" var="acct" indexVar="idx">
    <p>{!idx}: {!acct.Name}</p>
</aura:iteration>

<aura:component implements="force:appHostable" access="global">
    <aura:attribute name="accounts" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <lightning:button label="Refresh" onclick="{!c.handleRefresh}" />

    <aura:iteration items="{!v.accounts}" var="acct">
        <p>{!acct.Name}</p>
    </aura:iteration>
</aura:component>

({
    doInit : function(component, event, helper) {
        helper.fetchAccounts(component);
    },

    handleRefresh : function(component, event, helper) {
        helper.fetchAccounts(component);
    }
})

({
    fetchAccounts : function(component) {
        var action = component.get("c.getAccounts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.accounts", response.getReturnValue());
            } else {
                console.error("Failed: ", response.getError());
            }
        });
        $A.enqueueAction(action);
    }
})

<aura:event type="COMPONENT" description="Fires when item is selected">
    <aura:attribute name="selectedId" type="String" />
</aura:event>

<!-- childComponent.cmp -->
<aura:component>
    <aura:registerEvent name="itemSelected" type="c:myEvent" />
    <lightning:button label="Select" onclick="{!c.fireSelection}" />
</aura:component>

// childComponentController.js
({
    fireSelection : function(component, event, helper) {
        var evt = component.getEvent("itemSelected");
        evt.setParams({ "selectedId" : "001XXXXXXXXXXXX" });
        evt.fire();
    }
})

<!-- parentComponent.cmp -->
<aura:component>
    <c:childComponent onitemSelected="{!c.handleSelection}" />
</aura:component>

// parentComponentController.js
({
    handleSelection : function(component, event, helper) {
        var selectedId = event.getParam("selectedId");
        console.log("Selected: " + selectedId);
    }
})

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts(String searchTerm) {
        String wildcard = '%' + searchTerm + '%';
        return [SELECT Id, Name FROM Account WHERE Name LIKE :wildcard LIMIT 50];
    }
}

<aura:component controller="AccountController">

// In helper.js
({
    callServer : function(component) {
        // 1. Get the action
        var action = component.get("c.getAccounts");

        // 2. Set parameters
        action.setParams({
            searchTerm : component.get("v.searchText")
        });

        // 3. Set callback
        action.setCallback(this, function(response) {
            var state = response.getState();

            if (state === "SUCCESS") {
                component.set("v.accounts", response.getReturnValue());

            } else if (state === "INCOMPLETE") {
                console.log("No response from server — offline?");

            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors && errors[0] && errors[0].message) {
                    console.error("Error: " + errors[0].message);
                } else {
                    console.error("Unknown error");
                }
            }
        });

        // 4. Enqueue
        $A.enqueueAction(action);
    }
})

var action = component.get("c.getAccounts");
action.setStorable();  // Caches response; serves from cache on repeat calls
$A.enqueueAction(action);

action.setCallback(this, function(response) {
    if (response.getState() === "SUCCESS") {
        component.set("v.data", response.getReturnValue());
    } else {
        var errors = response.getError();
        var message = "Unknown error";
        if (errors && Array.isArray(errors) && errors.length > 0) {
            message = errors[0].message;
            // Check for field-level errors
            if (errors[0].fieldErrors) {
                var fieldErrors = errors[0].fieldErrors;
                for (var field in fieldErrors) {
                    message += "\n" + field + ": " + fieldErrors[field][0].message;
                }
            }
            // Check for page-level errors
            if (errors[0].pageErrors) {
                errors[0].pageErrors.forEach(function(e) {
                    message += "\n" + e.message;
                });
            }
        }
        // Show toast
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title   : "Error",
            message : message,
            type    : "error"
        });
        toastEvent.fire();
    }
});