AngularJS服务配置值在缩小时被销毁
在缩小和角度方面有一些问题-( 我通过AngularJS Wiki页面找到了这个HTTP请求的“加载”扩展器 在我出版它之前,它工作得很好,但缩小版却破坏了它。 我找不到在配置中使用“inject”的方法,所以我有点不知所措 原始代码:AngularJS服务配置值在缩小时被销毁,angularjs,minify,Angularjs,Minify,在缩小和角度方面有一些问题-( 我通过AngularJS Wiki页面找到了这个HTTP请求的“加载”扩展器 在我出版它之前,它工作得很好,但缩小版却破坏了它。 我找不到在配置中使用“inject”的方法,所以我有点不知所措 原始代码: angular.module("app.services", []).config(function($httpProvider) { var spinnerFunction; $httpProvider.responseInterceptors.pus
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)
})
}
});
这会引发以下错误:
错误:未知提供程序:来自应用程序的。服务用于定义提供程序:
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);
}
]
);
顺便说一句,您应该重新考虑在配置和工厂中使用jQuery调用。直接DOM操作应该在指令中处理
对于您的情况,您应该广播一个事件(例如,$rootScope.$broadcast('loader#show')
)而不是$(“#loader”).show();
,然后在自定义的“spinner”指令中侦听该事件:
HTML:
对于其他处于相同情况的人……我遵循@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");
});
};
});
看起来很奇怪,您还可以使用内联注释,在其中执行实际的
.push()
来注入对$q
和$window
的依赖项,即,不将函数()插入$httpProvider。响应interceptors
推送数组:
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);
});
};
}]);
}]);
为了澄清,它实际上被称为“内联注释”。谢谢您的建议;-)我得到了以下错误,使用您编写的代码
未捕获错误:未知提供者:myHttpInterceptorProvider我将明确尝试使用您关于广播的想法。。。我的目标是尽可能绕过jQuery,至少不要依赖它。。所以你说得对,我一定会调查的;-)关于您的“未知提供程序”错误-您需要注入您的myHttpInterceptor
,方法与我对$httpProvider
所做的相同。我将更新我的答案…实际上我认为它被称为内联括号表示法,请参见此处:
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");
});
};
});
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);
});
};
}]);
}]);