How to show a div when a resource complete get data

Question

I have a factory which call HomeNews and i want to make a preload div when the $resource is still process .

This is My ,Service File

(function() {
      var newsServices;

      newsServices = angular.module("newsServices", ["ngResource"]);

      newsServices.factory("HomeNews", [
        //I want to display a div when it's loading
        "$resource", function($resource) {
          return $resource("http://128.1.1.176/webservice/get_news_for_home.php?wscreen=" + windowWidth, {}, {
            query: {
              method: "GET",
              isArray: false
        //And I want to Hide the div when it's completed
            }
          });
        }
      ]);

    }).call(this);

This is My ,Controller File

(function() {
  "use strict";
  var newsControllers;

  newsControllers = angular.module("newsControllers", []);

  newsControllers.controller("HomeNewsListCtrl", [
    "$scope", "HomeNews", "$location", function($scope, HomeNews, $location) {
      $scope.news = HomeNews.query();
      return $scope.go = function(path) {
        return $location.path(path);
      };
    }
  ]);

}).call(this);

Noor · Answer 1 · 2014-04-29T04:04:26.893

What I understand from your question is that you want to make a loading gif appears when your app is communicate with an external service,

I'll say use a directive, say loading, then:

<loading></loading>

then define a directive:

app.directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div ng-show="loading"><img src="path/to/loading.gif"/>Loading...</div>',
      }
  });

then when you normally will have a controller where you will use your service, just before using your service, define loading to be true so that the gif is displayed:

$rootScope.loading = true;

then, as soon you have made your call, $rootScope.loading = false;

In the above, what simply happens is that you define a directive <loading> which get replaces by the template <div ng-show="loading"><img src=".../path/to/loading.gif"/>Loading...</div>. Then, the div get shown only when loading is true.

This technique works for sure because I've used it, hopes it helps ;)

How to show a div when a resource complete get data

1 Answers1