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..! "
);
));

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..! "
);
));

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..! "
);
));

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 -

  1. Html verziói
  2. Keretek a Java-ban
  3. AngularJS építészet
  4. HTML listastílusok

Kategória:

Szoftverfejlesztés