Reputation: 6810
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
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