Having some trouble with minification and AngularJS ;-(
I found this jsfiddle "loading" extender for HTTP request, through the AngularJS Wiki page.
It worked great until i published it, and the minification destroys it. I can't find a way to use "inject" on the config, so im kinda lost about what to do.
Original code:
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);
});
};
});
Minified code:
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)
})
}
});
Which throws the following error: Error: Unknown provider: a from app.services
Use inline annotation for defining providers:
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);
}
]
);
And, btw, you should reconsider using jQuery calls inside your configs and factories. Direct DOM manipulation should be handled inside the directives.
For your case, instead of $("#loader").show();
and $("#loader").show();
you should broadcast an event (e.g. $rootScope.$broadcast('loader_show')
), and then listen for that event in your custom 'spinner' directive:
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();
});
};
}
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With