Optimal strategy for waiting until all service calls have completed and returned responses within an Angular controller

Is there a way in Angular to determine when all service calls have completed so that I can stop a loading bar in the controller?

Answer №1

To improve your Angular application's performance, consider implementing an interceptor. An interceptor is a factory that intercepts all requests and responses made by your application.

app.factory( 'Inteceptor', function($rootScope) {
 int count = 0;
 return {
   request : function() {count++},
   requestError : function() {},
   reponse : function() {
                  count--; 
                  if( count == 0 ) { 
                         $rootScope.$broadcast( 'Event' ) 
                  }
   },
   responseError : function() {}
}});

This interceptor keeps track of the total number of requests sent. By starting at zero, incrementing on request, and decrementing on response, you can easily determine when all requests have been completed by broadcasting an event.

To add this interceptor, include it in the config method like this:

$httpProvider.interceptors.push('CustomHttpInterceptor');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

Unable to display jQuery modal due to error "Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent."

Check out the JS Fiddle demo here. Here is the code in question: $('#infoTable').click(infoModal); function infoModal(){ var table = "THIS IS A TABLE"; $("#dialogContainer").dialog({ appendTo: "#msg-dialog", autoOpen: f ...

The event OT.Publisher.onStreamAvailableError is triggered when the media stream is unexpectedly aborted,

Currently, I am experimenting with Opentok using Node.js. My goal is to enable one-to-one video chats between users utilizing Tokbox's services. Surprisingly, the functionality works flawlessly in Chrome but encounters issues in Firefox. An error mes ...

Endless Loop: AngularJS app.run() Promise caught in infinite cycle

I have a situation in my AngularJS app where I am using app.run() to check if a user is logged in before displaying the site to restrict access to non-registered users. Initially, I faced issues with the isLoggedIn function returning false when reloading t ...

Waiting for Promise Js to be fulfilled

I've been exploring the use of Bluebird for handling promises in Node.Js. I have encountered a situation where I need a function to return only when a promise is fulfilled. The desired behavior can be illustrated by the following code snippet: functi ...

"Troubleshooting: Issue with AngularJS ng-repeat not functioning properly when using an

I am working with a simple list <ul> <li ng-repeat="spiel in spielListe">Do something</li> </ul> Along with a perfectly connected controller $scope.spielListe = []; There is also a method that adds objects to the array in th ...

Task: Choose MySQL option and Retrieve JSON data

I have a question regarding implementing a function in a separate module file and calling it within a route to retrieve query data: function getSobre() { return new Promise((resolve, reject) => { db.query(`SELECT * FROM sobre ORDER BY cod ...

Adjust a parameter within a MongoDB array entity

I am attempting to update a value within an array of objects. Looking at the MongoDB schema above, my goal is to find an expense with an ID that matches the _id and update the fields with new values from req.body. Specifically, I need to update expensesTyp ...

Angry Librarians Uncover Secret to Incrementing Variable in Angular.js

Check out my HTML snippet: <div ng-app='app'> <div ng-controller="MyController" ng-init="myVar=7"> {{myVar}} <span ng-init="myVar=myVar+5">{{myVar}},</span> <span ng-init="myVar=myVar+15">{{myVar}},</ ...

Is it feasible to style individual letters in a word within an input field?

Is it possible to change the styling of individual letters in an input containing text? For example, if the word 'Test' is in the input, can I make the 'Te' bold while leaving the 'st' regular? Alternatively, perhaps I'd ...

What is the functionality of the remote data source in Jquery Mobile autocomplete feature?

Currently, I am browsing through this page and it appears that there is no clear documentation provided on the expected format or functionality of the remote data source. The example JavaScript code on the website references a remote data source at http:/ ...

Adjust the start and end dates of the Bootstrap datepicker according to the chosen value

I am looking to dynamically set the startDate and endDate of a Bootstrap datepicker based on the value selected in an option form. For example, if I select "Boby" from the options, then the datepicker should be configured with startDate = 2016-10-04 and e ...

Enhance user interactivity by incorporating dynamic checkboxes, radio buttons, checkbox groups, and radio button groups using Ext

Hello to all the amazing folks at Stack Overflow! I've tried searching for a solution to this issue on Stack Overflow, but I couldn't find anything helpful. Here is my model: Ext.define('soru', { extend: 'Ext.data.Model' ...

Maintaining duplicate values in a JSON stringify operation: Tips for retention

Server responses are being received in JSON format, which may contain objects with duplicate keys. When displaying the results, I noticed that only the last value for duplicate keys was showing up. After investigating, I realized this was due to using the ...

Issue with the status of a vue data object within a component

While working on updating my original Vue project, I encountered an error with the data object sports_feeds_boxscores_*. The website features three tabs that display scores for the major sports leagues. I am currently in the process of adding player stats ...

Tips on triggering an AJAX call to load additional content when a user reaches the bottom of the page for the first time

My goal is to dynamically append an HTML file to a div element when the user reaches the bottom of the page. However, I have encountered an issue where the script appends the content multiple times after refreshing the page. It seems like the Boolean varia ...

Move and place, editing tools

Is it possible to create a drag-and-drop editor similar to the one found in the form editor on wufoo.com? ...

Issues with AngularJS ng-class not functioning correctly with conditions

I am struggling with a simple task - I can't seem to change the designated class. My main objective is to confirm whether or not the date follows the correct format (DD-MMM-YYYY hh:mm:ss). <input type="text" style="width : 80%" ng-model="startTim ...

Having issues with showing an image from a specified component in a separate file

I am facing an issue where my image is not displaying in the app.js file, even though I have imported it from another file named comp.js. Here is the current code in app.js: import React from 'react'; import TextImg from "./Comp"; impor ...

AngularJS Code is displayed upon page refresh or loading

Just starting out with AngularJS. Currently working on retrieving data from a Rest API and displaying it on the page. Here is the code snippet I am using: $http.get(local_url+'/data'). then(function(response) { $scope.data = respon ...