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.


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/

July 04, 2016

How to add ionic or angular directives dynamically on runtime in html

Angular JS facilitates user to dynamically add angular directives or ionic directives or any custom made angular directives in html and update the page accordingly.

To implement it we need to use $compile function which deals with transforming the template DOM.

Format of compile function:

 function compile(tElement,tAttrs,transclude){...}  

The compile function takes the following arguments:
  • tElement - template element - The element where the directive has been declared. It is safe to do template transformation on the element and child elements only.
  • tAttrs - template attributes - Normalized list of attributes declared on this element shared between all directive compile functions.
  • transclude - [DEPRECATED!] A transclude linking function: function(scope, cloneLinkingFn)

Example of using compile function to dynamically add directives:

Lets create an array list and show the list in ion-list directive dynamically. 

JavaScript (app.js) Code:

 var htmlStr = ' <ion-list>'+  
    '<ion-item ng-repeat="item in nlist">'+  
     'Number {{item}} '+  
 angular.module('myApp', ['ionic'])  
 .controller('THController', function($scope) {   
  $scope.doRefresh = function() {              
     var $target = $("#ioncontentpane");  
     angular.element($target).injector().invoke(function($compile) {  
       var $scopen = angular.element($target).scope();  
       // Finally, refresh the watch expressions in the new element  
     $scope.nlist = [1,2,3];  

HTML code:

1:  <!DOCTYPE html>  
2:  <html>  
3:   <head>  
4:    <meta charset="utf-8">  
5:    <title>MyApp</title>  
6:    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
7:    <link href="css/ionic.css" rel="stylesheet">  
8:    <script src="js/jquery2.2.min.js"></script>  
9:    <script src="js/ionic.bundle.js"></script>  
10:    <script src="js/app.js"></script>  
11:   </head>  
12:   <body ng-app="myApp">  
13:    <ion-pane>  
14:    <ion-header-bar class="bar-stable">  
15:     <h1 class="title">Number List</h1>  
16:    </ion-header-bar>  
17:    <ion-content ng-controller="THController" id="ioncontentpane">  
18:    <ion-refresher  
19:     pulling-text="Pull to refresh..."  
20:     on-refresh="doRefresh()">  
21:    </ion-refresher>  
22:    </ion-content>  
23:   </ion-pane>  
24:   </body>  
25:  </html>  

the above code will display plain page with header, but when we pull down the page, it will dynamically add the items list directive and display the data as well.

Screenshots of output of the example:

Before pull-to-refresh event trigger:

After event trigger:

June 27, 2016

How to add pull-to-refresh feature using Ionic Framework

To add a pull-to-refresh feature of an Ionic framework, we need to use ion-refresher element/component. On using this tag, when we pull down the screen it will invoke the js method we would like to execute. Add your logic in that method that you want to execute after this refresh trigger.

This is how you can write the refresher tag.

    pulling-text="Pull to refresh..."  

on-refresh executes the js method defined on page pull down. .
pulling-text displays the text while pulling down the page. 

Lets create one example to understand the use case of ion refresher. Lets create a plain page which on pull down refresh the page and will show 3 item list.

HTML Source Code:
 <!DOCTYPE html>  
   <meta charset="utf-8">  
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
   <link href="css/ionic.css" rel="stylesheet">  
   <script src="js/ionic.bundle.js"></script>  
   <script src="js/app.js"></script>  
  <body ng-app="myApp">  
   <ion-header-bar class="bar-stable">  
    <h1 class="title">Number List</h1>  
   <ion-content ng-controller="THController">  
    pulling-text="Pull to refresh..."  
    <ion-item ng-repeat="item in nlist">  
     Number {{item}}   

JavaScript Code (app.js):
 angular.module('myApp', ['ionic'])  
 .controller('THController', function($scope) {   
  $scope.doRefresh = function() {              
     $scope.nlist = [1,2,3];  

In above JS code, doRefresh method declared which initializes an array (nlist) of 3. On completion of this method it will displays the list on the page.

Screenshots of the example:

Before pull-to-refresh event trigger:

After event trigger: