What is the best way to create a views in Lightning? And how can i navigate from one view to another? For Ex. I have 2 different components, c:ListInfo and c:Elementinfo, When i click one element of the c:ListInfo it will redirect or navigate to the c:Elementinfo component and it will rendered into the position where the c:ListInfo component is placed.
HERE IS A PICTURE
when i click an element of this component
The view will navigate into this component
HERE IS WHAT I'VE GOT. (returning me an error of Uncaught error in $A.run() : Cannot read property 'setParams' of null)
PractiveApp.app
<aura:application >
<c:ListInfo/>
</aura:application>
Elementinfo.cmp
<aura:component >
This is my second component
</aura:component>
ChangeTo.evt
<aura:event type="APPLICATION">
<aura:attribute name="actnew" type="String"/>
</aura:event>
ListInfo.cmp
<aura:component controller="EventCrtlr">
<aura:attribute name="ActiveEvents" type="Event__c"/>
<aura:handler event="c:ChangeTo" action="{!c.navigate}"/>
<aura:handler name="init" value="{!this}" action="c.ShowActiveEvents"/>
<aura:iteration items="{!v.ActiveEvents}" var="list">
<a href="c.Navigate">{!list.Event_Name__c}</a>
</aura:iteration>
<div class="list-group" aura:id="listview">
<c:Elementinfo/>
</div>
</aura:component>
ListInfoController.js
({
myAction : function(component, event, helper) {
var newAccountvar = "JSON";
var newAccount = $A.get("e.c:ChangeTo");
newAccount.setParams({ "actnew": newAccountvar });
newAccount.fire();
},
navigate:function(component,event,helper) {
var toggleText = component.find("listview");
$A.util.addClass(toggleText,'toggle');
}
})