Tym artykułem zaczynam przegląd frameworka AngularJS w wersji 1.6. W kolejnych częściach opisane zostaną filtry, dyrektywy, providery i dekoratory. Czym w ogóle jest AngularJS? Jest to jeden z frameworków używanych we Front-endzie, którego twórcą jest firma Google. Obecnie największym konkurentem Angulara jest ReactJS, który z kolei stworzony został przez firmę Facebook.
Frameworki narzucają programiście ścisłe ramy, po których może się poruszać. Dzięki tej „ograniczonej swobodzie” kod staje się bardziej czytelny o łatwiejszy w testowaniu. Nie będę zaczynał od podstaw jak wiązania czy podwójne nawiasy klamrowe, bo zrozumienie tego jest dosyć proste. Tutaj skupię się na drugim etapie nauki Angulara.

Serwisy (usługi) w AngularJS

Zadaniem serwisów w AngularJS jest wymiana danych pomiędzy poszczególnymi kontrolerami. Normalnie kontrolery mają dostęp tylko do własnego zakresu (scope). Gdyby nie istniała możliwość użycia serwisów podczas pisania aplikacji, a potrzebowalibyśmy tej samej zmiennej w różnych miejscach jedynym wyjściem byłaby praca na jednym kontrolerze lub osadzanie kontrolera w kontroler i użyciu $scope.$parent.zmienna, która to umożliwia operowanie na zmiennej rodzica.

Serwisy (usługi) występujące w AngularJS 1.6:

  • factory
  • service
  • value
  • provider
  • decorator
  • constant

Factory

Dla modułu AngularJS, który nazywa się 'app':

var app = angular.module('app', []);

deklaracja będzie wyglądać w następujący sposób:

app.factory('myFactory', function() {
    var myData1 = "From Factory: some data1"; //część prywatna bez dostępu z zewnątrz
    var myFunc1 = function(data) {
      console.log(data);
    }
    return {  //część publiczna
      showData: function() {
        return myFunc1(myData1);
      },
      getData: {
        retValue: "From Factory: some value1"
      }
  }
});

Kod, który znajduje się powyżej return nie jest dostępny z zewnątrz, zatem stanowi część prywatną. W return możemy zarówno przypisać zmienne jak również zadeklarować funkcję, która zwraca własną wartość. Użycie serwisu factory musi być zadeklarowane w kontrolerze:

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

Service

W przypadku serwisu service (właśnie ten zapis jest najbardziej mylący i może lepiej byłoby je określać słowem usługi) zrezygnowano z return, a wszystko co ma być zwrócone na zewnątrz musi być poprzedzone słowem kluczowym this. Przykład deklaracji service:

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.getData2 = {
      retValue2: "From Service: some value2"
    }
});

Jest to ten sam kod, który wcześniej był użyty w factory. Jego deklaracja w kontrolerze oraz późniejsze użycie również będzie wyglądało identycznie:

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

Value

Najłatwiejszy do użycia jest serwis value. Możemy w nim podać zarówno zmienną jak i tablicę lub obiekt. Przykładowa deklaracja:

app.value('user', 'admin');
app.value('colours', ['red', 'blue', 'grey']);
app.value('myObject', {
   myColour: ['red', 'blue', 'grey'],
   size: 'large'
 });

Użycie value jest identyczne z tym co znamy już z service i factory:

app.controller('MainController', function($scope, user, colours, myObject) { 
      user = "other admin";      
      console.log("From Value: " + user);
      console.log(colours[0]);
      console.log(myObject.size, myObject.myColour[2]);
});

W efekcie otrzymamy w konsoli oczekiwane wartości:

AngularJS - serwisy 1/2

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