Wartość vs Stała (Value vs Constant)

W tym rozdziale poświęcimy chwilę aby napisać kilka słów o bardzo prostych rozwiązaniach jakimi są: Wartość (Value) i Stała (Constant). Są one do siebie podobne w użyciu i na pierwszy rzut oka mogłoby się wydawać, że się duplikują. Tak jednak nie jest. Postaramy się pokazać na czym polegają ich różnice.

Wartość (Value)

Wartości należą do kategorii usług i służą do przechowywania prostych rozwiązań, które możemy wstrzykiwać do innych usług, bądź też kontrolerów. Ze względu na to, że value jest usługą, nie można jej bezpośrednio używać w fazie konfigurowania aplikacji, czyli w funkcji config (można ewentualnie zrobić coś na zasadzie hybrydy poprzez użycie dekoratora, ale według nas nie jest to najlepszy pomysł - napiszemy o tym osobny rozdział w przyszłości).

Wracając do sedna należy podkreślić, że value może być zdefiniowana za pomocą wielu różnych typów danych, takich jak string, number, date time, array lub obiekt czy nawet funkcja.

Istotną cechą value jest to, że możemy ją wielokrotnie zmieniać w ramach jej cyklu życia. Dzięki temu możemy ją wykorzystać na przykład do przedstawienia poziomu posiadanej przez użykownika wiedzy (basic, advanced, expert), na podstawie odwiedzonych przez niego kolejnych stanów w naszej aplikacji. Każdy taki stan będzie zawierał cenne informacje, po przeczytaniu których value zostanie ustawiona na wyższy poziom (np. z basic na advanced lub z advanced na expert). Stwórzmy więc teraz value o nazwie knowledgeLevel i zainicjujmy ją obiektem z własnością level:

angular.module('Appa').value('knowledgeLevel', {"level" : "basic"});

Wstrzykniemy tą wartość do naszego kontrolera obsługującego widok na kolejnej stronie (w kolejnym stanie aplikacji), gdzie po wykonaniu potwierdzenia przez użytkownika faktu przeczytania wszystkich informacji ustawiamy knowledgeLevel jako advanced.

angular.module('Appa').controller('InformationCtrl', [ 'knowledgeLevel', function(knowledgeLevel) {

    //możemy dla przykładu założyć, że nasłuchujemy na kliknięcie checkboxa Potwierdzam i wykonujemy wtedy akcję:
    knowledgeLevel.level = "advanced";
} ]);

Odczytując knowledgeLevel w kolejnym kroku (np. po wstrzyknięciu do kolejnego kontrolera) własność level będzie ustawiona jako advanced. W podobny sposób możemy zmienić ją na poziom expert, co jest naszym warunkiem stwierdzającym osiągnięcie przez użytkownika wymaganego stanu wiedzy (w ten sposób możemy pozwolić użytkownikowi na przejście do specjalnego działu przeznaczonego tylko dla expertów).

Dlaczego użyliśmy obiektu zamiast ustawić knowledgeLevel jako string 'basic'? Powodem takiego podejścia jest to, że chcieliśmy aby nasza zmieniona wartość była zachowana między kontrolerami, a stosując obiekt mamy to zagwarantowane poprzez utrzymanie referencji do tego obiektu. Używając typów prostych zmieniamy wartość tylko w ramach bieżącego kontrolera.

Stała (Constant)

Constant to kolejne rozwiązanie AngularJS, które często jest łączone z usługami. Trzeba jednak pamiętać, że constant usługą nie jest i skoro nią nie jest - może być używana w fazie konfigurowania aplikacji w funkcji config. Jest to coś co odróżnia ją od typu value. Kolejną różnicą jest to, że w przeciwieństwie do value, constant nie może być zmieniana w trakcie swojego istnienia w aplikacji. Raz zdefiniowana pozostaje w niezmienionej formie do końca jej funkcjonowania.

Ze względy na swoje własności stała przydaje się do określania ustawień istotnych dla całej aplikacji. Na przykład możemy ją wykorzystać do ustawienia adresu URL, pod którym znajduje się warstwa backendowa aplikacji:

angular.module('Appa').constant('AppaConf', {
    confUrl : 'http://localhost:8080/startappa'
});

Podobnie jak to ma miejsce w przypadku value, constant może być wstrzyknięta do naszych usług lub kontrolerów.

Nasza rekomendacja

Chcielibyśmy zwrócić jeszcze raz uwagę na to co wydaje się istotne w kontekście typu Value. Zgodnie z tym co opisaliśmy w rozdziale warto zapamiętać, że ustawianie value w postaci typu prostego może sprawić nam niespodziankę, jeśli oczekujemy utrzymania stanu naszej wartości. Dlatego jeśli zależy nam na tym aby nasze zmiany były odzwierciedlane w innych miejscach aplikacji - używajmy w tym celu obiektu.

Kolejna sprawa, którą chcemy poruszyć to odpowiednie dobieranie rozwiązania do postawionego problemu. Starajmy się nie tworzyć niezliczonej ilości stałych, jeśli tak naprawdę mają one reprezentować rzeczy trywialne i związane z konkretnym kontrolerem czy dyrektywą. Nasze stałe powinny dotyczyć kluczowych ustawień całego modułu, lub nawet całej aplikacji (która zresztą - jak pamiętamy - sama w sobie też jest modułem).

Używamy w StartAPPa

Nasza aplikacja jako całość jest złożona z wielu modułów i dlatego też stosujemy w niej szereg zarówno stałych jak i zmienych wartości konfiguracyjnych. W bieżącym rozdziale podaliśmy pełne przykłady, zarówno dla value jak i constant, tak abyście również w swoich modułach mogli w łatwy sposób podpiąć i przetestować te rozwiązania. Każdy z projektów dostępnych w ramach Kursu Aplikacji Web zawiera plik główny app.js, w którym możecie na przykład umieścić stałą AppaConf i wstrzyknąć ją do dowolnej fabryki, po to by z jednego miejsca zarządzać zmianą adresu URL używanego w całym module.

Linki

https://docs.angularjs.org/guide/providers#value-recipe
https://docs.angularjs.org/guide/providers#constant-recipe
https://www.jeffryhouser.com/index.cfm/2015/12/22/Using-Values-in-AngularJS

Zapisz się do newslettera :

Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.

Polub nas na Facebooku:

Nasi partnerzy:

stackshare

Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .

Starter Jak to działa Aplikacja

Obserwuj nas Polityka Cookies Regulamin Licencja Ochrona prywatności

Pozycjonowanie stron: Grupa TENSE