Dipendenza circolare di AngularJS

Question

Sto effettuando un servizio di registrazione, per estendere il servizio $ log angolare, salvando gli errori (o il debug se abilitato) in un database indexedDB. Ecco il codice:

angular.module('appLogger', ['appDatabase']) 

.service('LogServices', function($log, Database) { 

    // ... 

    this.log = function(type, message, details) { 
     var log = {}; 
     log.type = type 
     log.context = this.context; 
     log.message = message; 
     log.dateTime = moment().format('YYYY-MM-DD HH:mm:ss'); 
     log.details = details || ''; 
     $log[type.toLowerCase()](log); 

     if (type === 'ERROR' || this.logDebug) { 
      Database.logSave(log); 
     } 
    }; 

    // ... 
}) 

Questo sta funzionando nei miei servizi come previsto. Ora il problema è che non posso usare il mio logger all'interno del servizio Database, perché genera un errore di dipendenza circolare. Capisco il problema ma non ho idea di come dovrei risolverlo ... Come dovrei aggirare questo?

Grazie per l'aiuto :-)

Answer 1

Il motivo angolare si lamenta una dipendenza circolare è che ... beh ce n'è uno.
è un percorso molto pericoloso andare giù, ma se si sa cosa si sta facendo (le ultime parole famose), allora c'è una soluzione per aggirare che:

.service('LogServices', function($log, $injector) { 

    // ... 

    var Database; // Will initialize it later 

    this.log = function(type, message, details) { 
     /* Before using Database for the first time 
     * we need to inject it */ 
     if (!Database) { Database = $injector.get('Database'); } 

     var log = {}; 
     log.type = type 
     log.context = this.context; 
     log.message = message; 
     log.dateTime = moment().format('YYYY-MM-DD HH:mm:ss'); 
     log.details = details || ''; 
     $log[type.toLowerCase()](log); 

     if (type === 'ERROR' || this.logDebug) { 
      Database.logSave(log); 
     } 
    }; 

    // ... 
}) 

Sede, anche, questo short demo.

Answer 2

Vedere this answer e in particolare Misko's blog e in particolare la domanda di Pietro nei commenti, in cui viene discusso quasi lo stesso problema.

risposta di Misko è (utilizzando il codice Java)

class Database() implements DB; 
class Logger(Database db); 
class LoggingDatabase(Logger log, Database db) implements DB; 

Quindi nella vostra applicazione, è necessario

.service('Database', ...) // DO NOT inject the $log or LogServices here 

.service('LogServices', function($log) {...}) // DO NOT inject Database here 

.service('LoggingDB', function(Database, LogServices) {...}) 

Usa LoggingDB per ogni parte della vostra applicazione in cui si desidera un database che registri. (O è un registratore che utilizza il database!)

Un altro pensiero

Come è possibile che si dispone di un database sul browser? Database è un wrapper per $ http o $ risorsa o qualcosa del genere? In questo caso, sono d'accordo con ExpertSystem nella sua opzione 2): non utilizzare $ http per errori di registrazione, perché se l'errore uccide $ http? Utilizzare invece XMLHTTPRequest. Vedi here per qualche discussione.

Answer 3

Ho affrontato questo problema quando si cerca di ignorare exceptionHandler

ecco il codice in cui il problema è apparso

angular 
    .factory('$exceptionHandler', ExceptionHandler); 

function exceptionHandler($log, sweetAlert) {// here is the problem with injecting sweetAlert 
    return function myExceptionHandler(exception, cause) { 
     //logErrorsToBackend(exception, cause); 
     sweetAlert.swal('Opps...', 'An error has occurred'); 
     $log.warn(exception, cause); 
    }; 
} 

e per risolvere il problema ho usato injector

angular 
    .factory('$exceptionHandler', ExceptionHandler); 

ExceptionHandler.$inject = ['$injector']; //better for minification 

function ExceptionHandler($injector) { 
    var $log, sweetAlert, $translate;// use variables for caching 

    return function exceptionHandler(exception, cause) { 
     // Add DI here to prevent circular dependency 
     $log = $log || $injector.get('$log'); 
     sweetAlert = sweetAlert || $injector.get('sweetAlert'); 
     $translate = $translate || $injector.get('$translate'); 
     //............ 
    } 

Questo è il link per ulteriori informazioni Injecting $http results in a Circular dependency

spero che questo ti aiuti