Hva er AngularJS?

AngularJS er et av de mest populære JavaScript-baserte nettverkene som brukes i frontend utvikling. Det brukes i utviklingen av SPA-er (Single Page Applications). AngularJS er et rammeverk med åpen kildekode som hovedsakelig vedlikeholdes av Google og av et fellesskap av individer som er involvert i å løse problemer i forbindelse med applikasjonsutvikling på én side. I dette emnet skal vi lære om AngularJS-direktiver.

AngularJS er ikke noe annet enn å utvide den eksisterende HTML; Det legges til i HTML-side med tag. AngularJS gjør HTML-nettstedet mer responsivt på brukerhandlinger ved å legge til flere attributter enkelt. Den siste stabile versjonen av AngularJS er 1.6.x per nå.

Direktiv fra AngularJS

AngularJS er et effektivt rammeverk som støtter Model-View-Controller (MVC) -basert arkitektur. Det gir kjernefunksjoner som toveis databinding, kontroller, tjenester, direktiver, maler, ruter, filtre, avhengighetsinjeksjon, etc. Disse er alle hovedfunksjonene som samarbeider for å gjøre AngularJS effektiv.

Direktivet er en av de veldig nyttige funksjonene i AngularJS. Den utvider den eksisterende HTML-en, og gjør det mulig å enkelt utvikle websider med ny oppførsel ved hjelp av JavaScript. Det gjør det mulig å skrive våre egne tilpassede koder og kartlegge dem i eksisterende HTML. Denne funksjonaliteten gir mer frihet og gir utviklere stor fleksibilitet i å lage og bruke tilpassede elementer i webapplikasjoner deretter. De kan også designe sine egne direktiver. I denne artikkelen vil vi hovedsakelig fokusere på AngularJS-direktiver og prøve å få kunnskap om denne kjernefunksjonen.

Direktiv er ikke annet enn markører på DOM-elementer i HTML som attributtnavn, elementnavn, CSS-klasse eller kommentar. Kompilatoren til AngularJS knytter deretter den spesifiserte oppførselen til det elementet. Hvert direktiv har et navn og starter med 'ng-'. Hvert direktiv kan bestemme hvor det skal brukes i DOM-elementer. Det er noen eksisterende direktiver som allerede er tilgjengelige i AngularJS, og på samme måte kan vi definere på egen hånd.

Vi vil se på tre hovedbygde direktiver som deler AngularJS-rammeverket i tre hoveddeler.

1. ng-app: Dette direktivet forteller kompilatoren at dette er AngularJS-applikasjonen. Direktivet der det er definert i DOM blir rotelementet i applikasjonen. Eg



AngularJS er tilgjengelig som JavaScript-fil og legges til i HTML ved hjelp av tag. Ng-appen på element forteller AngularJS at div er rotelementet og eier av AngularJS-applikasjonen. AngularJS-applikasjonen starter fra det elementet, og hva som er AngularJS-kode, er skrevet inne i det.

2. ng-modell: Dette direktivet binder verdien fra websiden, for det meste fra inputfeltet til applikasjonsvariabelen. I utgangspunktet tillater dette direktivet å sende data fra input til AngularJS-applikasjonen som kan brukes et annet sted. Eg

Tast inn:

Direktivet på ng-modellen binder inngangsverdien til applikasjonsvariabelen som heter “input”. Vi vil da se hvordan vi kan vise den samme verdien på websiden i neste eksempel.

3. ng-bind: Dette direktivet binder verdien fra AngularJS-applikasjonen til websiden. dvs. Det tillater videresending av data fra applikasjonen til HTML-tagger. Eg

Tast inn:

Dataene vi fanget ved å bruke “ng-model” -direktivet i applikasjonsvariabelen “input” er bundet til tagelement

bruker “ng-bind”. Vi kan kjøre denne applikasjonen nå og se hvordan dynamisk AngularJS oppdaterer den angitte verdien på siden.

Sammen med disse er det noen andre direktiver tilgjengelig i AngularJS som er viktige.

4. ng-repetisjon: Dette direktivet gjentar et HTML-element og brukes på en rekke objekter. Dette direktivet er veldig nyttig i scenarier som å vise tabellelementer på en webside.

5. ng-init: Dette direktivet brukes til å initialisere verdiene for AngularJS-applikasjonen før den laster inn en webside.

Opprette nye direktiver

vi kan lage våre egne tilpassede direktiver sammen med de eksisterende tilgjengelige AngularJS-direktivene. Det er veldig enkelt å lage nye direktiver ved å bruke bare JavaScript. Nye direktiver opprettes ved å bruke “. direktiv ”-funksjon. Eg



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 er en AngularJS-funksjon som lager en modul. Vi har laget et tilpasset direktiv med navnet tilpasset direktiv som funksjonen er skrevet for. Hver gang vi bruker dette direktivet på vår webside, vil denne funksjonen bli utført. I dette tilfellet er det en returmal som inneholder HTML-kode.

Mens vi navngir direktivet, må vi bruke navnevalgsstevnet for kamelen, og mens vi påberoper oss det, må vi bruke “-” separert navnekonvensjon.

Det er fire måter vi kan påberope oss på direktiver,

Elementnavn

Som brukt i siste eksempel:

Egenskap

Klasse

For å påkalle direktiv ved å bruke klassens navn må vi legge til begrensning av eiendommer med verdien 'C' mens vi definerer det.

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

Kommentar

For å påkalle direktiv ved å bruke kommentar må vi legge til begrensning av eiendommer med verdien 'M' mens vi definerer den.

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

Erstatningsegenskapen: true er obligatorisk, og den vil erstatte den opprinnelige kommentaren med direktiv, ellers vil kommentaren være usynlig.

Konklusjon - AngularJS-direktiver

Så direktivet er en veldig kraftig funksjon som er tilgjengelig i AngularJS. Direktivet gjør det mulig å innføre ny syntaks, er som markører og lar oss knytte spesiell oppførsel til dem. Det er eksisterende tilgjengelige direktiver i AngularJS som er veldig nyttige, også vi kan definere våre egne tilpassede direktiver og bruke dem. Tilpassede direktiver gir utviklere stor fleksibilitet og frihet. Direktiv legger til ny funksjonalitet i eksisterende HTML med nyskapende stil og funksjoner.

Anbefalte artikler

Dette er en guide til AngularJS-direktiver. Her diskuterer vi de tre viktigste innebygde direktiver som deler AngularJS-rammeverket i tre hoveddeler. Du kan også se på følgende artikler for å lære mer -

  1. Versjoner av HTML
  2. Rammer i Java
  3. AngularJS Architecture
  4. HTML-listestiler

Kategori:

Programvare utvikling