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