Navigating to different Lightning component

I hope you all had a wonderful Republic day celebration. As you all know one year back Salesforce introduced new way of developing mobile app with lightning component framework. First let me explain what is lightning component framework. The Lightning Component framework is a UI framework for developing a dynamic web apps for mobile and desktop devices and It’s a modern framework for building single-page applications. In this blog I am going to explain the client side controller method of navigating from one component to another component. Let gets started.

Demo:

1. Open the developer console select file-->New-->Lightning component.

2. Enter the first lightning component name called 'First_Component' and click submit and paste the below code.

<aura:component implements="force:appHostable">
    <body aura:id="content">
    	<h1>First  Component</h1>
         <ui:button label="Go to second comp"  press="{!c.gotoURL}"/>
    </body>
</aura:component>

3. Create a second lightning component called 'Second_Component' and paste the below code.

<aura:component implements="force:appHostable">
    <body aura:id="content">
    	<h1>Second  Component</h1>
    </body>
</aura:component>

4.Now if you go to the first component and in the side bar if you double click controller.

5. The client side controller will open and paste the below code.

({
	gotoURL : function(component, event, helper) {
		var destination ="markup://c:Second_Component";
        $A.componentService.newComponentAsync(this,
			function(view) {
			  var content = component.find("content");
			  content.set("v.body", view);
			  }, 
			  {
			     componentDef: destination,
                          }, component);
	}
})

6. Create a lightning app from developer console file-->new-->lightning app and enter as 'DemoApp' and paste the below code. By using lightning component only we can able to use the component which we have created. In this app I added a first component.

<aura:application implements="force:appHostable">
    
    <c:First_Component/>
    
</aura:application>

6. Now in the developer console 'DemoApp' right hand side you will have a option called 'preview' if you click on that our lightning app will be loaded in the different URL as below.

7. If you click 'Go to second comp' button the second component will be loaded. When you click the button 'gotoURL' client side controller action will be called.In the action method we are replacing the first component body with the second component. For more information about the  $A.componentService.newComponentAsync click here

I hope you find this article interesting, Rate this article if its useful to you.

Let me know if you have any question or suggestions in comment section.

 

Rating: 
Average: 2 (3 votes)