AngularJS Servizio valore Config vengono distrutte su minification

Question

avendo qualche problema con minimizzazione e AngularJS ;-(

Ho trovato questo extender jsfiddle "carico" per la richiesta HTTP, tramite la pagina AngularJS Wiki.

Ha funzionato alla grande . fino a quando ho pubblicato, e il minification distrugge non riesco a trovare un modo per utilizzare "iniettare" sulla configurazione, in modo im po 'perso su cosa fare

codice originale:.

codice

minified:

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) 
     }) 
    } 
}); 

che getta il seguente errore: Errore : fornitore sconosciuto: una da app.services

Answer 1

Utilizzare inline annotation per i fornitori che definiscono:

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); 
     } 
    ] 
); 

E, btw, dovresti riconsiderare l'uso delle chiamate jQuery nelle tue configurazioni e nelle tue fabbriche. La manipolazione diretta del DOM dovrebbe essere gestita all'interno delle direttive.

Per il vostro caso, invece di $("#loader").show(); e $("#loader").show(); si dovrebbe trasmettere un evento (ad esempio $rootScope.$broadcast('loader_show')), e poi ascoltare per l'evento nella vostra abitudine 'filatore' direttiva:

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(); 
     }); 
     }; 

    } 

); 

Answer 2

Solo per gli altri nella stessa situazione ... ho seguito il consiglio @Stewie s', e fatto questo, invece, WHI ch utilizza solo il codice AngularJS, non stupido jQuery dipendenza ;-)

Servizio:

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); 
     }); 
    }; 
    } 
]); 

direttiva

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"); 
    }); 
    }; 
}); 

Answer 3

Per quanto strano possa sembrare, si può anche utilizzare in linea annotazione in cui si fa l'effettivo .push() per iniettare le proprie dipendenze su $q e $window ad esempio invece di pusing a functi on() in $httpProvider.responseInterceptors si preme un array:

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); 
       }); 
     }; 
    }]); 
}]);