lightning page/component redirection

Question

I have developed a Lightning App which included a component. Following is the Component screenshot, On click of Register Button its Insert a new contact and on click of Already register i want to redirect to a new component name login.

How to redirect from one component to another component in lightning salesforce ?

Component -

<aura:component >
<h1>Page Redirection Test</h1>
<div class="slds-form-element">
    <label class="slds-form-element__label" for="inputSample2">Email</label>
    <div class="slds-form-element__control">
        <ui:inputEmail aura:id="email" class="slds-input" placeholder="[email protected]" />
    </div>
</div>
<div class="slds-float--left">
    <ui:button aura:id="alreadyRegister" label="Already Register" class="slds-button slds-button--brand" press="{!c.navigateToMyComponent}"/>
</div>

Controller JS

({
navigateToMyComponent : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:LightningLoginC",
        componentAttributes: {
            email : component.find("email").get("v.value")
        }
    });
    evt.fire();
}

})

APP -

<aura:application extends="force:slds" implements="force:appHostable">
<!--<c:LightningLoginComp />-->
<c:LightningLoginC />

Answer 1

There is an event which is BETA and you may want to experiment with same

navigateToMyComponent : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:myComponent",
        componentAttributes: {
            contactName : component.get("v.contact.Name")
        }
    });
    evt.fire();
}

In the above code componentDef holds the component where you want to navigate

and you can pass attribute values as well as you move along using componentAttributes