Ionic Loading Action

From WikiOD

Ionic loading action[edit | edit source]

$ionicLoading is the default loading interaction effect of ionic. The content inside can also be modified in the template.

Usage[edit | edit source]
 angular.module('LoadingApp', ['ionic'])
 .controller('LoadingCtrl', function($scope, $ionicLoading) {
   $scope.show = function() {
     $ionicLoading.show({
       template: 'Loading...'
     });
   };
   $scope.hide = function(){
     $ionicLoading.hide();
   };
 });
Method[edit | edit source]

Show a loading effect.

show(opts)
Parameter Type Details
opts object Options for the loading indicator. Available attributes:
  • {string=} template The html content of the indicator.
  • {string=} templateUrl A url to load the html template as the content of the indicator.
  • {boolean=} noBackdropWhether to hide the background. It will be displayed by default.
  • {number=} delayHow many milliseconds delay the indicator is displayed. The default is no delay.
  • {number=} durationHow many milliseconds to wait before automatically hiding the indicator. By default, the indicator will remain displayed until triggered .hide().

Hide a loading effect.

 hide()
API[edit | edit source]
Attributes Type Details
delegate-handle

(Optional)

String The handle definition comes with $ionicListDelegatethe list.
show-delete

(Optional)

Boolean value Whether the delete button of the list item is currently displayed or hidden.
show-reorder

(Optional)

Boolean value Whether the sort button of the list item is currently displayed or hidden.
can-swipe

(Optional)

Boolean value Whether the list item is allowed to slide to display the option buttons. Default: true.

Instance[edit | edit source]

HTML code:[edit | edit source]
 <code><html ng-app="ionicApp">
   <head>
     <meta charset="utf-8"></code>
 <code> </code>   <code><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></code> 
 <code> </code>   
 <code> </code>   <code><title>Ionic Modal</title></code>
 
 <code> </code>    <code><link href="http://www.phpxs.com/static/ionic/css/ionic.min.css" rel="stylesheet"></code>
 <code> </code>   <code><script src="http://www.phpxs.com/static/ionic/js/ionic.bundle.min.js"></script></code>
 <code> </code> <code></head></code>
 <code> </code> <code><body ng-controller="AppCtrl">
     
       <ion-view title="Home">
         <ion-header-bar>
           <h1 class="title">The Stooges</h1></code>
 <code> </code>       </ion-header-bar>
 <code> </code>       <ion-content has-header="true">
 <code> </code>         <ion-list>
 <code> </code>           <ion-item ng-repeat="stooge in stooges" href="#"><code>{{stooge.name}}</code></ion-item>
 <code> </code>         </ion-list>
 <code> </code>       </ion-content>
 <code> </code>     </ion-view>
 <code> </code>   
 <code> </code> <code></body></code>
 <code></html></code>
Java Script code[edit | edit source]
 angular.module('ionicApp', ['ionic'])
 .controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
 
   // Setup the loader
   $ionicLoading.show({
     content: 'Loading',
     animation: 'fade-in',
     showBackdrop: true,
     maxWidth: 200,
     showDelay: 0
   });
   
   // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
   $timeout(function () {
     $ionicLoading.hide();
     $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
   }, 2000);
   
 });
----

$ Ionic Loading Config[edit | edit source]

Set the default options for loading:

Usage:[edit | edit source]
 var app = angular.module ('myApp', ['ionic'])
 app.constant('$ionicLoadingConfig', {
   template:'Default loading template...'
 });
 app.controller('AppCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
     $ionicLoading.show(); //Configuration options are set in $ionicLoadingConfig
   };
 });