Adding loading bar Ionic App - Angular

Question

How can i Add a loading or please waiting in between 2 routes .

for example when i go to page like details.html,this pas has http till page loads up user see a blank page .

i want something like this :

factory

 .factory('DrupalNode', function ($http, $stateParams, REMOTE_URL) {

        return {
            node: $http.get(REMOTE_URL + 'all/')

//////////////// please wait

        }
    });

Controller

app.controller('detailController', function($scope, DrupalNode, $state, $window){

    DrupalNode.node.success(function(data){  

/////////disappear waiting text 


        $scope.innerData = data;
        $scope.whichArticle = $state.params.Nid;
        console.log(data);


    });
    $scope.goBack = function() {
        $window.history.back();
    };

});

Mudasser Ajaz · Accepted Answer · 2015-08-28 11:34:17Z

7

Use $ionicLoading service of ionic. Call its show() function at start of controller and hide() when you get response from api.

  app.controller('detailController', function($scope, DrupalNode, $state, $window, $ionicLoading){
            $ionicLoading.show({
              template: 'Loading text goes here...'
            });
            DrupalNode.node.success(function(data){  
            $ionicLoading.hide();
        /////////disappear waiting text 


                $scope.innerData = data;
                $scope.whichArticle = $state.params.Nid;
                console.log(data);


            });
            $scope.goBack = function() {
                $window.history.back();
            };

        });

And if you want some text shown in loading then use show() like this

    $ionicLoading.show({
      template: 'Loading text goes here...'
    });

edited Aug 28, 2015 at 11:34

answered Aug 28, 2015 at 10:52

Mudasser Ajaz

6,2571 gold badge28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sadeghbayan Over a year ago

thanks , where should i put this $ionicLoading.show({ template: 'Loading text goes here...' }); ?

Mudasser Ajaz Over a year ago

@sani I have edited code in my answer. Plese look at code, i am using it right at start of controller before DrupalNode.node.success(function(data){

Sadeghbayan Over a year ago

thanks a million , and can we add a gif or aniomation here ?

Mudasser Ajaz Over a year ago

It already has by default gif. If you just use $ionicLoading.show() without template option , it will show a spinner.

Anas Omar · Accepted Answer · 2015-09-02 07:07:22Z

you can make an http interceptors so on every http request this loading will show you can see my example below

first you have to make a service :

    app.service('LoadingInterceptor', function($rootScope, localStorage, notifications) {
    return {
        request: function(config) {
            if (!(config && config.data && config.data.control && config.data.control.pageOffset !== 0)) {
                $rootScope.$broadcast('loading:show');
            }
            return config
        },

        response: function(response) {
            $rootScope.$broadcast('loading:hide');
             return response
        } 
    }
})

and then you have to push this service to the httpProvider

   app.config([
   '$httpProvider',


   function($httpProvider) {

       $httpProvider.interceptors.push('LoadingInterceptor');

   }

])

and then you need to make your template and call the $ioniLoading to show and to hide

  app.run(function( $rootScope, localStorage, $ionicLoading) {

            //on broadbanding a 'loading:show' $ionicLoading will appear
            $rootScope.$on('loading:show', function() {
                $ionicLoading.show({
                    template: "Loading...<br/><ion-spinner icon='lines' class='spinner-assertive'></ion-spinner>",
                    noBackdrop: true
                })
            })

            //on broadbanding a 'loading:hide' $ionicLoading will hide
            $rootScope.$on('loading:hide', function() {
                $ionicLoading.hide()
            })

        });

Collectives™ on Stack Overflow

Adding loading bar Ionic App - Angular

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related