nielsv
nielsv

Reputation: 6810

$http.post -> start (for preloader)

In my controller I now have:

$http.post('/api/agendainsert', { appointment_datetime: appointment_date + appointment_hour, profile: profile, column_id: column_id })
            .success(function(data, status, headers, config){
                $state.go('form.success');
            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
        });
    };

Is there a function that I can use when the $http.post STARTS? So I can show a preloader on my screen and hide it when the data is successful pulled.

Upvotes: 0

Views: 61

Answers (1)

Sushant
Sushant

Reputation: 1414

You will need a Service to do that. Consider creating a WaitService. WaitService will listen for two event wait:start and wait:stop.

When wait:start come you have to use a directive to inject a loading animation on your <body>. When wait:stop come then you have to remove that loading animation. You can watch for these events in $rootScope.

Now include this WaitService in your application and use like this.

$scope.$emit('wait:start'); //indicate start loading
$http.post('/api/agendainsert', { appointment_datetime: appointment_date + appointment_hour, profile: profile, column_id: column_id })
            .success(function(data, status, headers, config){
                $scope.$emit('wait:stop'); //indicate remove loading
                $state.go('form.success');
            })
            .error(function(data, status, headers, config) {
                $scope.$emit('wait:stop'); //indicate remove loading
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
        });
    }; 

Upvotes: 1

Related Questions