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>
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