我是pretty新角，但我想知道，如果A）以下情况是可能的和B）一些导致文档在哪里开始。

I'm pretty new to Angular but I'd like to know if A) the following scenario is possible and B) some leads to documentation on where to get started.

场景：目前在我的应用程序MEAN有一个载入中...那是的jQuery控制和$ http请求的开始褪和$ HTTP请求后淡出弹出成功。

The scenario: Currently in my MEAN app there's a 'loading...' popup that's controlled by jQuery and is faded in at the start of $http requests and faded out after the $http request is successful.

目标：，而不是与角混合jQuery的我觉得可能有一个更好的办法只用角，所以我不是这两个混合在一起做。我还希望能够定义时显示在弹出从调用中的文本显示/隐藏弹出。 IE浏览器。 保存新用户...，删除用户...。

The goal: Rather than mixing jQuery in with Angular I think there's probably a better way to do it using just Angular so I'm not mixing the two together. I'd also like to be able to define the text that's displayed in the popup from within the call to show/hide the popup. ie. "Saving new user...", "Deleting user...".

这是相对简单的jQuery的，但什么是最好的做法角的方法来处理这​​个情况呢？我猜我想创建一个自定义模块？ （也许？）

This is relatively straight forward in jQuery but what's the best-practise Angular-method to approach this situation? I'm guessing I'd create a custom module? (maybe?)

推荐答案

在这里遵循几个角的最佳做法是：

A few Angular best practices to follow here would be:

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

A solution which follows these criteria might include...

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

指令其有条件地显示加载消息

JS：

A directive which conditionally displays the loading message

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拦截触发指令显示

An $http interceptor to trigger displaying of the directive

.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制成使用这些组件，请求和响应将被截获。根据要求，装载状态指示器将沿着与任何当前被设置为在加载服务的消息切换。一旦响应（成功或失败）结算时，该指标将被关闭。

Using these components in this configuration, whenever a request is made via $http, requests and responses will be intercepted. On request, the loading status indicator will toggled along with whatever is currently set as the message in the loading service. Once a response (success or failure) resolves, the indicator will be switched off.

这是$ http请求的一个例子就是看一下这个，在这种情况下，控制器：

An example of an $http request would look look this, from a controller in this case:

.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 previous设置的所有的$ HTTP请求，以避免不准确的消息出现。

Note: you would need to set Loading.message previous to all $http requests to avoid having inaccurate messages appear.

演示了概念证明