angularjs - show progress when httprequest in Angular -


i've created (using plunkers other users) feature users can search movie title causes app httprequest themoviedb.org , serve results in list. using promise images served @ once dodging waterfall effect , shows "loading" update while images getting being served browser.

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

pretty great. it's not enough! want show users progress of search action. prefered method show progress bar fills during httprequest i'm having trouble getting started.

this 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 go adding progress bar controller?

i've created 2 plunks may 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

Comments

Popular posts from this blog

gridview - Yii2 DataPorivider $totalSum for a column -

java - Suppress Jboss version details from HTTP error response -

Sass watch command compiles .scss files before full sftp upload -