Mikä on AngularJS?

AngularJS on yksi suosituimmista JavaScript-pohjaisista verkkokehyksistä, joita käytetään käyttöliittymien kehittämisessä. Sitä käytetään yhden sivun sovellusten (SPA) kehittämiseen. AngularJS on avoimen lähdekoodin kehys, jota ylläpitävät pääasiassa Google ja yksityishenkilöiden yhteisö, joka on mukana ratkaisemaan yhden sivun sovellusten kehittämiseen liittyviä ongelmia. Tässä aiheesta aiomme oppia AngularJS-direktiiveistä.

AngularJS ei ole mitään, mutta se laajentaa olemassa olevaa HTML: ää; Se lisätään HTML-sivulle tunnisteella. AngularJS tekee HTML-sivustosta reagoivamman käyttäjän toimiin lisäämällä ylimääräisiä määritteitä helposti. Viimeisin vakaa versio AngularJS: stä on 1.6.x nyt.

AngularJS: n direktiivit

AngularJS on tehokas kehys, joka tukee Model-View-Controller (MVC) -pohjaista arkkitehtuuria. Se tarjoaa ydinominaisuuksia, kuten kaksisuuntaisen datan sitomisen, ohjaimen, palvelut, direktiivit, mallit, reitittimen, suodattimet, riippuvuussuihkut jne. Nämä kaikki ovat tärkeimpiä ominaisuuksia, jotka toimivat yhteistyössä tehdäkseen AngularJS: n tehokkaaksi.

Direktiivi on yksi AngularJS: n erittäin hyödyllisistä ominaisuuksista. Se laajentaa olemassa olevaa HTML-koodia ja antaa mahdollisuuden kehittää verkkosivuja helposti uudella käyttäytymisellä Java-ytimen avulla. Sen avulla voidaan kirjoittaa omat mukautetut tunnisteemme ja kartoittaa ne olemassa olevaan HTML-koodiin. Tämä toiminnallisuus antaa enemmän vapautta ja antaa kehittäjille suuren joustavuuden räätälöityjen elementtien luomisessa ja käyttämisessä web-sovelluksissa vastaavasti. He voivat myös suunnitella omia direktiivejään. Tässä artikkelissa keskitymme pääasiassa AngularJS-direktiiveihin ja yritämme saada tietoa tästä ydinominaisuudesta.

Direktiivit ovat vain merkintöjä HTML-koodin DOM-elementeille, kuten määritteen nimi, elementin nimi, CSS-luokka tai kommentti. AngularJS-kääntäjä liittää sitten määritetyn käyttäytymisen kyseiseen elementtiin. Jokaisella direktiivillä on nimi ja se alkaa 'ng-'. Jokainen direktiivi voi päättää, missä sitä voidaan käyttää DOM-elementteissä. Joitakin olemassa olevia direktiivejä on jo saatavilla AngularJS: ssä, ja vastaavasti voimme määritellä itse.

Tarkastellaan kolmea tärkeintä sisäänrakennettua direktiiviä, jotka jakavat AngularJS-kehyksen kolmeen pääosaan.

1. ng-app: Tämä direktiivi kertoo kääntäjälle, että tämä on AngularJS-sovellus. Direktiivistä, jossa se on määritelty DOM: ssa, tulee sovelluksen juurielementti. Esim



AngularJS on saatavana JavaScript-tiedostona ja lisätään HTML: ään tunnisteella. Elementin ng-sovellus kertoo AngularJS: lle, että div on AngularJS-sovelluksen pääelementti ja omistaja. AngularJS-sovellus alkaa siitä elementistä ja mikä tahansa on AngularJS-koodi, kirjoitetaan sen sisälle.

2. ng-malli: Tämä direktiivi sitoo verkkosivun arvon, lähinnä syöttökentästä sovellusmuuttujaan. Pohjimmiltaan tämä direktiivi sallii tietojen lähettämisen tuloista AngularJS-sovellukseen, jota voidaan käyttää muualla. Esim

Tulla sisään:

Ng-mallidirektiivi sitoo tuloarvon sovellusmuuttujaan nimeltä “input”. Näemme sitten, kuinka voimme näyttää saman arvon verkkosivulla seuraavassa esimerkissä.

