AngularJS Direktívák és Szintaxisok:
1. ng-app
- Leírás: Az AngularJS alkalmazás kezdőpontját jelöli.
- Példa:
<html ng-app="myApp"> - Használat: Meghatározza, hogy az AngularJS alkalmazás melyik HTML elem alatt indul el.
2. ng-controller
- Leírás: Az AngularJS vezérlőt hozzárendeli a HTML elemhez.
- Példa:
<body ng-controller="MyController"> - Használat: A vezérlő rendelkezésre bocsátja az
$scope-t az alatta lévő HTML elemekhez.
3. ng-model
- Leírás: Kötést biztosít az input elemek és az AngularJS
$scopeváltozói között. - Példa:
<input type="text" ng-model="user.name"> - Használat: Az input mező értékét összeköti a
$scopeegy változójával.
4. ng-if
- Leírás: Az AngularJS direktíva, amely egy kifejezés alapján dönti el, hogy az adott HTML elem megjelenjen-e.
- Példa:
<div ng-if="isVisible">Content</div> - Használat: Ha az
isVisibleváltozó igaz, adivelem megjelenik, különben el van rejtve.
5. ng-repeat
- Leírás: Az AngularJS direktíva, amely lehetővé teszi az elemek ismételt létrehozását egy tömb vagy lista alapján.
- Példa:
<li ng-repeat="item in items">{{ item }}</li> - Használat: Minden elem a
itemstömbből létrehoz egy<li>elemet.
6. ng-submit
- Leírás: Az űrlap elküldésekor végrehajtandó funkciót határozza meg.
- Példa:
<form ng-submit="submitForm()"> - Használat: Amikor az űrlapot elküldik, a
submitFormfüggvény hívódik meg.
7. ng-src
- Leírás: Biztosítja, hogy a képek forrása dinamikusan állítható be.
- Példa:
<img ng-src="{{ user.profilePicture }}"> - Használat: Az
ng-srchelyettesíti a képek URL-jét az interpolált értékkel.
8. ng-class
- Leírás: Dinamikusan alkalmaz osztályokat az elemre az AngularJS változók alapján.
- Példa:
<div ng-class="{ 'active': isActive }"></div> - Használat: Az
activeosztály alkalmazva lesz, ha azisActiveváltozó igaz.
9. ng-show
- Leírás: Az AngularJS direktíva, amely megjeleníti vagy elrejti az elemet az adott kifejezés alapján.
- Példa:
<div ng-show="isVisible">Content</div> - Használat: Ha az
isVisibleváltozó igaz, az elem látható lesz.
10. ng-hide
- Leírás: Az AngularJS direktíva, amely elrejti az elemet az adott kifejezés alapján.
- Példa:
<div ng-hide="isHidden">Content</div> - Használat: Ha az
isHiddenváltozó igaz, az elem el lesz rejtve.
11. ng-model-options
- Leírás: Beállítja az
ng-modelviselkedését, például az értékek késleltetett frissítését. - Példa:
<input type="text" ng-model="user.name" ng-model-options="{ debounce: 500 }"> - Használat: Az értékek késleltetett frissítése 500 milliszekundum után történik.
Interpoláció
{{ expression }} -AngularJS interpolációs szintaxis, amely lehetővé teszi a változók és kifejezések megjelenítését a HTML-ben.- Példa:
<p>Hello, {{ user.name }}!</p> - Használat: A
user.nameértéke beillesztésre kerül a HTML tartalmába.
Egy űrlap feldolgozásához a követekző direktívákat használhatjuk fel
ng-app="formApp": Az AngularJS alkalmazás kezdőpontját jelöli, itt indítja az AngularJS az alkalmazást.ng-controller="FormController": Az AngularJS vezérlőt hozzárendeli a<body>elemhez, így a vezérlő elérhető lesz az alatta lévő HTML elemek számára.ng-if="!formSubmitted": Az AngularJS direktíva, amely aformSubmittedváltozó értékétől függően megjeleníti vagy elrejti a HTML elemet.ng-model="formData.name": Kötést biztosít a form elemei és az AngularJS $scope objektuma között, itt aformData.name-t használja.ng-submit="submitForm()": Az űrlap elküldésekor asubmitFormfüggvény hívódik meg.ng-src="{{ submissionResult.photo }}": AngularJS direktíva, amely biztosítja, hogy a kép URL-je helyesen legyen interpolálva és megjelenítve.{{ expression }}: AngularJS interpolációs szintaxis, amely lehetővé teszi a változók és kifejezések megjelenítését a HTML-ben.
Ezek a direktívák és szintaxisok segítenek abban, hogy az AngularJS dinamikusan kezeljük a HTML tartalmat és interakciókat a felhasználói felületen.
Nincsenek megjegyzések:
Megjegyzés küldése