Cordova plugin commands

Add a plugin in app:

Cordova plugin add <plugin>

Search a plugin:

Cordova plugin search <splashscreen>

See the list of plugins added in your app:

Cordova plugin list

Run ionic

​​

​​

export ANDROID_HOME="$HOME/install/adt-bundle-linux-x86_64-20140702/sdk"
 

export PATH="$HOME/install/adt-bundle-linux-x86_64-20140702/sdk/tools:$ANDROID_HOME/platform_tools:$PATH"

Don't run below commands with sudo

ionic start myIonicApp tabs

​​
cd myIonicApp
ionic platform add android
ionic build android
ionic emulate android

Ionic examples:
http://codepen.io/ionic/public-list/

Run npm update -g ionic to update

Open ionic app in browser:

ionic serve

​​

Open ionic app in browser on specific port

​​

ionic serve 8080 8100

Enable cookies in your ionic app

Go to

/node-v0.10.29/ionicnew/platforms/android/src/com/ionicframework/< you package name>

then open CordovaApp.java

insert below line of code:
​
CookieManager.setAcceptFileSchemeCookies(true);      


in ​onCreate() method like:

​super.onCreate(

savedInstanceState);

super.init();

​​

CookieManager.setAcceptFileSchemeCookies(true);       

// Set by <content src="index.html" /> in config.xml

super.setIntegerProperty("splashscreen", R.drawable.screen);

super.loadUrl(Config.getStartUrl());

 

and import following package

 

​import android.webkit.CookieManager;

​ Open ionic app in browser on specific port

​ionic serve 8080 8100

Why Ionic is best for hybrid mobile apps development?

Ionic is an UI framework which is build to create hybrid mobile apps based on Html5.

Unlike a responsive framework, Ionic is packed with very native-styled mobile UI elements and layouts that you get with a native SDK on iOS or Android. Also, Ionic is built on the top of popular AngularJS framework from Google to utilize AngularJS power.

Why Ionic

Build apps with the web platform. Using HTML, CSS, and JavaScript, you can make
hybrid apps that behave like native like mobile apps.

Built with AngularJS. For people familiar with AngularJS (or even another JavaScript
framework like Ember), Ionic is a perfect choice. Ionic is built alongside Angular, which
allows you access to all of Angular’s features as well as any of the many thousands of
Angular modules for additional features. Ionic also uses the popular ui.router module
for navigation, because Angular’s default routing module lacks some features.

Uses modern techniques. Ionic was designed to work with modern CSS3 features, like
animations. Mobile browsers generally have better support for the latest web platform
specifications, which allows you to use those features as well.

Powerful CLI tools. With the Ionic command line tool, you can quickly manage
development tasks such as previewing the app in a browser, emulating the app, or deploying an app to a connected device. It helps with setting up and starting a project
as well.

Ionic ecosystem. Ionic also provides a rich ecosystem of features that make
development much easier. The Ionic Creator service allows you to use a drag and drop
interface to design and export an app. An upcoming service for remotely building and
deploying apps is also in development. In short, Ionic is all about creating not just the
basic tools for making hybrid apps but also the development tools that will help you
create them efficiently.

 

Must have plugins for hybrid app

org.apache.cordova.network-information

Using this you can identify the network/internet information of device. Very useful to identify online/offline mode.

​​

org.apache.cordova.inappbrowser

Using this plugin you can open external links in new browser window in your app. So that by pressing back button on your device, will show your app again.

​​

​​
org.apache.cordova.splashscreen

You can show splash screen to user at the time of app start.

com.phonegap.plugins.pushplugin

Your application can receive push notifications.

org.apache.cordova.dialogs


Show alert boxes like native apps.

https://github.com/brodysoft/Cordova-SQLitePlugin


This is sqlite plugin. Using this you can store offline data in your hybrid app.

nl.x-services.plugins.toast

This one used to show a toast message. Toast message hides after sometime automatically.

Top hybrid mobile framework

IONIC

The best framework to create hybrid apps in my opinion. I am using this to create hybrid apps.

Great examples are provide by IONIC community. There are separate examples available which you need to develop a app.

Good app structure. You can separate your html views, js controlles and js services.

Its worked on angularJS which is a plus point for every web developer. These days angularJS used in every SPA (Single page application).

No new technology required to work on ionic. Only we need knowledge of html5, css and javascript.

