Mi az AngularJS?
Az AngularJS az egyik legnépszerűbb JavaScript-alapú webes keret, amelyet az előtér fejlesztésénél használnak. Az egyoldalas alkalmazások (SPA) fejlesztésében használják. Az AngularJS egy nyílt forráskódú keret, amelyet főleg a Google és az egyoldalú alkalmazások fejlesztésével kapcsolatos problémák megoldásában részt vevő egyének közössége tart fenn. Ebben a témában megismerjük az AngularJS irányelveket.
Az AngularJS nem más, mint kiterjeszti a meglévő HTML-t; Ez hozzáadódik a HTML oldal címkével. Az AngularJS a HTML webhelyet jobban reagálja a felhasználói műveletekre, mivel további attribútumokat egyszerűen hozzáad. Az AngularJS legújabb stabil verziója jelenleg 1.6.x.
Az AngularJS irányelvei
Az AngularJS hatékony keret, amely támogatja a Model-View-Controller (MVC) alapú architektúrát. Alapvető funkciókkal rendelkezik, mint például a kétirányú adatmegkötés, a Vezérlő, a szolgáltatások, az irányelvek, a sablonok, az útválasztó, a szűrők, a függőségi injektálás stb.
Az irányelv az AngularJS egyik nagyon hasznos tulajdonsága. Bővíti a meglévő HTML-kódot, és lehetővé teszi a weboldalak könnyű fejlesztését új viselkedéssel, a JavaScript alapvető használatával. Ez lehetővé teszi saját egyedi címkék írását és a meglévő HTML-be való leképezését. Ez a funkcionalitás nagyobb szabadságot biztosít, és nagy rugalmasságot biztosít a fejlesztők számára az egyedi elemek webes alkalmazásokban történő létrehozása és használata során. Is kidolgozhatják saját irányelveiket is. Ebben a cikkben elsősorban az AngularJS irányelvekre összpontosítunk, és megpróbáljuk megismerni ezt az alapvető funkciót.
Az irányelvek nem csupán jelölők a HTML DOM elemeire, például attribútumnév, elemnév, CSS osztály vagy megjegyzés. Az AngularJS fordítója ezután csatolja a megadott viselkedést ehhez az elemhez. Minden irányelvnek van neve és ng- betűvel kezdődik. Minden irányelv eldöntheti, hogy használható-e a DOM elemekben. Vannak olyan meglévő irányelvek, amelyek már elérhetők az AngularJS-ben, és hasonlóképpen saját maguk is meghatározhatják.
Megvizsgáljuk három fő beépített irányelvet, amelyek az AngularJS keretet három fő részre osztják.
1. ng-app: Ez az irányelv azt mondja a fordítónak, hogy ez az AngularJS alkalmazás. Az az irányelv, ahol a DOM-ban meghatározásra kerül, az alkalmazás gyökér elemévé válik. Például
Az AngularJS JavaScript fájlként érhető el, és címkével hozzáadja a HTML-be. Az elemhez tartozó n-alkalmazás azt mondja az AngularJS-nek, hogy div az AngularJS alkalmazás gyökér eleme és tulajdonosa. Az AngularJS alkalmazás attól az elemtől indul, és bármi is legyen a AngularJS kóddal, az benne van írva.
2. ng-model: Ez az irányelv a weboldal értékét köti, leginkább a bemeneti mezőből az alkalmazás változójához. Alapvetően ez az irányelv lehetővé teszi az adatok küldését az inputból az AngularJS alkalmazáshoz, amely másutt használható. Például
Belép:
Az ng-modell irányelv a bemeneti értéket az „input” elnevezésű alkalmazásváltozóhoz köti. Ezután meglátjuk, hogyan jeleníthetjük meg ugyanazt az értéket a weboldalon a következő példában.
3. ng-bind: Ez az irányelv az AngularJS alkalmazás értékét a weboldalhoz köti. Vagyis lehetővé teszi az adatok továbbítását az alkalmazásból a HTML címkékbe. Például
Belép:
Az „ng-model” irányelv alkalmazásával az „input” alkalmazásváltozóban rögzített adatok a tag elemhez vannak kötve
az „ng-bind” használatával. Most futtathatjuk ezt az alkalmazást, és megnézhetjük, hogy az AngularJS milyen dinamikusan frissíti az oldalon megadott értéket.
Ezek mellett néhány más, az AngularJS-ben elérhető irányelv is fontos.
4. ng-repe: Ez az irányelv megismétli a HTML elemet, és objektumok tömbjében használható. Ez az irányelv nagyon hasznos olyan esetekben, mint például a tábla elemek weboldalon történő megjelenítése.
5. ng-init: Ezt az irányelvet az AngularJS alkalmazás értékeinek inicializálására használják, még mielőtt a weboldalt betöltik.
Új irányelvek létrehozása
létrehozhatunk saját egyedi irányelveinket, a meglévő elérhető AngularJS irányelvekkel együtt. Nagyon könnyű új irányelveket létrehozni, csak a JavaScript használatával. Új irányelveket hozunk létre a „. irányelv ”funkció. Például
var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));
var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));
var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));
var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));
Az Angular.module egy AngularJS függvény, amely egy modult hoz létre. Készítettünk egy egyedi irányelvnek nevezett egyedi irányelvet, amelyre a funkció meg van írva. Amikor ezt az irányelvet használjuk weboldalunkon, ez a funkció végrehajtásra kerül. Ebben az esetben ez egy visszatérő sablon, amely HTML-kódot tartalmaz.
Az elnevezési irányelv használata során a teve eset elnevezési konvencióját kell alkalmaznunk, és hivatkozásuk közben „-” elválasztott elnevezési konvenciót kell használnunk.
Négy módon hivatkozhatunk az irányelvekre,
Az elem neve
Az előző példában használt:
Tulajdonság
Osztály
Az irányelv megnevezéséhez az osztálynév használatával hozzá kell adnunk a „C” értékű korlátozott tulajdonságot, miközben azt definiáljuk.
app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));
app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));
app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));
Megjegyzés
Az irányelv hivatkozásához a megjegyzés használatához hozzá kell adnunk az „M” értékű tulajdonság korlátozását, miközben azt definiáljuk.
app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));
app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));
app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));
A tulajdonság cseréje: true kötelező, és felváltja az eredeti megjegyzést irányelvvel, különben a megjegyzés láthatatlan lenne.
Következtetés - AngularJS irányelvek
Tehát az irányelv egy nagyon hatékony szolgáltatás, amely elérhető az AngularJS-ben. Az irányelv lehetővé teszi új szintaxis bevezetését, olyanok, mint jelölők, és lehetővé teszi számunkra, hogy speciális viselkedést kössünk hozzájuk. Az AngularJS-ben léteznek olyan rendelkezésre álló irányelvek, amelyek nagyon hasznosak, meg tudjuk határozni a saját egyedi irányelveinket és felhasználhatjuk azokat. Az egyedi irányelvek nagy rugalmasságot és szabadságot tesznek lehetővé a fejlesztők számára. Az irányelvek új funkcionalitást adnak a meglévő HTML-hez innovatív stílus és funkciók segítségével.
Ajánlott cikkek
Ez egy útmutató az AngularJS irányelvekhez. Itt tárgyaljuk a három fő beépített irányelvet, amelyek az AngularJS keretet három fő részre osztják. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -
- Html verziói
- Keretek a Java-ban
- AngularJS építészet
- HTML listastílusok