Hvad er AngularJS?

AngularJS er en af ​​de mest populære JavaScript-baserede webrammer, der bruges i frontend-udvikling. Det bruges i udviklingen af ​​SPA'er (Single Page Applications). AngularJS er en open-source ramme, der hovedsageligt vedligeholdes af Google og af et samfund af enkeltpersoner, der er involveret i at løse problemer, der er forbundet med applikationsudvikling på én side. I dette emne skal vi lære om AngularJS-direktiver.

AngularJS er intet andet end det udvider den eksisterende HTML; Det tilføjes i HTML-side med tag. AngularJS gør HTML-stedet mere lydhør over for brugerhandlinger ved let at tilføje yderligere attributter. Den seneste stabile version af AngularJS er 1.6.x lige nu.

AngularJS-direktiver

AngularJS er en effektiv ramme, der understøtter Model-View-Controller (MVC) -baseret arkitektur. Det giver kernefunktioner såsom to-vejs databinding, controller, tjenester, direktiver, skabeloner, router, filtre, afhængighedsinjektion osv. Disse er alle de vigtigste funktioner, der arbejder i samarbejde for at gøre AngularJS effektiv.

Direktivet er en af ​​de meget nyttige funktioner i AngularJS. Det udvider den eksisterende HTML og giver mulighed for let at udvikle websider med ny opførsel ved hjælp af kerne JavaScript. Det giver mulighed for at skrive vores egne brugerdefinerede tags og kortlægge dem i eksisterende HTML. Denne funktionalitet giver større frihed og giver udviklere stor fleksibilitet i at skabe og bruge tilpassede elementer i webapplikationer i overensstemmelse hermed. De kan også designe deres egne direktiver. I denne artikel vil vi hovedsageligt fokusere på AngularJS-direktiver og forsøge at få viden om denne kernefunktion.

Direktiver er kun markører på DOM-elementer i HTML, f.eks. Attributnavn, elementnavn, CSS-klasse eller kommentar. Kompilatoren af ​​AngularJS knytter derefter den specificerede opførsel til det element. Hvert direktiv har et navn og starter med 'ng-'. Hvert direktiv kan bestemme, hvor det kan bruges i DOM-elementer. Der er nogle eksisterende direktiver, der allerede er tilgængelige i AngularJS, og lignende kan vi definere på egen hånd.

Vi vil se på tre hovedindbyggede direktiver, der opdeler AngularJS-rammerne i tre hoveddele.

1. ng-app: Dette direktiv fortæller kompilatoren, at dette er AngularJS-applikationen. Direktivet, hvor det er defineret i DOM, bliver rodelementet i applikationen. F.eks



AngularJS er tilgængelig som JavaScript-fil og tilføjes til HTML ved hjælp af tag. Ng-appen ved element fortæller AngularJS, at div er rodelementet og ejer af AngularJS-applikationen. AngularJS-applikationen starter fra dette element, og hvad der end er AngularJS-kode, er skrevet inde i det.

2. ng-model: Dette direktiv binder værdien fra websiden, mest fra inputfeltet til applikationsvariablen. Grundlæggende tillader dette direktiv at sende data fra input til AngularJS-applikation, som kan bruges et andet sted. F.eks

Gå ind:

Direktivet om ng-modellen binder inputværdien til applikationsvariablen kaldet “input”. Vi vil derefter se, hvordan vi kan vise den samme værdi på websiden i det næste eksempel.

3. ng-bind: Dette direktiv binder værdien fra AngularJS-applikationen til websiden. dvs. Det giver mulighed for videresendelse af data fra applikationen til HTML-tags. F.eks

Gå ind:

De data, vi fangede ved hjælp af “ng-model” -direktivet i applikationsvariabel “input”, er bundet til tagelement

ved hjælp af “ng-bind”. Vi kan køre denne applikation nu og se, hvordan AngularJS dynamisk opdaterer den indtastede værdi på siden.

Sammen med disse er der nogle andre direktiver tilgængelige i AngularJS, som er vigtige.

4. ng-gentagelse: Dette direktiv gentager et HTML-element og bruges på en række objekter. Dette direktiv er meget nyttigt i scenarier som visning af tabelelementer på en webside.

5. ng-init: Dette direktiv bruges til at initialisere værdierne for AngularJS-applikationen, før det indlæser en webside.

Oprettelse af nye direktiver

vi kan oprette vores egne tilpassede direktiver sammen med de eksisterende tilgængelige AngularJS-direktiver. Det er meget let at oprette nye direktiver ved kun at bruge JavaScript. Nye direktiver oprettes ved hjælp af “. direktiv ”funktion. F.eks



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-funktion, der opretter et modul. Vi har oprettet et brugerdefineret direktiv med navnet tilpasset direktiv, som funktionen er skrevet til. Hver gang vi bruger dette direktiv på vores webside, udføres denne funktion. I dette tilfælde er det en returskabelon, der indeholder HTML-kode.

Mens vi navngiver direktivet, er vi nødt til at bruge kamelkassens navnekonvention, og mens vi påberåber os den, skal vi bruge “-” adskilt navnekonvention.

Der er fire måder, hvorpå vi kan påberåbe os direktiver,

Elementnavn

Som brugt i det sidste eksempel:

Egenskab

klasse

For at påkalde direktiv ved hjælp af klassens navn skal vi tilføje begrænse egenskaber med værdien '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 at påberåbe sig direktiv ved hjælp af kommentar skal vi tilføje begrænse egenskaber med værdien '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..! "
);
));

Erstatsejendom: sand er obligatorisk, og den vil erstatte den oprindelige kommentar med direktiv, ellers ville kommentaren være usynlig.

Konklusion - AngularJS-direktiver

Så direktivet er en meget kraftfuld funktion, der fås i AngularJS. Direktivet giver mulighed for at introducere ny syntaks, er som markører og giver os mulighed for at knytte særlig opførsel til dem. Der er eksisterende tilgængelige direktiver i AngularJS, som er meget nyttige, også kan vi definere vores egne tilpassede direktiver og bruge dem. Tilpassede direktiver giver udviklere stor fleksibilitet og frihed. Direktiver tilføjer ny funktionalitet i eksisterende HTML med nyskabende stil og funktioner.

Anbefalede artikler

Dette er en guide til AngularJS-direktiver. Her diskuterer vi de tre vigtigste indbyggede direktiver, der deler AngularJS-rammerne i tre hoveddele. Du kan også se på de følgende artikler for at lære mere -

  1. Versioner af Html
  2. Rammer i Java
  3. AngularJS Architecture
  4. HTML-listestilarter

Kategori:

Softwareudvikling