Inhaltsverzeichnis


Nichts verpassen?

angularjs services decorator | Sascha Brink | 1 Minute

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

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 = {};
    ['log','info','warn','error','debug'].forEach(function(level) {
      logger[level] = function(message) {
        $delegate[level]('[' + level.toUpperCase() + '] ' + message);
      };
    });
    return logger;
  });
})
Sascha Brink

Sascha Brink

Sascha betreut regelmäßig Angular-Projekte und unterstützt Firmen bei der Ausbildung ihrer Mitarbeiter. Im Jahr 2013 hat er die Platform AngularJS.DE gestartet um das Framework in Deutschland bekannter zu machen. Sascha gibt Angular- und JavaScript-Schulungen auf deutsch und englisch.