a blog for those who code

Sunday 25 October 2015

Understanding Routing and Navigation in Ionic

In this post we will learn how router works in Ionic. Ionic comes with the AngularUI router with it, thus we can directly use $stateProvider and $urlRouterProvider to create routes. We need to inject $stateProvider and $urlRouterProvider in our config method to make use of the AngularUI router.

We are going to build a simple two-page view, and a navigation button to navigate between the views. This is a simple example to understand syntax and setup of the router. When you open www/js/app.js, you will see a config method like below :


Recommended Reading : What is Apache Cordova and Ionic Framework

As you can see, $stateProvider and $urlRouterProvider are injected as dependencies to the config method. Now we will use $stateProvider to defined the states as shown below.

.state('page1', {
    url: "/page1",
    templateUrl: 'templates/page1.html'
})
.state('page2', {
    url: "/page2",
    templateUrl: 'templates/page2.html'
}) 

The state method of  $stateProvider are used to declare the routes. The first argument of the state method is the name of the state whereas second argument contains route configuration. Route configuration has URL and Template (rendered when URL triggered). Next we have $urlRouterProvider which provide the default URL as shown below.

$urlRouterProvider.otherwise('/page1');  

Our index.html will look like below, where we are adding a back button which will be displayed when we go in any other view than the default view. We also have to tell the router which portion of the page should be updated with the contents of the state, this is done by adding <ion-nav-view>.

<body ng-app="starter">
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>

The contents of page1.html are :

<ion-view view-title="Simple Application Page 1">
  <ion-content class="padding">
    <div class="list card">
      <div class="item item-divider">Page 1</div>
      <div class="item item-body">
        <button class="button button-positive" ui-sref="page2">Take me to Page 2</button>
      </div>
    </div>
  </ion-content>
</ion-view> 

The contents of page2.html are :

<ion-view view-title="Simple Application Page 2">
  <ion-content class="padding">
    <div class="list card">
      <div class="item item-divider">Page 2</div>
      <div class="item item-body">
        <button class="button button-positive" ui-sref="page1">Take me to Page 1</button>
      </div>
    </div>
  </ion-content>
</ion-view>

The result is shown in this video :


Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.

6 comments:

  1. Hi Hemant

    What decides that the ion view should be page 1 when we run the index.html.

    Regards

    ReplyDelete
  2. We use $urlRouterProvider.otherwise('/page1'); which decides which page should be rendered when we run our application. You can change this to page2, then page2 will be viewed first.

    ReplyDelete
  3. Great post. How do I add a right header button to page 2?

    ReplyDelete
  4. Too basic. I expected more

    ReplyDelete