IONIC is one of the most promising HTML 5 mobile application frameworks. Built using SASS, it provides many UI components to help develop rich and interactive apps. It uses the JavaScript MVVM framework, AngularJS to power apps. Two-way data binding, interaction with backend services and APIs makes AngularJS a mobile developer’s common choice. With the coming release of AngularJS 2.0, focused on mobile, it’s sure to gain even more popularity.
The team at IONIC will soon be introducing an easier way to create IONIC apps with IONIC creator. This will be released soon and will have drag and drop functionality to get started with app development in minutes.


Mobile Angular UI

Mobile Angular UI is an HTML 5 framework which uses bootstrap 3 and AngularJS to create interactive mobile apps.
The main features of Mobile AngularUI include:

• Bootstrap 3
• AngularJS
• Bootstrap 3 mobile components such as switches, overlays and sidebars which are missing in normal bootstrap.
• AngularJS modules such as angular-route, angular-touch and angular-animate

Responsive media queries are stripped out of bootstrap as separate files, you only need to include what you need. Mobile Angular UI doesn’t have any jQuery dependencies, all you need are some AngularJS directives to create awesome mobile user experiences.
Take a look at the Mobile Angular UI demo page to see it in action. If you want to dig deeper, I would recommend reading our article on getting started with Mobile Angular UI.

Intel XDK

Intel XDK is a cross platform application tool developed by Intel. Getting started with Intel XDK is easy, all you need is to download their application which is free and available for Linux, Windows and Mac. It provides a number of templates to get started and supports a number of UI frameworks such as Twitter bootstrap, jQuery Mobile and Topcoat.
Intel XDK provides a live preview on the connected device whilst you are developing along side many other useful tools.
On a personal note, I think development using Intel XDK was the easiest. It uses a drag and drop approach, although it does create a lot of unnecessary code.

Appcelerator Titanium

Appcelerator’s Titanium is an open source mobile application framework that provides an environment to create native apps for several mobile platforms
Titanium is a complete solution for creating hybrid mobile apps with all you need in one place. To get started with Titanium download Titanium studio. The Titanium SDK is equipped with a number of mobile platform APIs and Cloud service to use as an app backend. It comes with platform independent APIs which makes it easier to access phone hardware.
Titanium uses Alloy, a MVC framework to enable rapid development of mobile apps. Modules created using Alloy are easy to reuse across different apps, hence significantly reducing the development time and the lines of code.

Sencha Touch

Sencha Touch is an HTML 5 mobile app framework for creating apps for several platforms including iOS, Android and Blackberry. It has been in existence for some years now and is popular among hybrid mobile application developers.
Sencha Touch scores highly against it’s competitors by providing a native look and feel across all of the platforms it supports.
Getting started with Sencha Touch isn’t that difficult but in order to get the best out of Sencha Touch, one needs to invest a considerable amount of time.

Kendo UI

Telerik’s Kendo UI is an HTML 5 framework for creating cross platform mobile applications. Kendo UI relies heavily on jQuery and has a number of jQuery based widgets.
Learning Kendo UI is not difficult, developers familiar with jQuery will find Kendo UI easy to learn. Kendo UI has open sourced most of Kendo UI’s toolset and JavaScript framework features. However most of the commonly used widgets are still under a commercial license.

PhoneGap

PhoneGap is the odd one out in this list as it’s not a framework for creating an app, but for packaging and releasing an app. PhoneGap is based on the open source Cordova and is the commercial version owned by Adobe. With a dedicated support team, PhoneGap is popular amongst many mobile developers.
You can use any choice of JavaScript or UI frameworks to get started with PhoneGap. jQuery Mobile alongside KnockOut.js or AngularJS is a nice combination. Once you are done with your code, PhoneGap takes it from there and wraps it based on the intended platform. Applications built using PhoneGap use a web view to render their content. PhoneGap has a minimal set of web APIs to access phone hardware features and it’s possible to write custom plugins to suit requirements.
 
 
 

Why hybrid apps?

1. You can develop hybrid apps using your simple web skills: Html5, css, Javascript.
2. No separate budget required for iOS and Android.
3. Development cost is reasonable compared to native apps.
4. Same code base can be used for web application.
5. You can test them in browser like google chrome/Safari.
6. Large community to support.

Cordova show alert dialog

To show alert box in cordova hybrid app use:

navigator.notification.alert('This is the alert box', null, '', 'Close');

Ionic width classes

