Mis on AngularJS?

AngularJS on üks populaarsemaid JavaScriptil põhinevaid veebiraamistikke, mida kasutatakse esiotsa arendamisel. Seda kasutatakse üheleheliste rakenduste (SPA) väljatöötamisel. AngularJS on avatud lähtekoodiga raamistik, mida hooldavad peamiselt Google ja üksikisikute kogukond, kes on seotud üheleheliste rakenduste arendamisega seotud probleemide lahendamisega. Selles teemas tutvume AngularJS direktiividega.

AngularJS pole midagi, kuid laiendab olemasolevat HTML-i; See lisatakse sildiga HTML-lehele. AngularJS muudab HTML-saidi reageerimaks kasutaja toimingutele, lisades hõlpsalt täiendavaid atribuute. AngularJS-i uusim stabiilne versioon on praeguse seisuga 1.6.x.

AngularJS direktiivid

AngularJS on tõhus raamistik, mis toetab MVC (Model-View-Controller) põhinevat arhitektuuri. See pakub põhifunktsioone, nagu kahesuunaline andmete sidumine, kontroller, teenused, direktiivid, mallid, ruuter, filtrid, sõltuvuse süstimine jne. Need kõik on peamised funktsioonid, mis töötavad koos, et muuta AngularJS efektiivseks.

Direktiiv on AngularJS-i üks väga kasulikke omadusi. See laiendab olemasolevat HTML-i ja võimaldab veebisaidi hõlpsalt JavaScripti abil uue käitumisega arendada. See võimaldab kirjutada meie enda kohandatud silte ja kaardistada need olemasolevasse HTML-i. See funktsionaalsus annab rohkem vabadust ja võimaldab arendajatel vastavalt paindlikkust veebirakendustes kohandatud elementide loomisel ja kasutamisel. Samuti saavad nad välja töötada oma direktiivid. Selles artiklis keskendume peamiselt AngularJS direktiividele ja proovime saada selle põhifunktsiooni kohta teadmisi.

Direktiivid pole muud kui HTML-i DOM-i elementide markerid, näiteks atribuudi nimi, elemendi nimi, CSS-klass või kommentaar. Seejärel lisab AngularJS-i kompilaator sellele elemendile määratud käitumise. Igal direktiivil on nimi ja see algab tähega “ng-”. Iga direktiiv võib otsustada, kus seda saab DOM-i elementides kasutada. Mõned olemasolevad direktiivid on juba AngularJS-is saadaval ja sarnaselt saame neid määratleda iseseisvalt.

Vaatame kolme peamist sisseehitatud direktiivi, mis jagavad AngularJSi raamistiku kolmeks suureks osaks.

1. ng-app: see direktiiv ütleb kompilaatorile, et see on AngularJS rakendus. Direktiiv, kus see on DOM-is määratletud, saab rakenduse juurelemendiks. Nt



AngularJS on saadaval JavaScripti failina ja lisatakse HTML-i kasutades silti. Elemendi ng-rakendus ütleb AngularJS-ile, et div on juur-element ja AngularJS-i rakenduse omanik. AngularJS rakendus käivitub sellest elemendist ja mis iganes on AngularJS kood, kirjutatakse selle sisse.

2. ng-mudel: see direktiiv seob veebilehe väärtuse, enamasti sisendväljalt rakenduse muutujale. Põhimõtteliselt võimaldab see direktiiv saata andmeid sisendist AngularJS-i rakendusse, mida saab kasutada mujal. Nt

Sisenema:

Ng-mudeli direktiiv seob sisendi väärtuse rakenduse muutujaga, mille nimi on “input”. Seejärel näeme, kuidas saame järgmises näites sama väärtust veebilehel kuvada.

3. ng-bind: see direktiiv seob väärtuse AngularJS-i rakendusest veebilehele. st see võimaldab edastada andmeid rakendusest HTML-siltidesse. Nt

Sisenema:

Andmed, mille jäädvustasime direktiivi ng-mudeli abil rakendusmuudatuses „input“, on seotud sildielemendiga

kasutades “ng-bind”. Saame seda rakendust nüüd käivitada ja vaadata, kui dünaamiliselt AngularJS värskendab sisestatud väärtust lehel.

Lisaks nendele on AngularJSis saadaval ka mõned muud direktiivid, mis on olulised.

4. ng-korrata: see direktiiv kordab HTML-i elementi ja seda kasutatakse objektide massiivil. See direktiiv on väga kasulik sellistes stsenaariumides nagu tabeli elementide kuvamine veebilehel.

5. ng-init: seda käsku kasutatakse rakenduse AngularJS väärtuste lähtestamiseks enne veebilehe laadimist.

Uute direktiivide loomine

saame luua oma kohandatud direktiivid koos olemasolevate saadaolevate AngularJS direktiividega. Ainult JavaScripti kasutades on väga lihtne luua uusi direktiive. Uute direktiivide loomiseks kasutatakse „. direktiiv ”funktsiooni. Nt



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

Angular.module on AngularJS funktsioon, mis loob mooduli. Oleme loonud kohandatud direktiivi, mille nimi on kohandatud direktiiv, mille jaoks funktsioon on kirjutatud. Kui kasutame seda direktiivi oma veebilehel, siis see funktsioon käivitatakse. Sel juhul on tegemist tagastatava malliga, mis sisaldab HTML-koodi.

Nimedirektiivi nimetamisel peame kasutama kaameli juhtumi nimetamise tava ja sellele tuginedes kasutama eraldatud nimetamisviisi “-”.

Direktiive saab kasutada neljal viisil,

Elemendi nimi

Nagu kasutatud viimases näites:

Atribuut

Klass

Direktiivi kutsumiseks klassi nime abil peame selle määratlemisel lisama piiratud väärtusega 'C'.

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

Kommenteeri

Kommentaari abil direktiivi kutsumiseks peame selle määratlemisel lisama piiratud väärtusega M väärtuse.

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

Asenda omadus: tõene on kohustuslik ja see asendab algse kommentaari direktiiviga, vastasel juhul oleks kommentaar nähtamatu.

Järeldus - NurgaJS direktiivid

Niisiis, direktiiv on AngularJS-is saadaval väga võimas funktsioon. Direktiiv lubab kasutusele võtta uue süntaksi, on nagu markerid ja võimaldab meil kinnitada neile erilist käitumist. AngularJS-is on olemas olemasolevad direktiivid, mis on väga kasulikud, samuti saame määratleda oma kohandatud direktiivid ja neid kasutada. Kohandatud direktiivid võimaldavad arendajatel suurt paindlikkust ja vabadust. Direktiivid lisavad olemasolevasse HTML-i uuendusliku stiili ja funktsioonidega uue funktsionaalsuse.

Soovitatavad artiklid

See on juhend AngularJS direktiividele. Siin käsitleme kolme peamist sisseehitatud direktiivi, mis jagavad AngularJSi raamistiku kolmeks suureks osaks. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -

  1. HTML-i versioonid
  2. Raamid Java
  3. AngularJS arhitektuur
  4. HTML-i loendistiilid

Kategooria:

Tarkvaraarendus