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

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

javascript - Using Windows Media Player as video fallback for video tag -

c# - Unity IoC Lifetime per HttpRequest for UserStore -