CSS Width Class      CSS Offset Class        Width
.col-10                             .col-offset-10                   10%
.col-20                             .col-offset-20                   20%
.col-25                             .col-offset-25                   25%
.col-33                             .col-offset-33                   33.3%
.col-50                             .col-offset-50                   50%
.col-67                             .col-offset-67                   66.6%
.col-75                             .col-offset-75                   75%
.col-80                             .col-offset-80                   80%
.col-90                             .col-offset-90                   90%

Ionic pass more than one argument in go()

$state.go("main.user", {id:10, type:'Manager'});

Ionic disable back on particular view

Ionic disable back on particular view:

$ionicHistory.nextViewOptions({
     disableAnimate: true,
     disableBack: true
});

Ionic modal set backdrop click false

Use below code:

$ionicModal.fromTemplateUrl('views/login-page.html', {
        scope: $scope,
        backdropClickToClose: false
    }).then(function(modal) {
        $rootScope.modal = modal;
 });

Ionic clear history

To clear history in ionic use

$ionicHistory.clearHistory();

Initialize ionic on device ready

1. Remove ng-app attribute from <HTML> tag.

2. Add below code in your index.html:

<script>
     // Wait for Cordova to load
     document.addEventListener("deviceready", onDeviceReady, false);

     // Cordova is ready
     function onDeviceReady() {
          app.services = angular.module('services', ['ngResource']);
          angular.bootstrap(document, ['ionicApp']);
     }
</script>

Ionic navbar search

Html:

<search-bar ng-model="search"></search-bar>

app.js:

.directive('searchBar', [function () {
  return {
    scope: {
      ngModel: '='
    },
    require: ['^ionNavBar', '?ngModel'],
    restrict: 'E',
    replace: true,
    template: '<ion-nav-buttons side="right">'+
            '<div class="searchBar">'+
              '<div class="searchTxt" ng-show="ngModel.show">'+
                  '<div class="bgdiv"></div>'+
                  '<div class="bgtxt">'+
                    '<input type="text" placeholder="Search..." ng-model="productObject.searchAgenda">'+
                  '</div>'+
                '</div>'+
                '<i class="button button-clear" ng-class="{\'icon-disabled-opacity\' : showdate}" ng-click="updateSelection();" title="Show all dates">All</i>'+
            '</div>'+
          '</ion-nav-buttons>',
   
    compile: function (element, attrs) {
      var icon=attrs.icon
          || (ionic.Platform.isAndroid() && 'ion-android-search')
          || (ionic.Platform.isIOS()     && 'ion-ios7-search')
          || 'ion-search';
      angular.element(element[0].querySelector('.icon')).addClass(icon);
     
      return function($scope, $element, $attrs, ctrls) {
        var navBarCtrl = ctrls[0];
        $scope.navElement = $attrs.side === 'right' ? navBarCtrl.rightButtonsElement : navBarCtrl.leftButtonsElement;
       
      };
    }
   
  };
}])

yourCTRL.js:

app.controller('searchBarCtrl', function($scope,$ionicNavBarDelegate){
  var title, definedClass;
  $scope.$watch('ngModel.show', function(showing, oldVal, scope) {
    if(showing!==oldVal) {
      if(showing) {
        if(!definedClass) {
          var numicons=$scope.navElement.children().length;
          angular.element($scope.navElement[0].querySelector('.searchBar')).addClass('numicons'+numicons);
        }
       
        title = $ionicNavBarDelegate.getTitle();
        $ionicNavBarDelegate.setTitle('');
      } else {
        $ionicNavBarDelegate.setTitle(title);
      }
    } else if (!title) {
      title = $ionicNavBarDelegate.getTitle();
    }
  });
});

Ionic remove back button

To remove back button use hide-back-button="true" on ion-view


<ion-view title="{{navTitle}}" class="bubble-background" hide-back-button="true">

Ionic cache false for particular state

Use below code to cache false for particular state:

.state('main.emp', {
            cache : false,
            url: '/emp',
            views: {
                'main': {
                  templateUrl: 'views/emp-list.html',
                  controller : 'EmpCtrl'
                }
            }
  })

Ionic show option button

To add option button using ionic your code should look like:

<ion-list can-swipe="true">
        <ion-item ng-repeat="item in itemList">
              <ion-option-button class="button-stable" ng-click="showDetail(item)">Details</ion-option-button>
        </ion-item>
 </ion-list>

When you swipe your item from right to left then you can see option button "Details".

Ionic fixed search bar

To add fixed search bar in ionic your html code should look like:

