July 20, 2016

How to navigate between multiple pages in a mobile app using Ionic

To create a simple navigation for a mobile application using ionic framework, we would require ion-nav-view directive.

Along with this we need to implement angular's configuration through $stateProvider and $urlRouterProvider.

Using this, we can allow user to move from one html page to another, also segregate each page functionalities by defining separate controller for each page.

Example:

Lets create 3 html pages in which we will allow user to navigate the app into each other.

Home.html Source Code
1:  <ion-view view-title="Home">  
2:       <ion-content class="padding">  
3:       <p>  
4:            <a class="button" href="#/facts">Scientific Facts</a>  
5:       </p>  
6:       </ion-content>  
7:  </ion-view>  

Facts.html Source Code
1:  <ion-view view-title="Facts">  
2:      <ion-content class="padding">  
3:       <p>Banging your head against a wall uses 150 calories an hour.</p>  
4:       <p>Dogs have four toes on their hind feet, and five on their front feet.</p>  
5:       <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>  
6:       <p>A cockroach will live nine days without it's head, before it starves to death.</p>  
7:       <p>Polar bears are left handed.</p>  
8:       <p>  
9:        <a class="button icon ion-home" href="#/home"> Home</a>  
10:        <a class="button icon icon-right ion-chevron-right" href="#/facts2">More Facts</a>  
11:       </p>  
12:      </ion-content>  
13:     </ion-view>  

Facts2.html Source Code
1:   <ion-view view-title="Also Factual">  
2:      <ion-content class="padding">  
3:       <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>  
4:       <p>1 in every 4 Americans has appeared on T.V.</p>  
5:       <p>11% of the world is left-handed.</p>  
6:       <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>  
7:       <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>  
8:       <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>  
9:       <p>  
10:        <a class="button icon ion-home" href="#/home"> Home</a>  
11:        <a class="button icon ion-chevron-left" href="#/facts"> Scientific Facts</a>  
12:       </p>  
13:      </ion-content>  
14:     </ion-view>  

Index.html Source Code:
1:  <html ng-app="ionicApp">  
2:   <head>  
3:    <meta charset="utf-8">  
4:    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
5:    <title>Navigation Example</title>  
6:    <link href="css/ionic.css" rel="stylesheet">  
7:    <script src="js/ionic.bundle.js"></script>  
8:       <script src="app.js"></script>  
9:   </head>  
10:   <body>    
11:    <ion-nav-bar class="bar-positive">  
12:     <ion-nav-back-button>  
13:     </ion-nav-back-button>  
14:    </ion-nav-bar>         
15:    <ion-nav-view></ion-nav-view>         
16:   </body>  
17:  </html>  


App.js Source Code
1:       angular.module('ionicApp', ['ionic'])  
2:       .config(function($stateProvider, $urlRouterProvider) {  
3:        $stateProvider  
4:            .state('home', {  
5:                 url: "/home",  
6:                 templateUrl: "home.html",  
7:                 controller: 'HomeCtrl'   
8:            })  
9:            .state('facts', {  
10:                 url: "/facts",  
11:                 templateUrl: "facts.html"                 
12:            })  
13:            .state('facts2', {  
14:                 url: "/facts2",  
15:                 templateUrl: "facts2.html"                 
16:            });  
17:       // if no above URL matches it will redirect to below path
18:         $urlRouterProvider.otherwise("/home");  
19:       })  
20:       .controller('HomeCtrl', function($scope) {  
21:        console.log('in HomeCtrl');  
22:       });  

Demo on CodePen

Source Reference: http://ionicframework.com/docs/api/directive/ionNavView/

No comments:

Post a Comment