CODEWITHSUNDEEP
angularjs
Peter Boomsma
Peter Boomsma

Reputation: 9808

show progress when httprequest in Angular

I've created (using plunkers from other SO users) a feature where users can search for a movie title which causes the app to do a httprequest to themoviedb.org and serve all results in a list. By using a promise all the images are served at once dodging the waterfall effect and also it shows a "loading" update while the images are getting for being served to the browser.

http://plnkr.co/edit/Y01giYN9E3g92KjVEkua?p=preview

Pretty great. But it's not enough! I want to show the users the progress of their search action. My prefered method would be show a progress bar that fills up during the httprequest but I'm having trouble getting started.

This is my controller:

angular.module("app", [])
  .controller("main", ["moviesearchFactory", "$scope", "$q",  function(moviesearchFactory, $scope, $q) {

    $scope.createList = function(searchquery) {
      $scope.loading = true;
      moviesearchFactory.getMovies(searchquery)
        .then(function(response) {

          $scope.movies = response;
          $scope.images = [];

          $scope.movies.forEach(function(movie) {
            if (movie.poster_path !== null) {
              $scope.images.push({ poster_path: 'https://image.tmdb.org/t/p/w300_and_h450_bestv2/' + movie.poster_path , 
              title: movie.title })
            }
          });

          function preLoad() {

            var promises = [];

            function loadImage(src) {
              return $q(function(resolve, reject) {
                var image = new Image();
                image.src = src;
                image.onload = function() {
                  resolve(image);
                };
              })
            }

            $scope.images.forEach(function(image) {
              promises.push(loadImage(image.poster_path));
            })


            return $q.all(promises).then(function(results) {
              $scope.imagesLoaded = $scope.images;
              $scope.loading = false;
            });
          }

          preLoad();

        })
    }
  }])

How would I go about adding a progress bar to this controller?

Upvotes: 0

Views: 297

Answers (1)

Lax
Lax

Reputation: 1167

I've created two plunks that may help you. Check them out here.

  1. http://plnkr.co/edit/vKACEbYrwbpENyIOua8x?p=preview
$scope.createList = function(searchquery) {
      $scope.showProgress= true;

<md-progress-circular class="" ng-show="showProgress"
                        md-diameter="100px"></md-progress-circular>
  1. http://plnkr.co/edit/1P3mpR61XOuMPON7IDce?p=preview

Upvotes: 1

Related Questions