Wat is AngularJS?

AngularJS is een van de populairste op JavaScript gebaseerde webframeworks die worden gebruikt bij front-end ontwikkeling. Het wordt gebruikt bij de ontwikkeling van Single Page Applications (SPA's). AngularJS is een open-source framework dat voornamelijk wordt onderhouden door Google en door een gemeenschap van personen die betrokken zijn bij het oplossen van problemen bij de ontwikkeling van applicaties met één pagina. In dit onderwerp gaan we meer te weten komen over AngularJS-richtlijnen.

AngularJS is niets anders dan het breidt de bestaande HTML uit; Het wordt toegevoegd in HTML-pagina met tag. AngularJS maakt HTML-site responsiever op gebruikersacties door eenvoudig extra attributen toe te voegen. De nieuwste stabiele versie van AngularJS is vanaf nu 1.6.x.

Richtlijnen van AngularJS

AngularJS is een efficiënt framework dat op Model-View-Controller (MVC) gebaseerde architectuur ondersteunt. Het biedt kernfuncties zoals tweerichtingsgegevensbinding, controller, services, richtlijnen, sjablonen, router, filters, afhankelijkheidsinjectie, enz. Dit zijn allemaal de belangrijkste functies die samenwerken om AngularJS efficiënt te maken.

De richtlijn is een van de zeer handige functies in AngularJS. Het breidt de bestaande HTML uit en maakt het mogelijk om gemakkelijk webpagina's te ontwikkelen met nieuw gedrag met behulp van kern-JavaScript. Hiermee kunt u onze eigen aangepaste tags schrijven en deze in bestaande HTML toewijzen. Deze functionaliteit geeft meer vrijheid en biedt ontwikkelaars grote flexibiliteit bij het maken en gebruiken van aangepaste elementen in webapplicaties. Ook kunnen ze hun eigen richtlijnen ontwerpen. In dit artikel zullen we ons vooral richten op AngularJS-richtlijnen en proberen we kennis te krijgen van deze kernfunctie.

Richtlijnen zijn niets anders dan markeringen op DOM-elementen in HTML zoals attribuutnaam, elementnaam, CSS-klasse of opmerking. De compiler van AngularJS koppelt vervolgens het opgegeven gedrag aan dat element. Elke richtlijn heeft een naam en begint met 'ng-'. Elke richtlijn kan beslissen waar deze in DOM-elementen kan worden gebruikt. Er zijn enkele bestaande richtlijnen die al beschikbaar zijn in AngularJS en op dezelfde manier kunnen we dit zelf bepalen.

We zullen drie belangrijke ingebouwde richtlijnen bekijken die het AngularJS-raamwerk in drie grote delen verdelen.

1. ng-app: deze richtlijn vertelt de compiler dat dit de AngularJS-applicatie is. De richtlijn waar het wordt gedefinieerd in DOM wordt het basiselement van de toepassing. Eg



AngularJS is beschikbaar als JavaScript-bestand en wordt met behulp van tag aan HTML toegevoegd. De ng-app at element vertelt AngularJS dat div het root-element is en eigenaar van de AngularJS-applicatie. De AngularJS-toepassing begint met dat element en wat AngularJS-code ook is, wordt erin geschreven.

2. ng-model: deze richtlijn bindt de waarde van de webpagina, meestal van het invoerveld naar de toepassingsvariabele. Kortom, deze richtlijn staat het verzenden van gegevens van invoer naar AngularJS-toepassing toe die ergens anders kan worden gebruikt. Eg

Enter:

De ng-modelrichtlijn bindt de invoerwaarde aan de toepassingsvariabele met de naam "invoer". We zullen dan zien hoe we dezelfde waarde op de webpagina in het volgende voorbeeld kunnen weergeven.

3. ng-bind: deze richtlijn bindt de waarde van de AngularJS-toepassing aan de webpagina. Dit betekent dat het mogelijk is om gegevens van de toepassing door te sturen naar HTML-tags. Eg

Enter:

De gegevens die we hebben vastgelegd met behulp van de "ng-model" -richtlijn in toepassingsvariabele "input" is gebonden aan het tag-element

met "ng-bind". We kunnen deze applicatie nu uitvoeren en zien hoe dynamisch AngularJS de ingevoerde waarde op de pagina bijwerkt.

Samen met deze zijn er enkele andere richtlijnen beschikbaar in AngularJS die belangrijk zijn.

4. ng-repeat: deze richtlijn herhaalt een HTML-element en wordt gebruikt voor een reeks objecten. Deze richtlijn is erg handig in scenario's zoals het weergeven van tabelelementen op een webpagina.

5. ng-init: deze richtlijn wordt gebruikt om de waarden voor de AngularJS-toepassing te initialiseren voordat deze een webpagina laadt.

Nieuwe richtlijnen maken

we kunnen onze eigen aangepaste richtlijnen samen met de bestaande beschikbare AngularJS-richtlijnen maken. Het is heel eenvoudig om nieuwe richtlijnen te maken met alleen JavaScript. Nieuwe richtlijnen worden gemaakt met behulp van “. directiefunctie. 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 is een AngularJS-functie die een module maakt. We hebben een aangepaste instructie met de naam aangepaste instructie gemaakt waarvoor functie is geschreven. Wanneer we deze richtlijn op onze webpagina gebruiken, wordt deze functie uitgevoerd. In dit geval is het een terugkerende sjabloon die HTML-code bevat.

Terwijl we de naamgevingsrichtlijn gebruiken, moeten we de naamgevingsconventie voor kamelen gebruiken en terwijl we deze gebruiken, moeten we de gescheiden naamgevingsconventie “-” gebruiken.

Er zijn vier manieren waarop we een beroep kunnen doen op richtlijnen,

Elementnaam

Zoals gebruikt in het laatste voorbeeld:

Attribuut

Klasse

Om de richtlijn aan te roepen door de klassenaam te gebruiken, moeten we de eigenschap restrict met de waarde 'C' toevoegen terwijl we deze definiëren.

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

Commentaar

Om een ​​richtlijn te gebruiken door commentaar te gebruiken, moeten we eigenschap restrict met waarde 'M' toevoegen terwijl we het definiëren.

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

De eigenschap vervangen: true is verplicht en het vervangt de oorspronkelijke opmerking door een richtlijn, anders is de opmerking onzichtbaar.

Conclusie - AngularJS-richtlijnen

Dus, Richtlijn is een zeer krachtige functie die beschikbaar is in AngularJS. De richtlijn maakt het mogelijk om nieuwe syntaxis te introduceren, zijn als markeringen en stelt ons in staat om speciaal gedrag hieraan te verbinden. Er zijn bestaande beschikbare richtlijnen in AngularJS die erg handig zijn, ook kunnen we onze eigen aangepaste richtlijnen definiëren en ze gebruiken. Aangepaste richtlijnen bieden ontwikkelaars een grote flexibiliteit en vrijheid. Richtlijnen voegen nieuwe functionaliteit toe aan bestaande HTML met innovatieve stijl en functies.

Aanbevolen artikelen

Dit is een handleiding voor AngularJS-richtlijnen. Hier bespreken we de drie belangrijkste ingebouwde richtlijnen die het AngularJS-raamwerk in drie grote delen verdelen. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. Versies van HTML
  2. Frameworks in Java
  3. AngularJS-architectuur
  4. HTML-lijststijlen

Categorie:

Software ontwikkeling