`How can I display a view before an ajax request finishes in AngularJS?`

Question

`How can I display a view before an ajax request finishes in AngularJS?`

I am currently developing an iOS app using the Ionic framework with AngularJS. In my app, I have implemented the following routing example:

.state('app.friends', {
                        url: '/friends',
                        cache: false,
                        requireLogin: true,
                        views: {
                            'menuContent': {
                                templateUrl: 'templates/friends.html',
                                controller: 'friendsCtrl'
                            }
                        }
                    })

When loading the template friends.html, its corresponding controller is friendsCtrl. Within friendsCtrl, there is an Ajax function that calls an API to retrieve a list of friends in JSON format. The issue I am facing is that the template does not load in the view until the Ajax call is completed. Sometimes, especially with large data on the API, this process can take a long time. Therefore, I would like to display an empty view until the Ajax call is finished. While there are solutions available for completing the Ajax call before rendering the view, I specifically need guidance on how to render the view before the Ajax call completes. Any suggestions on how to achieve this would be greatly appreciated.

Thank you

javascript ios angularjs ajax ionic-framework

Answer 1

Answer №1

To accomplish this, you have a couple of options. One way is to utilize the deferred object ($q) as shown in https://docs.angularjs.org/api/ng/service/$q

Another approach is to delay the loading process by using a timeout function ($timeout) - refer to https://docs.angularjs.org/api/ng/service/$timeout

EDIT

someFunc () {
    $scope.somevar = {};
    $http.get('url').then(
        function(response){
            $scope.someVar = response.data;
        });
    return $scope.somevar;      // returns {}
}

======================================

    someFunc () {
        var deferred = $q.defer();
        $http.get('url').then(
            function(response){
                $scope.someVar = response.data;
                deferred.resolve();
            });
        return deferred.promise;    // return a promise to set someVar
    }

    var $scope.somevar = {};
    someFunc().then(
        function() {
            console.log("somevar is set");
        });

Answer 2

To accomplish this, you have a couple of options. One way is to utilize the deferred object ($q) as shown in https://docs.angularjs.org/api/ng/service/$q

Another approach is to delay the loading process by using a timeout function ($timeout) - refer to https://docs.angularjs.org/api/ng/service/$timeout

EDIT

someFunc () {
    $scope.somevar = {};
    $http.get('url').then(
        function(response){
            $scope.someVar = response.data;
        });
    return $scope.somevar;      // returns {}
}

======================================

    someFunc () {
        var deferred = $q.defer();
        $http.get('url').then(
            function(response){
                $scope.someVar = response.data;
                deferred.resolve();
            });
        return deferred.promise;    // return a promise to set someVar
    }

    var $scope.somevar = {};
    someFunc().then(
        function() {
            console.log("somevar is set");
        });

`How can I display a view before an ajax request finishes in AngularJS?`

Answer №1

Similar questions

What is preventing the value from changing in auth.guard?

React TypeScript - creating a component with a defined interface and extra properties

Beginning your journey with Mock server and Grunt

Leverage TypeScript Enum along with PropTypes to declare the properties of a React component

What is the best way to conceal the dt tag when the dd tag contains no value

Recognize when the DOM undergoes modifications

When utilizing $resource, Protractor experiences a timeout while trying to synchronize with the page

Combining arrays using JavaScript

Guide to sorting by two parameters in Angular

What is the best way to incorporate next and previous buttons into a jQuery slider using JavaScript?

javascript to retrieve data by reducing

Is there a way to organize this array based on the group score?

Accessing UI elements from another class is a common task for developers

Ways to Retrieve the cell's imageView in the didSelectRowAtindexPath: Method

iOS UITableView editable mode icons in the form of checkmarks and circles in SVG format

Is Ajax failing to trigger?

“How can controllers from multiple modules be integrated into the markup using angular syntax?”

Error: The function `this.xhr_.upload.addEventListener` is not supported in Firebase Storage

Tips on adding a close button for a Modal View Form Sheet

Send the response from Facebook to the flash callback on the external interface