<ion-header-bar class="bar bar-subheader item-input-inset">
      <label class="item-input-wrapper search">
        <i class="icon ion-search placeholder-icon"></i>
        <input placeholder="Search..." ng-keyup="searchList($event)" type="text">
      </label>
 </ion-header-bar>

When user starts typing in search field then searchList() method will call. You can change this in your code according to your requirements.

Ionic infinite scroll

Your html content should look like this:

<ion-content class="has-header">
     <ion-list>
        <ion-item ng-repeat="item in arrItemValues track by $index">
            {{item}}
        </ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if="isMoreItems" on-infinite="updateList()" distance="10%">
</ion-infinite-scroll>
</ion-content>

When user scroll from bottom then updateList() method will call.


You can write your JS code in updateList() method to update your list.

Ionic pull to refresh

Your html content should look like this:

<ion-content class="has-header">
    <ion-refresher pulling-text="Refreshing List" on-refresh="refreshList()">
    </ion-refresher>
    <ion-list can-swipe="true">
        <ion-item ng-repeat="item in arrItemValues track by $index">
            {{item}}
        </ion-item>
      </ion-list>
</ion-content>

When user pull to refresh on html page the refreshList() method will call.

You can write your JS code to populate the list.

Ionic Leaving and entered state issue

To fix this issue remove abstract attribute from state mappings.

Its works for me.

Ionic show loader in each ajax/http request

Add below lines of code in run section of your app.js

$rootScope.$on('loading:show', function() {
     $ionicLoading.show({template: '<ion-spinner icon="spiral"/>'})
 })

 $rootScope.$on('loading:hide', function() {
      $ionicLoading.hide()
 })


Add below interceptor in config section of your app.js

$httpProvider.interceptors.push(function($rootScope, $injector, $q) {
        return {
            request: function(config) {
              $rootScope.$broadcast('loading:show');
              return config
            },
            response: function(response) {
              var $http = $http || $injector.get('$http');
              if($http.pendingRequests.length < 1) {
                $rootScope.$broadcast('loading:hide');
              }
              return response;
            },
            requestError: function(rejectReason) {
              $rootScope.$broadcast('loading:hide');
              return $q.reject(rejectReason);
            },
            responseError: function(rejectReason) {
              $rootScope.$broadcast('loading:hide');
              return $q.reject(rejectReason);
            }
        }
    });

in app.js It may look like:

app.run(function($ionicPlatform, $rootScope, $ionicLoading) {
        $ionicPlatform.ready(function() {
            if(window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
                StatusBar.overlaysWebView(true);
            }
        });

        $rootScope.$on('loading:show', function() {
          $ionicLoading.show({template: '<ion-spinner icon="spiral"/>'})
        })

        $rootScope.$on('loading:hide', function() {
          $ionicLoading.hide()
        })
 })

.config(function($stateProvider, $urlRouterProvider, $httpProvider) {

$stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.softwareCostEstimation', {
    url: '/softwareCostEstimation',
    views: {
      'menuContent': {
        templateUrl: 'templates/softwareCostEstimation.html',
        controller: 'SoftwareCostEstimationCtrl'
      }
    }
  })

----
----

$urlRouterProvider.otherwise('/app/softwareCostEstimation');

  $httpProvider.interceptors.push(function($rootScope, $injector, $q) {
        return {
            request: function(config) {
              $rootScope.$broadcast('loading:show');
              return config
            },
            response: function(response) {
              var $http = $http || $injector.get('$http');
              if($http.pendingRequests.length < 1) {
                $rootScope.$broadcast('loading:hide');
              }
              return response;
            },
            requestError: function(rejectReason) {
              $rootScope.$broadcast('loading:hide');
              return $q.reject(rejectReason);
            },
            responseError: function(rejectReason) {
              $rootScope.$broadcast('loading:hide');
              return $q.reject(rejectReason);
            }
        }
    });

});

Ionic remove back button text

Just add below lines in your app.js

$ionicConfigProvider.backButton.text('Back').icon('ion-chevron-left');
$ionicConfigProvider.backButton.previousTitleText(false).text(''); // Removes back button text 

It may be like as:

app.run(function($ionicPlatform, $rootScope, $ionicLoading) {
   // your code
})

.config([...]){
   $ionicConfigProvider.backButton.text('Back').icon('ion-chevron-left');
   $ionicConfigProvider.backButton.previousTitleText(false).text(''); // Removes back button text
}