Maintaining the user interface state while utilizing $resources in AngularJS

For my app, users have the ability to create and delete items. I've implemented $resources for this functionality, which is working really well. However, I'd like to implement a loading screen that appears whenever a request is being processed.

// Implement loading-screen display
// ...

Item.destroy({'id': item.id}, function( response ){
  // Handle success
  // ...

  // Hide loading-screen
}, function( error ){
  // Handle error 
  // ...

  // Hide loading-screen
});

Instead of manually showing and hiding the loading screen with each resource call, I'm looking for a way to configure the resourcemodule to automatically handle displaying and hiding the loading screen whenever data is being loaded from a resource. Is there a way to achieve this configuration?

javascriptangularjsasynchronous

Answer №1

If you want to check for any pending requests, you can utilize the $http.pendingRequests array.

An example from the angular-seed project can be found at: https://github.com/rpeterson/angular-seed/blob/master/client/src/common/services/httpRequestTracker.coffee

angular.module('services.httpRequestTracker', [])

.factory('httpRequestTracker', ['$http',
    function($http) {

        var httpRequestTracker = {};
        httpRequestTracker.hasPendingRequests = function() {
            return $http.pendingRequests.length > 0;
        };

        return httpRequestTracker;
    }
]);

To create a loading directive that shows when there are pending requests, use 

ng-show="httpRequestTracker.hasPendingRequests"

Keep in mind that this solution will only inform you of the presence of a pending request, but not which specific one it is (especially challenging for pages with multiple AJAX requests).

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

What steps can I take to avoid res.send() from replacing the entire document?

When making an ajax call to insert users into the database, I want to handle the response in a specific way. If I use res.send() on the server side, it displays the response at the top left of a black document, which is not ideal. I attempted to use retu ...

javascriptajaxexpress

Troubleshooting: Issues with accessing object properties in a function in AngularJS

In my controller, I have a function that checks the day and changes the isOpen property of an object based on the time. The object is retrieved using the code snippet below: $http.get('js/data.json').success(function(data) { $scope.locations = ...

javascriptangularjs

Display Angular content upon clicking

<button ng-show="color.show" ng-click="addNewColor(color); color.show=false;">Click here to add this color to your collection</button> I am currently experiencing an issue with the above code. When I click on the button, it does not disappear ...

angularjsangularjs-ng-clickangularjs-ng-show

Ways to maintain group settings for a Telerik MVC Grid connected to Ajax

Currently, I am seeking guidance on how to persist grouping settings on an Ajax bound Telerik ASP .NET MVC grid. My goal is to have the grid display revert back to its previous settings when a user navigates away to a detail screen and then returns to the ...

javascriptasp.net-mvcajaxtelerik

Implement event listeners to transcluded content in AngularJS

How can I add event handlers to transclusion content in a directive without allowing consumers to add their own click handlers? I want the directive to handle it, but I'm unsure of the correct approach for adding handlers to the content passed with ng ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-transclude

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

javascripthtmlcssshell

Verify whether the field includes a minimum number of numerical digits

I am currently using this script to validate whether a field is empty or not. The script works well for me, but I would like to add a condition that the field must contain at least 10 digits (numbers). If it doesn't meet this requirement, I want to di ...

javascriptformsvalidationerror-handling

Unable to redirect using JQuery Ajax post after receiving an ActionResult from an MVC controller

I'm trying to send data from a method to an MVC controller that gives back an action result, and then have my site automatically navigate to the correct view. Here's the code snippet I'm currently working with: function RedirectFunction(ite ...

javascriptjqueryajaxasp.net-mvc

Unable to display Vue image within v-for loop

I'm facing an issue with rendering images from an array of objects. Even though the paths to the images are correct, the images are not displaying. I've been following a tutorial at which suggests specifying the image URLs as links. I've t ...

javascriptlistvue.jsrendering

Is it possible for me to take action on and then pass along the outcomes of an AngularJS $http request without relying on $q?

I have a function called getData that retrieves data from an API endpoint. My current implementation utilizes $q to handle promises. After processing the retrieved data, I return another promise: var getData = function (controller) { var defer = $q.d ...

javascriptangularjs

Error message: `Socket.io-client - Invalid TypeError: Expected a function for socket_io_client_1.default`

I have successfully installed socket.io-client in my Angular 5.2 application, but after trying to connect (which has worked flawlessly in the past), I am encountering a strange error. TypeError: socket_io_client_1.default is not a function at new Auth ...

javascriptangulartypescriptsocket.io

Which specific html container or element can be found on the mymsn pages?

When accessing mymsn, users have the ability to personalize the content and layout of their webpage. I am curious about what type of container is being utilized for this customization - does it involve an html element, or perhaps javascript, or something e ...

javascripthtml

Ways to ensure that a function completes in an Express route

I currently have a route set up like this: app.get("/api/current_user", (req, res) => { //It takes about 3 seconds for this function to complete someObj.logOn(data => { someObj.setData(data); }); //This will return before ...

javascriptnode.jsexpress

Guide on altering the Class with jquery

Here is My jQuery Code: $('a#cusine1').on('click', function(){ $('div#product-list').html("LOADING..........").show(); $(".ccid").addClass("0"); document.getElementById("ccid1").className="acti ...

javascriptjqueryhtmlcss

Delayed execution of Ajax request

Currently watching a Youtube video that explains the Call Stack and Event loop when dealing with Async events like Ajax calls. According to the video, JavaScript execution occurs line by line. Let's try running a sample program: var xhttp = new XMLHt ...

javascriptajax

Calculating the total length of an SVG element using React

Looking to animate an SVG path using React (similar to how it's done in traditional JavaScript: https://css-tricks.com/svg-line-animation-works/), but struggling when the path is created using JSX. How can I find the total length of the path in this s ...

javascriptreactjssvgcss-animations

Capture an image of the element

Hi there, I'm currently attempting to use PhantomJS to capture a screenshot of a specific element. I'm utilizing the PhantomJS bridge for Node.js: phantom Here's what I have so far: page.includeJs('http://ajax.googleapis.com/ajax/libs ...

javascriptjquerynode.jsphantomjs

Arranging an array in reverse order (starting with underscore) can alter the attributes of the objects within

REVISION: To provide more clarity on the issue, I have recorded a bug using quicktime. Here is the link for your reference: For additional code details, please visit: ORIGINAL INQUIRY: A strange issue has come up while working with Meteor and its depen ...

javascriptarrayssortingmeteorunderscore.js

What is the best way to create a repetitive pattern using a for loop in Javascript?

I want to create a repeating pattern to color the background, but once i exceeds colors.length, the background color stops changing because, for example, colors[3] does not exist. I need colors[i] to start back at 0 until the first loop is complete. cons ...

javascriptarrays

Creating Child Components Dynamically using String Names in ReactJS

I've encountered an issue with dynamically rendering React Components within my DashboardInterface component. I have an array filled with string names of React Components, retrieved through an external mechanism. The goal is to render these Components ...

javascriptreactjs