Sonam Gupta's Blog: August 2015

Friday 21 August 2015

Trigger side-menu on hardware back button click in ionic

Hello,

Here i am sharing a method by which we can open side menu in side-menu ionic app by clicking the hardware back button, and it will be happened when side menu is closed, and we clicked on hardware back button than side menu will open . And if side menu is open than a pop up will be show on screen for exiting from app by clicking on hardware back button.

So we include following code in our app.js

.run(function ($ionicPlatform, $cordovaStatusbar, $ionicPopup,$ionicSideMenuDelegate ) { $ionicPlatform.onHardwareBackButton(function () {
if ($ionicSideMenuDelegate.isOpen()) { // your check here $ionicPopup.confirm({ template: '<div style=" color:#255B73; text-align: center; font-size:18px;">Exit the app?</div>', buttons: [ { text: 'Cancel' }, { text: '<b>Exit</b>', type: 'button-positive', onTap: function () { return true; } } ] }).then(function (res) { if (res) { navigator.app.exitApp(); } }) } else { $ionicSideMenuDelegate.toggleLeft() }
});
})

Thanks....

Thursday 13 August 2015

Swipeable List Items In Ionic Framework

The expectation of modern mobile applications to have a fancy UI with smooth animations and gesture controls. Users want to be able to drag things.

So we can do same things in ionic framework.

Let's start fresh project for same.

Following are the commands to start the new blank project in ionic frame work-

1) ionic start IonicBankProject blank

2) cd IonicBankProject

3) ionic platform add android

The goal is to have something like, if you swipe a list item left, a series of buttons become exposed.

As per the ionic documentation, the buttons are known as ion-option-buttons. You can add as many ion-option-buttons as you’d like.

Example-

Here we are adding four button in index.html page-

So, index.html page look like-

<ion-item href="#">

Item1

<ion-option-button class = "button-light icon ion-heart"></ion-option-button>
<ion-option-button class = "button-light icon ion-email"></ion-option-button>
<ion-option-button class = "button-assertive icon ion-trash-a"></ion-option-button>
<ion-option-button class = "button-light icon ion-heart"></ion-option-button>
</ion-item>

It is important to add the can-swipe="true" flag, otherwise the list items will be static and won’t slide.

So, now index.html page look like-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
                <ion-list show-delete="false" can-swipe="true">
                    <ion-item href="#">
                        Item 1
<ion-option-button class="button-light icon ion-heart"></ion-option-button>
          <ion-option-button class="button-light icon ion-email"></ion-option-button>
         <ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
                    </ion-item>
                    <ion-item href="#">
                        Item 2
           <ion-option-button class="button-light icon ion-heart"></ion-option-button>
           <ion-option-button class="button-light icon ion-email"></ion-option-button>
  <ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-pane>
    </body>
</html>

Friday 7 August 2015

Date difference in Angularjs

Hello,

Here i am introducing a way by which, you can find out the date difference in Angularjs :-

If we include the following code in controller.js file , and in that controller where we want the date difference.

So, now our controller.js look like:-

Here we are including the code in Main controller, So

.controller('MainCtrl', function ($scope{
$scope.diffDays = [];
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2015,12,31);
var secondDate = new Date(2014,10,21);
$scope.diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
console.log("Remaining days in current year",$scope.diffDays)

})

Now your main.html file look like:-

<ion-view view-title=Main Page>
<ion-content class="padding">

<p>
Welcome to Angularjs
</p>

<div>
Day Difference
<b> {{diffDays}}</b>
</div>
</ion-content>
</ion-view>

Now in your html page you can see the date difference and in your console also.

Thanks