sairam sairam - 2 years ago 221
Javascript Question

AngularJS: show loader image until data is loaded

screen image1

screen image2

displaying results using angular js + php, how to show loader image until data is loaded, here my code is written below,

How do I have AngularJS show a loading image until the data has finished loading?

app.js file

var app = angular.module('myApp3', ['ui.bootstrap']);

app.filter('startFrom', function() {

return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
return [];
app.controller('customersCrtl', function ($scope, $http, $timeout) {

$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 20; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;

and php code is here

<html ng-app="myApp3" ng-app lang="en">

<div ng-controller="customersCrtl">
<div class="content" >

<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
<div class="col-md-4">
<h5>Filtered {{ filtered.length }} Of {{ totalItems}} Total Locations</h5>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<th>Id&nbsp;<a ng-click="sort_by('id');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Place Name&nbsp;<a ng-click="sort_by('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Category ID&nbsp;<a ng-click="sort_by('category_name');"><i class="glyphicon glyphicon-sort"></i></a></th>

<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">

<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No Locations found</h4>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>


<script src="<?php echo Yii::app()->baseUrl; ?>/angular/js/angular.min.js"></script>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/app/app.js"></script>


Answer Source

display loader onload and hide it once data loaded.

$scope.showLoader = true;
    $scope.showLoader = false;
    // rest of your code

EDIT: html code from Saeed's answer

<div ng-show="showLoader"><!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->
    <img src="source"> <!-- or any other spinner -->
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download