show loading image

Question

show loading image

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

2

display a loading image or a loading message while loading all products brought from the controller

.controller('productosCtrl', function($scope, $http, $q, $location, $ionicLoading, Productos) {
    Productos.productos().then(function(argument, $timeout) {
        $scope.producto = []
        for (var i = 0; i <= argument.store.products.length - 1; i++) {
            $scope.producto.push({
                id: argument.store.products[i].id,
                name: argument.store.products[i].name,
                description: argument.store.products[i].description,
                category: argument.store.products[i].category,
                store: argument.store.products[i].store,
                price: argument.store.products[i].price,
                picture: argument.store.products[i].picture.picture.url
            });
            console.log(i);
        }
        $scope.$broadcast('scroll.refreshComplete');
    })
})

I print them in the view with a ng repeat, but I want that before loading the image I show a static image before or a loading message because there are times that it loads very slowly

angularjs ionic controller

asked by ingFR 20.10.2016 в 05:22

source

3 answers

Error executing pip install mysql-python Angularjs hide and show answer form

score 1 · Answer 1

To display a load image simply do the following:

First, you have to add the following import:

import { LoadingController } from 'ionic-angular';

Then, in the constructor of the class, you declare the following:

constructor(..., public loading: LoadingController, ...){...}

Now, when you want to show it, you just have to do it like this:

let loader = this.loading.create({  //Creamos la imagen de carga
  content: 'Cargando equipos...',
});

loader.present();  //Mostramos la carga

To close the image of the load, we have to execute this code:

loader.dismissAll();

This is how I use it in Ionic, in the part of Typescript

score 1 · Answer 2

You can use the ngif else, Here's the page.

Example:

<div *ngIf="productos async;else cargando">
  contenido cuando cargue productos
</div>

<ng-template #cargando>
  <img src="../imagenes/imagencargando.png">
</ng-template>

score 0 · Answer 3

I'm not sure how much your data may be loading, but this should help you.

.controller('productosCtrl', function($scope, $http, $q, $location, $ionicLoading, Productos) {


        $ionicLoading.show({
             //puede ser android o ios
             template: '<ion-spinner icon="android"/>'
        });
        Productos.productos().then(function(argument, $timeout) {
            $scope.producto = []
            for (var i = 0; i <= argument.store.products.length - 1; i++) {
                $scope.producto.push({
                    id: argument.store.products[i].id,
                    name: argument.store.products[i].name,
                    description: argument.store.products[i].description,
                    category: argument.store.products[i].category,
                    store: argument.store.products[i].store,
                    price: argument.store.products[i].price,
                    picture: argument.store.products[i].picture.picture.url
                });
                console.log(i);
            }
            $ionicLoading.hide();
        })
    })