AngularJS 1 – przegląd serwisów: provider, decorator, constant [2/2]

Provider jest najbardziej zagmatwany spośród serwisów (usług). Budowa oraz działanie providera jest bardzo zbliżone do opisanych wcześniej factory oraz service z jednym wyjątkiem. Provider wymaga użycia $get i jako jedyny zostanie uruchomiony jeszcze przed uruchomieniem całej aplikacji. Z tego względu providery, nie są bardzo często wykorzystywane jednak czasami ich użycie będzie koniecznością.

Przykład użycia providera:

app.controller('MainController', function($scope, myProv) {
      console.log(myProv.showData());
  });

app.provider('myProv', function() {

    this.myData3 = '???';

    this.$get = function() {
        var myData3 = this.myData3;
        return {
            showData: function() {
                return "From Provider: " + myData3 + "!"
            }
        }
    };

    this.setData = function(myData3) {
        this.myData3 = myData3;
    };
});

app.config(function(myProvProvider){
    myProvProvider.setData('some data 3');
});

Deklaracja providera odbywa się podobnie jak to było w przypadku service. Nowością jest tu użycie $get oraz umieszczenie odwołania w app.config. Jak widać do nazwy providera dodany jest słowo Provider. Całość tworzy function(myProvProvider).

W tym momencie uruchamiając powyższy kod po wywołaniu: console.log( myProv.showData()); w konsoli otrzymamy „From Provider: some data 3”, chociaż początkowa deklaracja zawierała „From Provider: ???”.

Serwis (usługa) constant jest niemal identyczny z opisanym w poprzednim artykule value. Między jednym, a drugim jest tylko jedna różnica constant nie może być nadpisany przez decorator, a value może. Więcej o dekoratorach poniżej. Jeszcze tylko przykład użycia constant:

app.controller('MainController', function($scope, colours) { 
    console.log("From Constant (array): " + colours[1]);
});
app.constant('colours', ['red', 'blue', 'grey']);

Dekoratory umożliwiają korzystanie z innych serwisów Angulara i jednoczesną ich modyfikację. Pozwala to uniknąć kolejnej deklaracji w kontrolerze i często uniknąć tworzenie kolejnego service lub factory. W poniższym przykładzie najpierw standardowo deklaracja kontrolera. Następnie service, który z jednej strony ma zadeklarowane dane, a z drugiej funkcję, która wyświetla dowolny tekst na ekranie.

Ostatni w app.config( function($provide) znajduje się decorator, który korzysta z myService. Istnieją dwa sposoby na użycie decorator:

• $provide.decorator
• module.decorator

Dostęp do wybranego serwisu (np. myService w tym przypadku) uzyskujemy przy pomocy $delegate. W poniższym przykładzie dekorator działa w taki sposób, że pobiera z myService stringa, odwraca go, a następnie wywołuje funkcję showOtherData() jako parametr podając odwrócony tekst.

app.controller('MainController', function($scope, myService) {
    console.log("Data to invert: " + myService.getData2.retValue2);    
    myService.changeTxt();
});
app.service('myService', function() {
    var myData2 = "From Service: some data2"; //część prywatna bez dostępu z zewnątrz
    var myFunc2 = function(data) {
      console.log(data);
    }
    this.showData = function() { //publiczne zmienne i funkcje muszą być poprzedzone this
      return myFunc2(myData2);
    },
    this.showOtherData = function(newData) {
      return console.log(newData);
    },
    this.getData2 = {
      retValue2: "From Service: some value2"
    }
});
app.config(function($provide) {
  $provide.decorator('myService', function($delegate) {
    $delegate.changeTxt = function() {
      var temp2 = '', temp1 = $delegate.getData2.retValue2;
      for (var i=temp1.length-1; i>=0; i--)
        {
          temp2 += temp1[i];
        }
      $delegate.showOtherData(temp2);
    }
    return $delegate
  })
})

W rezultacie w konsoli otrzymujemy:

Provider, decorator, constant