Navigate From One Lightning Component to Another Lightning Component

Component1:

<!--Component1-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <ui:button label="Navigate to Component2" press="{!c.navigate}"/>
    {!v.body}    
</aura:component>

Component1 Controller:

({
    navigate : function(component, event, helper) {
        $A.createComponent(
            "c:Component2",
            {
                
            },
            function(newCmp){
                if (component.isValid()) {
                    var body = component.get("v.body");
                    body.push(newCmp);
                    component.set("v.body", body);
                }
            }
        );	        
    }
})

Component2:

<!--Component2-->
<aura:component>
    Component2 Successfully Loaded!
</aura:component>