Service-Ergebnisse veränderen mit Decorators

Problem

Du benutzt eine externes Modul und möchtest das Ergebnis eines Services verändern oder erweitern, ohne den Service selbst zu verändern.

Lösung

💡 Keine Lust zu lesen?

Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, damit du tiefer in die Thematik einsteigen kannst.

Mehr Informationen zur Angular-Schulung

Zur Lösung schreiben wir einen Decorator. Dieser kann Aufrufe zu Services (Provider, Factory, Service, Value) abfangen und der Ergebnis verändern. In diesem Beispiel dekorieren wir den $log-Service und stellen das aktuelle Log-Level vor die Ausgabe.

Ein Decorator kann nur in einem Config-Block initialisiert werden. Dies führt zu einigen Einschränkungen - z.B. ist es nicht möglich, andere Services zu injizieren.

Um den Decorator zu erstellen, benutzen wir den $provide-Service, welcher die Methode .decorator() enthält. In den Decorator wird automatisch der dekorierte Service als $delegate injiziert. In diesem Fall ist $delegate also $log.

Wir möchten das Verhalten unseres Log-Services nicht verändern. Deshalb erstellen wir ein neues Objekt und stellen alle Methoden bereit, die der originale $log-Service bietet.

.config(function($provide) {
  $provide.decorator('$log', function($delegate) {
    var logger = {};

[[cta:training-bottom]]

    ['log','info','warn','error','debug'].forEach(function(level) {
      logger[level] = function(message) {
        $delegate[level]('[' + level.toUpperCase() + '] ' + message);
      };
    });
    return logger;
  });
})