Vad är AngularJS?

AngularJS är en av de mest populära JavaScript-baserade webbramarna som används i frontend-utvecklingen. Det används för att utveckla SPA: er. AngularJS är en öppen källkodsram som huvudsakligen upprätthålls av Google och av ett samhälle av individer som är involverade i att lösa problem som står inför en applikationsutveckling på en sida. I det här ämnet kommer vi att lära oss om AngularJS-direktiv.

AngularJS är inget annat än att den utökar den befintliga HTML; Det läggs till i HTML-sida med tagg. AngularJS gör HTML-webbplatsen mer lyhörd för användaråtgärder genom att enkelt lägga till ytterligare attribut. Den senaste stabila versionen av AngularJS är nu 1.6.x.

AngularJS-direktiv

AngularJS är ett effektivt ramverk som stöder MVC-baserad arkitektur (Model-View-Controller). Det tillhandahåller kärnfunktioner som tvåvägsdatabindning, Controller, Services, Direktiv, Mallar, Router, Filters, Dependency Injection, etc. Dessa är alla de viktigaste funktionerna som samarbetar för att göra AngularJS effektiv.

Direktivet är en av de mycket användbara funktionerna i AngularJS. Den utökar den befintliga HTML-filen och gör det enkelt att utveckla webbsidor med nytt beteende med hjälp av kärn-JavaScript. Det gör det möjligt att skriva våra egna anpassade taggar och kartlägga dem till befintlig HTML. Denna funktionalitet ger mer frihet och ger utvecklarna stor flexibilitet när det gäller att skapa och använda anpassade element i webbapplikationer i enlighet därmed. De kan också utforma sina egna direktiv också. I den här artikeln kommer vi huvudsakligen att fokusera på AngularJS-direktiv och försöka få kunskap om denna kärnfunktion.

Direktiv är inget annat än markörer på DOM-element i HTML som attributnamn, elementnamn, CSS-klass eller kommentar. Kompilatorn av AngularJS fäster sedan det angivna beteendet till det elementet. Varje direktiv har ett namn och börjar med 'ng-'. Varje direktiv kan bestämma var det kan användas i DOM-element. Det finns några befintliga direktiv som redan finns i AngularJS och på liknande sätt kan vi definiera på egen hand.

Vi kommer att titta på tre huvudbyggda direktiv som delar upp AngularJS-ramverket i tre huvuddelar.

1. ng-app: Detta direktiv säger kompilatorn att det här är AngularJS-applikationen. Direktivet där det definieras i DOM blir rotelementet i applikationen. T.ex



AngularJS är tillgänglig som JavaScript-fil och läggs till i HTML med tagg. Ng-appen vid elementet berättar för AngularJS att div är rotelementet och ägaren av AngularJS-applikationen. AngularJS-applikationen startar från det elementet och vad som än är AngularJS-kod, skrivs inuti det.

2. ng-modell: Detta direktiv binder värdet från webbsidan, mest från inmatningsfältet till applikationsvariabeln. I princip tillåter detta direktiv att skicka data från input till AngularJS-applikation som kan användas någon annanstans. T.ex

Stiga på:

Direktivet ng-modell binder ingångsvärdet till applikationsvariabeln med namnet “input”. Vi kommer då att se hur vi kan visa samma värde på webbsidan i nästa exempel.

3. ng-bind: Detta direktiv binder värdet från AngularJS-applikationen till webbsidan. dvs. Det tillåter vidarebefordra data från applikationen till HTML-taggar. T.ex

Stiga på:

Uppgifterna vi fångade med "ng-modellen" -direktivet i applikationsvariabeln "input" är bundna till taggelementet

med ”ng-bind”. Vi kan köra den här applikationen nu och se hur dynamiskt AngularJS uppdaterar det angivna värdet på sidan.

Tillsammans med dessa finns det några andra direktiv i AngularJS som är viktiga.

4. ng-repetition: Detta direktiv upprepar ett HTML-element och används på en rad objekt. Detta direktiv är mycket användbart i scenarier som att visa tabellelement på en webbsida.

5. ng-init: Detta direktiv används för att initialisera värdena för AngularJS-applikationen innan den laddar en webbsida.

Skapa nya direktiv

vi kan skapa våra egna anpassade direktiv tillsammans med befintliga tillgängliga AngularJS-direktiv. Det är väldigt lätt att skapa nya direktiv genom att bara använda JavaScript. Nya direktiv skapas med ”. direktiv ”-funktion. T.ex



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 är en AngularJS-funktion som skapar en modul. Vi har skapat ett anpassat direktiv med namnet anpassat direktiv för vilken funktion skrivs. När vi använder detta direktiv på vår webbsida kommer denna funktion att köras. I det här fallet är det en returmall som innehåller HTML-kod.

Samtidigt som vi anger namndirektivet måste vi använda namngavalkonventionen för kamelfall och samtidigt som vi åberopar det, måste vi använda ”-” separerade namnkonvention.

Det finns fyra sätt på vilka vi kan åberopa direktiv,

Elementnamn

Som det användes i det senaste exemplet:

Attribut

Klass

För att åberopa direktiv genom att använda klassnamnet måste vi lägga till begränsningsegenskaper med värdet 'C' medan vi definierar 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

För att åberopa direktiv genom att använda kommentar måste vi lägga till begränsning av egendom med värdet "M" medan vi definierar det.

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

Ersättningsegenskapen: true är obligatorisk och den kommer att ersätta den ursprungliga kommentaren med direktiv annars skulle kommentaren vara osynlig.

Slutsats - AngularJS-direktiv

Så direktivet är en mycket kraftfull funktion som finns i AngularJS. Direktivet tillåter att införa ny syntax, är som markörer och gör att vi kan fästa speciellt beteende till dem. Det finns befintliga tillgängliga direktiv i AngularJS som är mycket användbara, också kan vi definiera våra egna anpassade direktiv och använda dem. Anpassade direktiv ger utvecklarna stor flexibilitet och frihet. Direktiv lägger till ny funktionalitet i befintlig HTML med innovativ stil och funktioner.

Rekommenderade artiklar

Detta är en guide till AngularJS-direktiv. Här diskuterar vi de tre huvudsakliga inbyggda direktiven som delar upp AngularJS-ramverket i tre huvuddelar. Du kan också titta på följande artiklar för att lära dig mer -

  1. Versioner av Html
  2. Ramar i Java
  3. AngularJS Architecture
  4. HTML-liststilar

Kategori:

Mjukvaruutveckling