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

Question

我对 Angular 还很陌生，但我想知道 A)以下场景是否可能，以及 B)一些关于从哪里开始的文档。

场景: 目前，在我的 MEAN 应用程序中，有一个由 jQuery 控制的“正在加载...”弹出窗口，在 $http 请求开始时淡入，并在 $http 请求成功后淡出。

目标: 我认为可能有一种更好的方法来仅使用 Angular 来实现这一点，而不是将 jQuery 与 Angular 混合在一起，所以我不会将两者混合在一起。我还希望能够在显示/隐藏弹出窗口的调用中定义弹出窗口中显示的文本。 IE。 “正在保存新用户...”、“正在删除用户...”。

这在 jQuery 中相对简单，但是处理这种情况的最佳实践 Angular 方法是什么？我猜我会创建一个自定义模块？ (也许？)

Answer 1

这里需要遵循的一些 Angular 最佳实践是:

• 使用服务来维护状态和共享数据
• 使用指令进行 View 组件封装
• 避免通过命令式脚本编写 DOM 操作

遵循这些标准的解决方案可能包括...

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

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

A directive有条件地显示加载消息

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 interceptor触发指令的显示

.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 发出请求时，请求和响应都会被拦截。根据请求，加载状态指示器将与加载服务中当前设置的消息一起切换。一旦响应(成功或失败)解决，指示器将关闭。

在本例中，来自 Controller 的 $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.message 设置为所有 $http 请求之前，以避免出现不准确的消息。

Demo for proof of concept