About Ionic Framework

 Here is some useful information about Ionic:

• Ionic is an open-source framework that uses web technologies to build native mobile apps.
• Ionic is based on AngularJS and Apache Cordova.
• Ionic is used by a large community of developers.
• Ionic has a large library of components and plugins.
• Ionic is known for its performance and its ease of use.
• Ionic is a good choice for developers who want to build native mobile apps without having to learn native development.

Here are some of the benefits of using Ionic:

• Cross-platform: Ionic apps can be built and run on both iOS and Android devices. This makes it a good choice for developers who want to reach a wider audience.
• Efficiency: Ionic apps are built using web technologies, which makes them more efficient than native apps. This is because web technologies are designed to be lightweight and portable.
• Flexibility: Ionic apps can be customized to look and feel like native apps. This makes them a good choice for developers who want to create apps that blend in with the native environment.
• Community: Ionic has a large and active community of developers. This means that there is a lot of support available for Ionic developers.

Here are some of the drawbacks of using Ionic:

• Learning curve: Ionic can be a bit difficult to learn, especially for developers who are not familiar with web development.
• Performance: Ionic apps may not be as performant as native apps. This is because web technologies are not as optimized for mobile devices as native technologies.
• Security: Ionic apps may not be as secure as native apps. This is because web technologies are not as secure as native technologies.

Overall, Ionic is a good choice for developers who want to build native mobile apps without having to learn native development. Ionic is a powerful framework that can be used to create high-quality mobile apps. However, it is important to be aware of the drawbacks of Ionic before deciding to use it.

Ionic vs ReactJS

Ionic and ReactJS are both popular frameworks for building mobile apps. They have different strengths and weaknesses, so the best choice for you will depend on your specific needs.

Ionic is a hybrid framework that uses web technologies to build apps that can be run on both iOS and Android devices. This makes it a good choice for developers who want to build a single app that can be deployed to multiple platforms. Ionic is also known for its large community and extensive library of components and plugins.

ReactJS is a native framework that uses React to build native apps for iOS and Android devices. This makes it a good choice for developers who want to build apps that take full advantage of the native features of each platform. ReactJS is also known for its performance and its large community of developers.

Here is a table that summarizes the key differences between Ionic and ReactJS:

Feature	Ionic	ReactJS
Technology	Hybrid (web technologies)	Native (React)
Platforms	iOS and Android	iOS and Android
Community	Large	Large
Components and plugins	Extensive library	Limited library
Performance	Good	Excellent
Learning curve	Medium	Steep

Ultimately, the best choice for you will depend on your specific needs and preferences. If you want to build a single app that can be deployed to multiple platforms, Ionic is a good choice. If you want to build apps that take full advantage of the native features of each platform, ReactJS is a good choice.

Here are some additional considerations that may help you decide which framework to use:

• Your team's experience: If your team has experience with web development, Ionic may be a good choice. If your team has experience with native development, ReactJS may be a good choice.
• The type of app you're building: If you're building a simple app, Ionic may be a good choice. If you're building a complex app, ReactJS may be a good choice.
• Your budget: Ionic is generally less expensive than ReactJS.

 

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
}