$http加载弹出窗口的最佳实践方法

Best practice method for $http loading popup

本文关键字：最佳 方法 窗口 http 加载      更新时间：2023-09-26

我是Angular的新手，但我想知道A)以下场景是否可能，B)一些关于从哪里开始的文档。

的场景:目前在我的MEAN应用程序中有一个"loading…"的弹出窗口，它由jQuery控制，在$http请求开始时淡出，并在$http请求成功后淡出。

目标:比起把jQuery和Angular混在一起，我认为可能有一个更好的方法来做这件事，只使用Angular，所以我没有把两者混在一起。我还希望能够定义的文本显示在弹出窗口内从调用显示/隐藏弹出窗口。ie。"Saving new user…"，"Deleting user…".

这在jQuery中是相对直接的，但是最好的angular方法是什么呢?我猜我会创建一个自定义模块?(也许)

可以遵循的一些Angular最佳实践是:

  • 使用服务维护状态和共享数据
  • 为视图组件封装使用指令
  • 通过命令式脚本避免DOM操作

符合这些条件的解决方案可能包括…

保存加载状态和消息的值服务

.value('Loading', {message: '', status: false})

一个有条件地显示加载消息的指令

JS: 

.directive('loading', function(Loading){
  return {
    restrict: 'A',
    link: function(scope) {
      scope.loading = Loading;
    },
    template: '<div ng-show="loading.status">Loading: {{loading.message}} ...'
  }
})
HTML: 

<div loading></div>

一个$http拦截器来触发显示指令

.config(function($provide, $httpProvider){
  $provide.factory('myHttpInterceptor', function($q, Loading) {
    return {
      'request': function(...) { 
        Loading.status = true;
        ...
      },

      'response': function(...) {
        Loading.status = false;
        ...
      },
     'responseError': function(...) {
        Loading.status = false;
        ...
      }
    };
  });
  $httpProvider.interceptors.push('myHttpInterceptor');
})

在此配置中使用这些组件，无论何时通过$http发出请求，请求和响应都将被拦截。根据请求，加载状态指示器将与当前在加载服务中设置的消息一起切换。一旦响应(成功或失败)解决，指示器将被关闭。

一个$http请求的例子是这样的，在这种情况下，来自控制器:

.controller('MyController', function($scope, $http, Loading){
  $scope.getSomething = function(){
    Loading.message = 'getting something from server';
    $http.get('http://filltext.com/?rows=10&delay=3');
  };
})

注意:你需要设置Loading。前面的消息所有 $http请求，以避免出现不准确的消息。

概念验证的演示

你需要$http拦截器。

还有一个angular-loading-bar模块，你可以在你的应用程序中使用，或者你可以在github中查看代码。

相关文章：