AngularJS – Factory. Tym razem omówię obiekt jakim jest service, który podobnie jak fabryki możemy wstrzykiwać do innych komponentów, dzięki czemu nasza aplikacja staje się modularna.
Trochę teorii
Service to obiekt będący wzorcem singleton. Znaczy to tyle, że w tworzonej aplikacji istnieje tylko jedna instancja takiego obiektu, a przy próbie utworzenia nowego zwracana jest referencja do już istniejącego. Służy do przechowywania funkcji, które możemy wstrzyknąć i wykorzystać np. w kontrolerze. Podobnie jak przy fabrykach również i tutaj mamy możliwość wstrzykiwania zależności.
Przykładowa aplikacja
<!DOCTYPE html>
<html lang="pl" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AngularJS #</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
.panel-default {
margin-top: 2em;
padding: 1em;
}
</style>
</head>
<body ng-controller="appCtrl">
<h1 class="text-center">{{title}}</h1>
<div class="row">
<div class="col-md-4 col-md-offset-4 panel panel-default">
<p class="text-center">
<strong>Name: </strong>{{car.name}}
</p>
<p class="text-center">
<strong>Model: </strong>{{car.model}}
</p>
<p class="text-center">
<strong>Year: </strong>{{car.year}}
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.value("title", "Car");
app.service('car', function (title) {
this.create = function () {
return {
name: "Fiat",
model: "126p",
year: "2018"
}
}
this.title = function () {
return title;
}
});
app.controller("appCtrl", function ($scope, car) {
$scope.car = car.create();
$scope.title = car.title();
})
</script>
</body>
</html>
To prosta aplikacja, której zadaniem będzie odczytanie z serwisu obiektu Car i wyświetlenie otrzymanych danych na ekranie przeglądarki. Podobnie jak w poprzednim wpisie AngularJS – Factory tworzymy ten sam wygląd css oraz html zmieniając jedynie wyświetlane dane. Tym razem będziemy wyświetlić: markę, model i rok produkcji pojazdu. Stworzony przez nas serwis będzie dodatkowo zawierał wstrzykniętą wartość title, w celu pokazania w jaki sposób możemy „injectować” zależności w serwisach.
Jak możemy zobaczyć w kodzie powyżej na samym początku kodu JSowego, tworzymy moduł aplikacji AngularJS.
Następnym naszym krokiem, jest utworzenie obiektu title, będącego tytułem naszej strony, który będzie wstrzykiwany do serwisu.
Kolejnym krokiem jest utworzenie serwisu. Tworząc service o nazwie car w funkcji wstrzyknęliśmy wcześniej utworzony obiekt title. Jak już wcześniej wspominałem, tego typu komponent przechowuje funkcję. Zadaniem pierwszej funkcji jest zwrócenie obiektu Car z wypełnionymi trzema polami. Kolejna funkcja zwraca tytuł, który jest wykorzystany do wyświetlenia nagłówka strony.
Na koniec pozostaje nam utworzenie kontrolera z wstrzykniętym serwisem i przypisanie funkcji do pól obiektu $scope.
Efekt działania aplikacji
Podsumowanie
Tym razem przedstawiłem sposób tworzenia serwisów, których zadaniem jest przechowywanie funkcji. Tworząc swoją pracę inżynierską, serwisy wykorzystałem do utworzenia zapytań do serwera, dzięki czemu do każdego kontrolera wstrzykiwałem jeden i ten sam obiekt (serwis jest singletonem) api. Myślę, że przykład z mojej pracy inżynierskiej pokazuje jak proste i logiczne staje się tworzenie aplikacji dzięki temu rozwiązaniu.
One thought on “AngularJS – Service”