HTTP Kérések (AJAX) és a $http Szolgáltatás – AngularJS-ben

Az AngularJS $http szolgáltatása lehetővé teszi, hogy HTTP kéréseket küldjünk a szervernek. Ez magában foglalja:

·       Adatok lekérését (GET)

·       Adatok küldését (POST)

·       Adatok módosítását (PUT)

·       Adatok törlését (DELETE)

Az $http egy promise-t ad vissza, amelyet .then() és .catch() vagy success() / error() segítségével kezelhetünk.

Első lépésként JSON fájlból olvasunk be adatokat, amelyet a lokális gépünkre mentünk.

Ismétlés: Mi az JSON? Mit jelent? More jó? Miért jó?

Hozz létre egy mappát, a mai napi dátummal. A mappán belül egy product.json kiterjesztésű fájlt.

Tartalomnak másold be:

[

  { "id": 1, "name": "Laptop", "price": 299999 },

  { "id": 2, "name": "Egér", "price": 4999 },

  { "id": 3, "name": "Billentyűzet", "price": 9999 }

]

HTML és AngularJS kód – CRUD műveletek

Ez egy egyszerűbb verzió, amely lokálisan kezeli a JSON-adatokat. A POST, PUT, DELETE nem ment vissza a products.json-ba (mert az csak olvasható fájlként működik a kliens oldalon), de a műveletek működését szimuláljuk AngularJS segítségével. Ha vissza megyek, majd össze kötjük adatbázissal, ahová menteni is tudtok.

Hozzatok létre egy index.html fájlt. Csatoljátok a szükséges fájlokat és direktívákat se felejtsétek el hozzá adni.

// Létrehozzuk az AngularJS alkalmazást, amit 'productApp'-nak nevezünk el

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

// Létrehozunk egy kontrollert 'ProductController' néven

// A kontroller kezeli az adatokat ($scope) és a HTTP kéréseket ($http)

app.controller('ProductController', function($scope, $http) {

    // Inicializálunk egy üres tömböt a termékek számára

    $scope.products = [];

    // Inicializálunk egy üres objektumot az új termék adatainak tárolására

    $scope.newProduct = {};

    // Termékek betöltése külső JSON fájlból (READ művelet)

    $http.get('products.json') // A fájl neve legyen ugyanabban a könyvtárban!

        .then(function(response) {

            // Ha a lekérés sikeres, betöltjük az adatokat a scope-ba

            $scope.products = response.data;

        }, function(error) {

            // Hiba esetén kiírjuk a konzolra

            console.error("Hiba történt a termékek betöltésekor:", error);

        });

 

    //  Új termék hozzáadása (CREATE művelet)

    $scope.addProduct = function() {

        // Ellenőrizzük, hogy a név és az ár mezők ki vannak-e töltve

        if (!$scope.newProduct.name || !$scope.newProduct.price) return;

        // Új azonosító generálása: a legnagyobb meglévő ID + 1

        let newId = ($scope.products.length > 0)

            ? Math.max(...$scope.products.map(p => p.id)) + 1

            : 1;

        // Új termék objektum létrehozása a megadott adatokkal

        let newProd = {

            id: newId,

            name: $scope.newProduct.name,

            price: $scope.newProduct.price

        };

        // Az új termék hozzáadása a products tömbhöz

        $scope.products.push(newProd);

        // Az űrlap mezőinek ürítése az új termék hozzáadása után

        $scope.newProduct = {};

    };

    // Termék szerkesztésének elindítása (csak a nézeten belül történik)

    $scope.editProduct = function(product) {

        // A termék 'editing' tulajdonságát true-ra állítjuk

        // Ekkor jelennek meg az input mezők

        product.editing = true;

    };

    // Szerkesztett termék mentése (UPDATE művelet)

    $scope.saveProduct = function(product) {

        // Az 'editing' tulajdonságot false-ra állítjuk,

        // így visszaváltunk megjelenítési módra

        product.editing = false;

        // Mivel ez csak frontend, a módosítás automatikusan érvényesül a tömbben

    };

    // Termék törlése (DELETE művelet)

    $scope.deleteProduct = function(id) {

        // A products tömböt újraszűrjük úgy, hogy a kiválasztott ID-t kihagyjuk

        $scope.products = $scope.products.filter(p => p.id !== id);

    };

});

Írjátok meg a html részét a meglévő javascript feladathoz. 

Töltsétek fel githubra! 

Projekt feladat: 

Készítsetek egy olyan komplett feladatot, ahol json fájlból olvastok be adatokat, kép nevet, mappából képeket, és Bootstrappel olvassátok be kártyás elrendezéssel, nagy képernyőn 3, tableten 2, mobilon egy kártya jelenjen meg.