Service-Ergebnisse veränderen mit Decorators

Problem

Du benutzt ein externes Modul und möchtest das Ergebnis eines Services mit Decorators 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, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst du die Fragen stellen, die du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie dir beantworten.

• ✔ Öffentliche Termine verfügbar
• ✔ Vor Ort, als auch Remote
• ✔ Deutsch/Englisch möglich

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