3. ng-bind: Tämä direktiivi sitoo arvon AngularJS-sovelluksesta verkkosivulle. Toisin sanoen se mahdollistaa tiedon siirtämisen sovelluksesta HTML-tunnisteisiin. Esim

Tulla sisään:

Tiedot, jotka kaapattiin käyttämällä ”ng-model” -direktiiviä sovellusmuuttujassa “input”, on sidottu tag-elementtiin

käyttämällä ”ng-bind”. Voimme ajaa tämän sovelluksen nyt ja nähdä kuinka dynaamisesti AngularJS päivittää syötetyn arvon sivulla.

Näiden lisäksi AngularJS: ssä on saatavana joitain muita direktiivejä, jotka ovat tärkeitä.

4. ng-uusinta: Tämä direktiivi toistaa HTML-elementin ja sitä käytetään objektiryhmässä. Tämä direktiivi on erittäin hyödyllinen tilanteissa, kuten taulukkoelementtien näyttäminen verkkosivulla.

5. ng-init: Tätä direktiiviä käytetään AnularJS-sovelluksen arvojen alustamiseen ennen Web-sivun lataamista.

Uusien direktiivien luominen

voimme luoda omia mukautettuja direktiivejämme olemassa olevien AngularJS-direktiivien ohella. On erittäin helppo luoda uusia direktiivejä käyttämällä vain JavaScriptiä. Uudet direktiivit luodaan käyttämällä ”. direktiivi ”-toiminto. Esim



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-toiminto, joka luo moduulin. Olemme luoneet mukautetun direktiivin nimeltä mukautettu direktiivi, jolle funktio on kirjoitettu. Aina kun käytämme tätä direktiiviä verkkosivuillamme, tämä toiminto suoritetaan. Tässä tapauksessa se on palautusmalli, joka sisältää HTML-koodin.

Nimeämisdirektiivin yhteydessä meidän on käytettävä kamelin tapausten nimeämistä koskevaa yleissopimusta, ja samalla kun sitä vedotaan, meidän on käytettävä erotettua nimeämiskäytäntöä - -.

On olemassa neljä tapaa, joilla voimme vedota direktiiveihin,

Elementin nimi

Viimeisessä esimerkissä käytettynä:

ominaisuus

luokka

Jos haluat vedota direktiiviin käyttämällä luokan nimeä, meidän on lisättävä rajoittava ominaisuus arvolla 'C' määritellessään sitä.

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

Kommentti

Jotta direktiiviä voitaisiin käyttää kommentin avulla, meidän on lisättävä rajoittava ominaisuus, jonka arvo on "M", kun määrittelemme sitä.

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

Korvaa ominaisuus: true on pakollinen ja korvaa alkuperäisen kommentin direktiivillä, muuten kommentti olisi näkymätön.

Johtopäätös - AngularJS -direktiivit

Joten, direktiivi on erittäin tehokas ominaisuus, joka on saatavana AngularJS: ssä. Direktiivi antaa mahdollisuuden ottaa käyttöön uusi syntaksi, ovat kuin merkkejä ja antaa meille mahdollisuuden kiinnittää niihin erityistä käyttäytymistä. AngularJS: ssä on olemassa olemassa olevia direktiivejä, jotka ovat erittäin hyödyllisiä, samoin kuin voimme määritellä omat mukautettujamme direktiivejä ja käyttää niitä. Mukautetut direktiivit antavat kehittäjille suuren joustavuuden ja vapauden. Direktiivit lisäävät uusia toimintoja olemassa olevaan HTML: iin innovatiivisella tyylillä ja ominaisuuksilla.

Suositellut artikkelit

Tämä on opas AngularJS-direktiiveihin. Tässä keskustellaan kolmesta tärkeimmästä sisäänrakennetusta direktiivistä, jotka jakavat AngularJS-kehyksen kolmeen pääosaan. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

  1. Versioita Html
  2. Kehykset Java
  3. AngularJS -arkkitehtuuri
  4. HTML-luettelotyylit

Luokka:

Ohjelmistokehitys