AngularJS showing intermediate page while saving -
while saving new invoice using angularjs app, there noticeable time taken while api checking products balances, saving data...etc wondering there way in angularjs can show intermediate (page...example: #/processing) users routed once user click save
button depending on save new invoice $http result (failure or success) either route user invoice page (ex. #/new-invoice) or success saving page (#/thanks-for-ordering) ?
any example highly appreciated. thanks
you can use ng-if
switch between input , saving state.
example template:
<div ng-if="issaving"><img src="spinner.gif"> saving...</div> <form ng-if="!issaving" ng-submit="savethething(thing)> <input ng-model="thing.title" type="text"/> ... </form>
example controller:
angular.module('app').controller('examplectrl', function ($scope, $location) { $scope.savethething = function(thing) { $scope.issaving = true; $http.post('api/things', thing).then(function (response) { $location.path('/things/' + response.data.id); // go success page }).catch(function (error) { $scope.error = error; // show error }).finally(function () { $scope.issaving = false; }); }; })
if need ie8 support you'll need replace .catch
['catch']
, .finally
['finally']
Comments
Post a Comment