Windows Store apps uses the single-page navigation model. where we use a single page for our app and load additional data into that page as needed. We still split our application into multiple files, but instead of moving from page to page, our app loads other documents into the main page. Because your app’s main page is never unloaded, our scripts are never unloaded, which makes it easier to manage state, transitions, or animations. To use the single-page navigation model, the Windows Library for JavaScript provides the WinJS.UI.Pages.PageControl object. Lets start with creating a new Project of Navigation App Template. Now we can see the new files inside the pages folder. /pages/home/home.css, /pages/home/home.html, and /pages/home/home.js These three pages define a PageControl for the app’s home page. A PageControl is made up of an HTML file, a JavaScript file, and a CSS file. A PageControl is a modular unit of HTML, CSS, and JavaScript that can be navigated to (like an HTML page) or used as a custom control.
also we have the navigator.js

This file provides the PageControlNavigator helper class that we can use to display PageControl objects and navigate between them.

Step 1:
Now lets modify the the Home pagecontrol as follows

Navigation Template

  
             
            
           
First Page Control  
             Navigate To Details 
           

 Step 2:
Now lets add the Click event for the Navigate details button . So we need to first add the Click event for the button in Home.js.

document.getElementById("btnDetails").addEventListener("click", MoveTo);
             function MoveTo()
             {     
            WinJS.Navigation.navigate("/pages/Details.html");     
             }

           Here we are calling the  WinJS.Navigation.navigate function which is taking a target page url  which is of type string . Generally the WinJS.Navigation.navigate function can take the parameter of object Type like place and state. The palce to navigate to. Generally the place is a string containing the URL, but it may be anything.The state is a user-defined object that represents the navigation state that may be accessed through state.

Step 3: Now lets add a new page Control to our Project lets say we have added a Details page Control inside the pages folder.  Such as like the Home page Control it has its  corresponding Details.html,Details.js,Details.css.

Now lets modify the Details.html page as follows

Welcome to Details

    
     
     
          
Details Page Control           
   

After clicking on the  Navigate button we can move to Details page control.
After navigating to the Details page we can see that the page has a Back button. The Page control template includes a back button that becomes enabled when you use the WinJS.Navigation functions to navigate. When you use the WinJS.Navigation functions, the app stores navigation history for us.

In my next tip we will use the state property of the WinJS.Navigation, for transferring data from one page Control to another page control .