AngularJS - Factory - Bugajsky Blog

Podziel się ze znajomymi

Omówię dziś sposób działania factory w AngularJS. W poprzednim wpisie cyklu przedstawiłem metody wstrzykiwania, można przeczytać ten wpis pod linkiem AngularJS – wstrzykiwanie zależności. Jednym z elementów, które możemy wstrzykiwać np. do kontrolera są fabryki, o których dziś będzie mowa.

Trochę teorii

W AngularJS fabryka jest funkcją odpowiedzialną za tworzenie obiektu i jego zwracanie. Do fabryk można wstrzykiwać inne zależności i dzieje się to w sposób omówiony we wcześniejszym wpisie, który został podlinkowany na początku. Factory tworzy obiekt raz, w chwili gdy kontroler czy serwis wymaga zwracanego przez fabrykę obiektu. Po jego utworzeniu jest dostępny dla pozostałych komponentów, w których jest wstrzyknięty.

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 #5</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">Show person</h1>

    <div class="row">
        <div class="col-md-4 col-md-offset-4 panel panel-default">
            <p class="text-center">
                <strong>Name: </strong>{{person.name}}
            </p>
            <p class="text-center">
                <strong>Surname: </strong>{{person.surname}}
            </p>
            <p class="text-center">
                <strong>Age: </strong>{{person.age}}
            </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.factory('factoryPerson', function () {
            return {
                name: "Adam",
                surname: "Kowalski",
                age: 18
            }
        })

        app.controller("appCtrl", function ($scope, factoryPerson) {
            $scope.person = factoryPerson;
        })
    </script>
</body>

</html>

Zadaniem aplikacji jest wyświetlenie obiektu zwróconego przez fabrykę na stronie. Zwracany jest obiekt z trzema polami name, surname i age.

Dodatkowo jak możemy zaobserwować ostylowałem CSSem klasę panel-default, aby lepiej wyglądała gotowa strona. Kod CSS możemy znaleźć w nagłówku head zawarty w znaczniku style.

Na stronie wyświetlane są dane w bardzo prosty sposób. Za pomocą znacznika akapitu – p.

Przejdźmy jednak do kodu JSowego. Na samym początku deklarujemy zmienną app, będącą obiektem AngularJS. Kolejnym krokiem jest utworzenie factory, czyli funkcji zwracającej wyświetlany na stornie obiekt. Pierwszym parametrem jest nazwa fabryki, którą będziemy wykorzystywać do wstrzykiwania np. w kontrolerze. Dalsze parametry to wstrzykiwane zależności oraz funkcja, której zadaniem jest zwrócenie danych, w naszym przypadku obiektu.

Jak widzimy, w kodzie funkcja ogranicza się do wywołania return, który zwraca interesujący nas obiekt.

Ostatnim już krokiem jest utworzenie kontrolera. Poza $scope, funkcja przyjmuje również jako parametr nazwę fabryki, po której identyfikuje funkcję zwracającą dane. Zwracane dane są zachowywane w $scope.person.

Przykład wstrzykiwania zależności do factory

Kiedy chcemy, aby fabryka miała np. wstrzykniętą wartość (będzie o tym w jednym z kolejnych wpisów, na razie wystarczy nam wiedzieć, że value to taki pojemnik z daną) to działamy w podobny sposób jak przy wstrzykiwaniu zależności do kontrolera.

app.value('name', 'Krystian');

app.factory('factoryPerson', ['name', function (name) {
    return {
        name: name,
        surname: "Kowalski",
        age: 18
    }
}]);

Jak możemy zobaczyć, w powyższym kodzie tworzymy obiekt value. Jako parametr factory podajemy jego nazwę. Później nazwę parametru przypisujemy w obiekcie do atrybutu name.

Efekt działania aplikacji

Podsumowanie

Przedstawiłem, w jaki sposób działają i jak tworzy się fabryki – factory. To tylko jeden z możliwych elementów jakie możemy wstrzykiwać. Warto korzystać z tych rozwiązań, ponieważ dzięki temu kod staje się bardziej modularny i prościej w nim wprowadzać poprawki. Wiadomo przecież, że lepiej w jednym miejscu wprowadzić korektę, niż wyszukiwać wszystkie miejsca, w których dana funkcja została stworzona i użyta.

Pozdrawiam,
sirmarbug