Kontynuujemy temat serwisów (usług) w AngularzeJS 1. W tym artykule przyjrzymy się provider, decorator i constant. Dla przypomnienia w poprzednim artykule omówione zostały: factory, service, value, które z pewnością będą najczęściej wykorzystywane. Ważne, żeby najpierw zapoznać się z wcześniejszym tekstem ponieważ w przypadku dekoratora pracował będę na opisanej poprzednio usłudze service.

Provider

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: ???”.

Constant

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']);

Decorator

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

angularJS provider decorator constant

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij