Using camera in ionic project

Hi,

Here is a cordova plugin for open a camera in ionic project-

Run the following command-

cordova plugin add org.apache.cordova.camera 

Then your main.html file look like-

<ion-view view-title="Profile">

    <ion-content>
            <div class="align-center">
     
                    <div class="user_img" ng-click="capture()">
                      Click here
                    </div>
</div> 

    </ion-content>

</ion-view>

And controller.js file look like-

myapp.controller('ProfileCtrl', function ($scope, $cordovaCamera) {
    var options = {
        quality: 50,
       destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 150,
        targetHeight: 150,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false,
        correctOrientation: true
    };
    $scope.capture = function () {
      $cordovaCamera.getPicture(options).then(function (imageData) {
            var image = document.getElementById('myImage');
            console.log("image",image)
            //image.src = "data:image/jpeg;base64," + imageData;
        }, function (err) {
            console.log("error",JSON.stringify(err))
        });
    }
});
 

Thanks

Floating point number to integer number in angularjs

Hi,

Here is a way in angularjs by which you can change a floating point number to integer -

In your index.html

       <script>

angular.module('Example', [])

.controller('ExampleController',[$scope',function($scope){
$scope.val = 123.455;
}])

               
                  </script>

<div ng-controller="ExampleController">

<label>Enter number:<input ng-model='val'></label>
<br>
<br>
number in floating point format:<span id='number-default'>
{{val | number}}
</span>
<br>
number in integer format:<span>
{{val | number:0}}
</span>
<br>
Negative number:<span>
{{-val | number:4}}
</span>
<br>
</div>

Thanks 

Plugins to be required to run an ionic app

Hi,

Following are the plugins, which are required to run an ionic app in mobile-

1)Plugin for email composer-

cordova plugin add https://github.com/jcjee/email-composer.git

2)Plugin for date picker-

cordova plugin add cordova-plugin-datepicker


3)Plugin for in app browser-

cordova plugin add cordova-plugin-inappbrowser


4) Plugin for splash screen-

cordova plugin add cordova-plugin-splashscreen

5)Plugin for status bar-

cordova plugin add cordova-plugin-statusbar

6)Plugin for white-list -

ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

7)Plugin for Keyboard-

cordova plugin add com.ionic.keyboard

8)Plugin for console-

cordova plugin add org.apache.cordova.console

9)Plugin for device-

cordova plugin add org.apache.cordova.device


Thanks

Ionic modal

                       In Ionic, modals are provided by the $ionicModal  directive.  Ionic’s modal allows creation from either a template string or a URL. 
Here in this example we are using a URL.

Modals are created with a scope. This can be used in simple examples to pass data. 

Example:-
For using the $ionicModal directive in our example following will be the code of index.html-

<ion-header-bar class="bar-energized">
<h1 class="title">
Contact Info
</h1>
<ion-content>
<div class="card" ng-controller='MainCtrl' ng-click="openModal()">
<div class="item item-divider">
{{contact.name}}
</div>
<div class="item item-text-wrap">
{{contact.info}}
</div>
</div>
</ion-content>

contact.html 

HTML page which we call by the $ionicModal-

<script id="contact.html" type="text/ng-template"> <div class="modal"> <ion-header-bar> <h1 class="title">Edit Contact</h1> </ion-header-bar> <ion-content> <div class="list"> <label class="item item-input"> <span class="input-label">Name</span> <input type="text" ng-model="contact.name"> </label> <label class="item item-input"> <span class="input-label">Info</span> <input type="text" ng-model="contact.info"> </label> </div> <button class="button button-full button-energized" ng-click="closeModal()">Done</button> </ion-content> </ </div></script>

Now our controller.js file look like-

app.controller('MainCtrl', function($scope, $ionicModal) { $scope.contact = { name: 'Demo', info: 'Tap anywhere on the card to open the modal' } $ionicModal.fromTemplateUrl('contact.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal }) $scope.openModal = function() { $scope.modal.show() } $scope.closeModal = function() { $scope.modal.hide(); }; $scope.$on('$destroy', function() { $scope.modal.remove(); });})

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

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>

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