6. AngularJS Szolgáltatások (Services)

 Az AngularJS szolgáltatások (services) egy olyan mechanizmus, amely lehetővé teszi az adatok és üzleti logika megosztását az alkalmazás különböző részei között. A szolgáltatások újrafelhasználhatók, és a Dependency Injection segítségével könnyen beilleszthetők a vezérlőkbe és más komponensekbe.

6.1. Példa egy egyszerű szolgáltatásra

Készítsünk egy szolgáltatást, amely egy névlistát tárol, és lehetővé teszi új nevek hozzáadását.

<div ng-app="myApp" ng-controller="NameController">

    <ul>

        <li ng-repeat="name in names">{{ name }}</li>

    </ul>

    <input type="text" ng-model="newName">

    <button ng-click="addName()">Hozzáadás</button>

</div>

<script>

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

    // Szolgáltatás létrehozása

    app.service('NameService', function() {

        let names = ["Anna", "Béla", "Csaba"];

        this.getNames = function() {

            return names;

        };

        this.addName = function(name) {

            names.push(name);

        };

    });

    // Vezérlő, amely használja a szolgáltatást

    app.controller('NameController', function($scope, NameService) {

        $scope.names = NameService.getNames();

        $scope.addName = function() {

            if ($scope.newName) {

                NameService.addName($scope.newName);

                $scope.newName = "";

            }

        };

    });

</script>

Mi történik itt?

• A NameService egy listát kezel és lehetővé teszi új nevek hozzáadását.
• A vezérlő (NameController) a szolgáltatás adatait használja (getNames()) és hozzáadja az új neveket (addName()).

Miért jó?

• A szolgáltatás moduláris, és újrafelhasználható más vezérlőkben is.
• Különválasztja az adatkezelést a vezérlő logikájától.

Tömbök és adatok tárolása a service segítségével:

A service egy központi adattár, amely segít az adatok tárolásában és kezelésében.
A vezérlő csak a logikával és a megjelenítéssel foglalkozik, az adatokat a service kezeli.
Ha több controller is kell, akkor azok mind használhatják ugyanazt a service-t, nem kell duplikálni az adatokat.

app.service('GyumolcsService', function() {

    // Gyümölcsök adatai

    const fruits = [

        { id: 1, name: "Banán", fat: 0.33, fiber: 2.6, calory: 89, protein: 1.09, carbohydrate: 22.8 },

        { id: 2, name: "Alma", fat: 0.17, fiber: 1.3, calory: 52, protein: 0.26, carbohydrate: 13.8 },

        { id: 3, name: "Narancs", fat: 0.12, fiber: 2, calory: 47, protein: 0.94, carbohydrate: 11.8 }

    ];

    // Szöveges tartalom

    const szovegek = {

        bevezeto: "A népnyelv és a konyhaművészet általában gyümölcsnek nevezi a növények édes és húsos termését, mint a szilva, alma, dió vagy narancs.",

        tortenelem: "Régen az erdőben élő gyümölcsfák terméseit, mogyorót, málnát, erdei szamócát vagy a tüskés szárú szedret gyűjtögették össze...",

        tapanyagok: "A gyümölcsök többsége lédús, 80-90% víztartalmú, emiatt kalóriaértékük alacsony. Vitaminokban és ásványi anyagokban gazdagok."

    };

    // Fogalmak adatai

    const fogalmak = [

        { nev: "Kalória", leiras: "A kalória (cal) az energia mértékegysége: egy kalória egy gramm víz hőmérsékletét egy °C-kal emeli meg." },

        { nev: "Szénhidrát", leiras: "A szénhidrátok vagy tudományos néven szacharidok a növények által, fotoszintézis során termelt vegyületek..." },

        { nev: "Zsírok", leiras: "Zsírnak a köznyelv a víztaszító, könnyen kenhető anyagokat nevezi." },

        { nev: "Fehérje", leiras: "A fehérjék fontos biológiai szerepét jellemzi, hogy minden sejtben lejátszódó folyamatban részt vesznek." },

        { nev: "Rost", leiras: "Az étkezési rostok olyan növényi eredetű szénhidrátok, amelyeket az emberi szervezet nem képes megemészteni." }

    ];

    // Függvények az adatok lekérésére

    this.getGyumolcsok = function() {

        return fruits;

    }; 

    this.getSzovegek = function() {

        return szovegek;

    };

   this.getFogalmak = function() {

        return fogalmak;

    };

});

/* A vezérlő (Controller) */

app.controller('GyumolcsController', function($scope, GyumolcsService) {

    // Adatok betöltése a Service-ből

    $scope.gyumolcsok = GyumolcsService.getGyumolcsok();

    $scope.szovegek = GyumolcsService.getSzovegek();

    $scope.fogalmak = GyumolcsService.getFogalmak();