Question

使用我的AngularJS应用程序保存新发票时，在API检查产品余额，保存数据等时需要花费一些时间，所以我想知道AngularJS中是否有一种可以像中间体一样显示的方式（页面...示例：＃/ processing）一旦用户单击Save按钮，用户就会被路由到那里，然后根据保存新发票$ http结果（失败或成功）将用户路由回到发票页面（例如＃/ new-invoice）或成功保存页面（＃/ thanks-for-ordering）？

任何例子都非常感谢。感谢

Answer 1

我正在使用微调器来处理这些事情...在http请求启动微调器并在响应时停止它。使用http拦截器。如果你不想自己实现它，下面是几个链接。

angular-spinner或angular-sham-spinner

还请阅读此BLOG详细说明微调器的工作方式

Answer 2

您可以使用ng-if在输入和保存状态之间切换。

示例模板：

<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>

控制器示例：

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 to the success page
    }).catch(function (error) {
      $scope.error = error; // show error
    }).finally(function () {
      $scope.isSaving = false;
    });
  };
})

如果您需要IE8支持，则需要将.catch替换为['catch']，将.finally替换为['finally']

Answer 3

虽然我不会使用独立的URL /路由来处理页面。您可以将保存承诺存储在服务中。

angular.module('app').value('progress', {});

angular.module('app').controller('FormCtrl', function ($scope, progress, $location) {

  $scope.saveTheThing = function(thing) {
    progress.thing = $http.post('api/things', thing);
    $location.path('/processing');
  });
});

angular.module('app').controller('ProgressingCtrl', function (progress, $location) {
   progress.thing.then(function () {
     $location.path('/thank-you');
   }, function (error) {
     $location.path('/form');
   });
});

与ng-if解决方案相比，您现在需要额外的工作：

失败时恢复表单值
将错误消息传递给FormCtrl
定义进度页面的刷新行为

AngularJS在保存时显示中间页面

3 个答案: