AngularJs Start

 Mi az AngularJS?

Az AngularJS egy JavaScript alapú frontend keretrendszer, amelyet a Google fejlesztett ki. Fő célja a dinamikus weboldalak létrehozása, ahol az adatok és a felhasználói felület (UI) könnyen szinkronizálható (adatkötés, kétirányú binding).

Előnyei:

1. Kétirányú adatbinding (Two-way Data Binding)
2. MVC (Model-View-Controller) szerkezet
3. Direktívák (Directives) használata
4. Dependency Injection (Függőségkezelés)
5. SPA (Single Page Application) támogatás

1. Kétirányú adatbinding (Two-way Data Binding)

A kétirányú adatbinding azt jelenti, hogy az adat a modell (JavaScript változó) és a felhasználói felület (HTML) között automatikusan szinkronizálódik. Ha az adat megváltozik a modellben, az azonnal frissül a HTML-ben is, és fordítva: ha a felhasználó módosít egy inputmezőt, az adat azonnal frissül a háttérben.

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

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

    <p>A beírt név: {{ name }}</p>

</div>

<script>

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

    app.controller('MyController', function($scope) {

        $scope.name = "Zita";

    });

</script>

Mi történik itt?

• A ng-model="name" kötést hoz létre az inputmező és a $scope.name változó között.
• Amikor a felhasználó beír valamit az inputmezőbe, az automatikusan megjelenik a <p> elemben.

Miért hasznos?

• Nem kell manuálisan frissíteni a DOM-ot (document.getElementById() és innerHTML nélkül működik).
• Megkönnyíti a felhasználói interakciók kezelését.

2. MVC (Model-View-Controller) szerkezet

Az MVC (Model-View-Controller) egy szoftverarchitektúra, amelyet az AngularJS követ. Célja a kód logikai rétegekre bontása, hogy könnyebben karbantartható és újrafelhasználható legyen.

Komponens	Feladat
Model (Adatmodell)	Az alkalmazás adatstruktúráját tartalmazza (pl. változók, tömbök, objektumok).
View (Nézet)	A felhasználói felület, amely megjeleníti az adatokat és reagál a felhasználói eseményekre.
Controller (Vezérlő)	Az üzleti logikát kezeli, kezeli az adatokat, és kapcsolatot teremt a Model és a View között.

Példa egy egyszerű MVC-re AngularJS-ben:

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

    <p>{{ message }}</p>

</div>

 

<script>

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

    app.controller('MyController', function($scope) {

        $scope.message = "Ez egy példa az MVC-re!";

    });

</script>

Magyarázat:

• Model: $scope.message = "Ez egy példa az MVC-re!"; (a változó az adatmodell).
• View: {{ message }} a HTML-ben (ami megjeleníti az adatot).
• Controller: MyController, amely összekapcsolja az adatot a nézettel.

Miért jó?

• Elválasztja a logikát a megjelenítéstől, így a kód könnyebben kezelhető és újrafelhasználható.
• Könnyebb tesztelni az egyes komponenseket.

3. Direktívák (Directives) használata

Az AngularJS direktívák olyan speciális HTML attribútumok vagy elemek, amelyek kibővítik a HTML képességeit.

Alapvető beépített direktívák:

Direktíva	Leírás
ng-app	Az AngularJS alkalmazás kezdőpontja
ng-model	Kétirányú adatbinding egy változó és egy inputmező között
ng-controller	Egy vezérlőt rendel egy HTML elemhez
ng-repeat	Egy tömb vagy lista elemeit ismétlődően megjeleníti
ng-if	Feltételesen megjelenít egy elemet
ng-click	Egy kattintási eseményt kezel

Példa az ng-repeat direktívára:

<ul>

    <li ng-repeat="fruit in fruits">{{ fruit }}</li>

</ul>

 

<script>

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

    app.controller('ListController', function($scope) {

        $scope.fruits = ["Alma", "Körte", "Szőlő"];

    });

</script>

Mi történik itt?

• Az ng-repeat ciklusban végigmegy a tömb minden elemén, és létrehoz egy <li> elemet minden gyümölcs számára.

Miért jó?

• Dinamikusan generál elemeket, anélkül hogy kézzel írnánk meg mindegyiket.
• Egyszerűen kezelhető és karbantartható.

4. Dependency Injection (Függőségkezelés)

A Dependency Injection (DI) egy minta, amely lehetővé teszi az AngularJS számára, hogy automatikusan behelyettesítse a szükséges objektumokat és szolgáltatásokat az alkalmazás különböző részeibe.

Példa egy beépített szolgáltatás használatára:

app.controller('TimeController', function($scope, $timeout) {

    $scope.message = "Várj egy kicsit...";   

    $timeout(function() {

        $scope.message = "Eltelt 3 másodperc!";

    }, 3000);

});

Magyarázat:

• Az AngularJS felismeri, hogy $timeout egy szolgáltatás, és automatikusan beilleszti a függvénybe.
• Nem kell manuálisan létrehozni és kezelni az időzítést, az AngularJS ezt megteszi helyettünk.

Miért jó?

• Egyszerűsíti a függvények és objektumok kezelését.
• Könnyebben módosítható a kód.

5. SPA (Single Page Application) támogatás

A Single Page Application (SPA) azt jelenti, hogy az alkalmazás egy HTML oldalon fut, és a tartalom dinamikusan változik anélkül, hogy az oldal újratöltődne.

Miért jó az SPA?

• Gyorsabb és felhasználóbarátabb (nem kell folyamatosan újratölteni az oldalt).
• Kevesebb szerverterhelés (csak a szükséges adatokat tölti le).
• Jobb élmény a felhasználónak (például: Gmail, Facebook).

Példa egy alapvető AngularJS routingra (SPA alapok)

<div ng-app="myApp">

    <a href="#!home">Kezdőlap</a> |

    <a href="#!about">Rólunk</a>

    <div ng-view></div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script> 

<script>

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

    app.config(function($routeProvider) {

        $routeProvider

        .when("/home", {

            template: "<h1>Üdv a kezdőlapon!</h1>"

        })

        .when("/about", {

            template: "<h1>Rólunk oldal</h1>"

        })

        .otherwise({

            redirectTo: "/home"

        });

    });

</script>

Mi történik itt?

• A ng-view automatikusan betölti az éppen kiválasztott oldalt anélkül, hogy újratöltené az egész oldalt.

Miért jó?

• Gyorsabb és dinamikusabb weboldalak készíthetők.
• Könnyen kezelhető routing rendszer.

Első AngularJS alkalmazás

AngularJS használatához először be kell illesztenünk az AngularJS könyvtárat az oldalunkba. Ezt megtehetjük egy CDN segítségével:

<!DOCTYPE html>

<html lang="hu">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AngularJS Alapok</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

</head>

<body ng-app="myApp">

    <div ng-controller="MyController">

        <h1>Üdvözöllek, {{ name }}!</h1>

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

    </div>

    <script>

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

        app.controller('MyController', function($scope) {

            $scope.name = "Zita";

        });

    </script>

</body>

</html>

Az ng-app="myApp" az AngularJS alkalmazás kezdőpontját jelzi.

Az ng-controller="MyController" hozzárendeli a MyController vezérlőt a div elemhez.

Az ng-model="name" segítségével kötjük az input mező tartalmát a name változóhoz.

A {{ name }} kifejezés az AngularJS adatbinding-ját mutatja meg, amely dinamikusan frissül.