13

ミニフィケーションとAngularJSに問題があります;-(

AngularJS Wikiページから、HTTPリクエスト用のこのjsfiddle 「ロード」エクステンダーを見つけました。

公開するまではうまく機能し、縮小すると破壊されました。構成で「注入」を使用する方法が見つからないため、何をすべきか迷っています。

元のコード:

angular.module("app.services", []).config(function($httpProvider) {
  var spinnerFunction;
  $httpProvider.responseInterceptors.push("myHttpInterceptor");
  spinnerFunction = function(data, headersGetter) {
    $("#loader").show();
    return data;
  };
  return $httpProvider.defaults.transformRequest.push(spinnerFunction);
}).factory("myHttpInterceptor", function($q, $window) {
  return function(promise) {
    return promise.then((function(response) {
      $("#loader").hide();
      return response;
    }), function(response) {
      $("#loader").hide();
      return $q.reject(response);
    });
  };
});

縮小されたコード:

angular.module("app.services", []).config(function (a) {
    var b;
    a.responseInterceptors.push("myHttpInterceptor");
    b = function (d, c) {
        $("#loader").show();
        return d
    };
    return a.defaults.transformRequest.push(b)
}).factory("myHttpInterceptor", function (a, b) {
    return function (c) {
        return c.then((function (d) {
            $("#loader").hide();
            return d
        }), function (d) {
            $("#loader").hide();
            return a.reject(d)
        })
    }
});

次のエラーがスローされます: Error: Unknown provider: a from app.services

4

3 に答える 3

34

プロバイダーを定義するためにインライン アノテーションを使用します。

angular.module("app.services", [])
  .config(
    [
      '$httpProvider',
      'myHttpInterceptor',
      function($httpProvider, myHttpInterceptor) {
        var spinnerFunction;
        $httpProvider.responseInterceptors.push(myHttpInterceptor);
        spinnerFunction = function(data, headersGetter) {
         $("#loader").show();
         return data;
        };
        return $httpProvider.defaults.transformRequest.push(spinnerFunction);
      }
    ]
  );

ところで、config と factory 内で jQuery 呼び出しを使用することを再検討する必要があります。DOM の直接操作は、ディレクティブ内で処理する必要があります。

あなたのケースでは、代わりにイベントをブロードキャストし（例：​​）、カスタムの「スピナー」ディレクティブでそのイベントをリッスンする必要が$("#loader").show();あります。$("#loader").show();$rootScope.$broadcast('loader_show')

HTML:

<div spinner class="loader"></div>

JS:

app.directive('spinner',
    function() {
      return function ($scope, element, attrs) {
        $scope.$on('loader_show', function(){
          element.show();
        });

        $scope.$on('loader_hide', function(){
          element.hide();
        });
      };

    }

  );
于 2013-03-11T15:26:15.050 に答える
3

同じ状況の他の人のために... @Stewie のアドバイスに従い、代わりにこれを作成しました。これは、AngularJS コードのみを使用し、愚かな jQuery 依存関係はありません;-)

サービス：

app.config([
  "$httpProvider", function($httpProvider) {
    var spinnerFunction;
    $httpProvider.responseInterceptors.push("myHttpInterceptor");
    spinnerFunction = function(data, headersGetter) {
      return data;
    };
    return $httpProvider.defaults.transformRequest.push(spinnerFunction);
  }
]).factory("myHttpInterceptor", [
  "$q", "$window", "$rootScope", function($q, $window, $rootScope) {
    return function(promise) {
      $rootScope.$broadcast("loader_show");
      return promise.then((function(response) {
        $rootScope.$broadcast("loader_hide");
        return response;
      }), function(response) {
        $rootScope.$broadcast("loader_hide");
        $rootScope.network_error = true;
        return $q.reject(response);
      });
    };
  }
]);

指令

app.directive("spinner", function() {
  return function($scope, element, attrs) {
    $scope.$on("loader_show", function() {
      return element.removeClass("hide");
    });
    return $scope.$on("loader_hide", function() {
      return element.addClass("hide");
    });
  };
});
于 2013-03-11T17:06:40.817 に答える
3

奇妙に思えるかもしれませんが、実際.push()に依存関係を注入$qするインライン アノテーションを使用することもできます。$windowつまり、function()$httpProvider.responseInterceptorsをプッシュする代わりに、配列をプッシュします。

app.config(["$httpProvider", function($httpProvider) {
    $httpProvider.responseInterceptors.push(['$q', '$window', function($q, $window) {
        return function(promise) {
            return promise.then(function(response) {
                    $("#loader").hide();
                    return response;
                },
                function(response) {
                    $("#loader").hide();
                    return $q.reject(response);
                });
        };
    }]);
}]);
于 2015-06-18T09:19:33.597 に答える