Question

我对Angular很陌生，但我想知道A）以下情况是否可行B）有些人会提供关于从哪里开始的文档。

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

目标：而不是将jQuery与Angular混合使用我认为使用Angular可能是更好的方法，所以我不会将两者混合在一起。我还希望能够在显示/隐藏弹出窗口的调用中定义弹出窗口中显示的文本。即。＆＃34;保存新用户...＆＃34;，＆＃34;删除用户...＆＃34;。

这在jQuery中比较直接，但是最好的练习Angular方法能够解决这种情况吗？我猜我是否要创建自定义模块？（也许？）

Answer 1

您需要$http interceptors。

另外，您可以在应用中使用angular-loading-bar模块，也可以查看github 中的代码。

Answer 2

此处遵循的一些Angular最佳实践将是：

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

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

一个value服务，它保存加载状态和消息

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

有条件地显示加载消息的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发出请求，就会拦截请求和响应。根据要求，加载状态指示器将与当前设置为加载服务中的消息的任何内容一起切换。一旦响应（成功或失败）结算，指示器将被关闭。

在这种情况下，$ 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');
  };
})

注意：您需要在所有 $ http请求之前设置Loading.message，以避免出现不准确的消息。

Demo for proof of concept

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

2 个答案:

一个value服务，它保存加载状态和消息

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

$http interceptor触发显示指令