AngularJs Next

 

7. HTTP Kérések (AJAX) és $http Szolgáltatás

Az AngularJS $http szolgáltatása lehetővé teszi az API-kkal való kommunikációt. Az adatok dinamikusan tölthetők be szerverről anélkül, hogy újratöltenénk az oldalt.

7.1. Példa egy JSON-adat letöltésére

Készítsünk egy vezérlőt, amely egy külső API-ról tölti le a felhasználói adatokat.

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

    <ul>

        <li ng-repeat="user in users">

            {{ user.name }} - {{ user.email }}

        </li>

    </ul>

</div>

<script>

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

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

        $http.get('https://jsonplaceholder.typicode.com/users')

            .then(function(response) {

                $scope.users = response.data;

            }, function(error) {

                console.error("Hiba történt:", error);

            });

    });

</script>

Mi történik itt?

• A $http.get() egy HTTP GET kérést küld az API felé.
• Ha sikeres, akkor az adatok bekerülnek a $scope.users változóba, és megjelennek a HTML-ben.

Miért jó?

• Dinamikusan betöltődő adatokkal dolgozhatunk.
• Valós API-kkal kommunikálhatunk.

7.2POST kérés egy API-hoz

Ha szeretnénk adatokat küldeni egy szerverre (pl. új felhasználót), használhatjuk a POST metódust.

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

    <input type="text" ng-model="user.name" placeholder="Név">

    <input type="email" ng-model="user.email" placeholder="Email">

    <button ng-click="submitUser()">Küldés</button>

</div>

<script>

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

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

        $scope.user = {};

        $scope.submitUser = function() {

            $http.post('https://jsonplaceholder.typicode.com/users', $scope.user)

                .then(function(response) {

                    alert("Sikeres beküldés!");

                    console.log(response.data);

                }, function(error) {

                    console.error("Hiba történt:", error);

                });

        };

    });

</script>

Mi történik itt?

• Az $http.post() elküldi az új felhasználó adatait a szervernek.
• Ha sikeres, a felhasználó visszajelzést kap.

Miért jó?

• Űrlapokat küldhetünk API-ra.
• Közvetlenül a backenddel kommunikálhatunk.

8. Egyéni Direktívák (Custom Directives)

Az AngularJS egyéni direktívák (custom directives) lehetővé teszik új HTML-elemek vagy attribútumok létrehozását, amelyek újrahasznosíthatók és testreszabhatók.

8.1. Egyszerű Egyéni Direktíva

Készítsünk egy egyéni direktívát, amely egy köszönő üzenetet jelenít meg.

<div ng-app="myApp">

    <greeting></greeting>

</div>

<script>

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

    app.directive('greeting', function() {

        return {

            template: "<h2>Üdvözöllek az AngularJS világában!</h2>"

        };

    });

</script>

Mi történik itt?

• A greeting egy új HTML elem lett, amely egy üdvözlő üzenetet jelenít meg.
• A template határozza meg, hogy mi jelenjen meg benne.

Miért jó?

• Újrahasználható komponenseket hozhatunk létre.
• Megkönnyíti a HTML kód strukturálását.