Hoe u een AANGEPASTE richtlijn maakt in AngularJS met een voorbeeld

Inhoudsopgave:

Anonim

Wat is een aangepaste richtlijn?

Een aangepaste richtlijn in Angular Js is een door de gebruiker gedefinieerde richtlijn met de door u gewenste functionaliteit. Hoewel AngularJS veel krachtige richtlijnen uit de doos heeft, zijn soms aangepaste richtlijnen vereist.

In deze tutorial leer je-

  • Hoe maak je een aangepaste richtlijn?
  • AngularJs-richtlijnen en toepassingsgebieden
  • Controllers met richtlijnen gebruiken
  • Hoe u herbruikbare richtlijnen maakt
  • AngularJS-richtlijnen en componenten - ng-transclude
  • Geneste richtlijnen
  • Gebeurtenissen afhandelen in een richtlijn

Hoe maak je een aangepaste richtlijn?

Laten we eens kijken naar een voorbeeld van hoe we een aangepaste richtlijn kunnen maken.

De aangepaste richtlijn in ons geval gaat gewoon een div-tag injecteren met de tekst "AngularJS Tutorial" op onze pagina wanneer de richtlijn wordt aangeroepen.

Event Registration

Guru99 Global Event

Code Verklaring:

  1. We maken eerst een module voor onze hoekapplicatie. Dit is vereist om een ​​aangepaste richtlijn te maken, omdat de richtlijn met deze module wordt gemaakt.
  2. We maken nu een aangepaste richtlijn genaamd "ngGuru" en definiëren een functie die aangepaste code voor onze richtlijn zal hebben.

Notitie:-

Merk op dat we bij het definiëren van de richtlijn deze hebben gedefinieerd als ngGuru met de letter 'G' als hoofdletter. En wanneer we het openen vanuit onze div-tag als een instructie, openen we het als ng-guru. Dit is hoe Angular de aangepaste richtlijnen begrijpt die in een applicatie zijn gedefinieerd. Ten eerste moet de naam van de aangepaste richtlijn beginnen met de letters 'ng'. Ten tweede mag het koppelteken '-' alleen worden vermeld bij het aanroepen van de richtlijn. En ten derde kan de eerste letter die volgt op de letters 'ng' bij het definiëren van de richtlijn zowel hoofdletters als kleine letters zijn.

  1. We gebruiken de sjabloonparameter die een parameter is die door Angular is gedefinieerd voor aangepaste richtlijnen. Hierin definiëren we dat wanneer deze richtlijn wordt gebruikt, je gewoon de waarde van de sjabloon gebruikt en deze in de aanroepende code injecteert.
  2. Hier maken we nu gebruik van onze op maat gemaakte "ng-guru" -richtlijn. Wanneer we dit doen, wordt de waarde die we hebben gedefinieerd voor onze sjabloon "
    Angular JS Tutorial
    " hier nu geïnjecteerd.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

  • De bovenstaande uitvoer laat duidelijk zien dat onze aangepaste ng-guru-richtlijn, waarin de sjabloon is gedefinieerd voor het weergeven van een aangepaste tekst, wordt weergegeven in de browser.

AngularJs-richtlijnen en toepassingsgebieden

De scope wordt gedefinieerd als de lijm die de controller aan de weergave bindt door de gegevens tussen de weergave en de controller te beheren.

Bij het maken van aangepaste AngularJs-richtlijnen hebben deze standaard toegang tot het scope-object in de bovenliggende controller.

Op deze manier wordt het gemakkelijk voor de aangepaste richtlijn om gebruik te maken van de gegevens die worden doorgegeven aan de hoofdcontroller.

Laten we eens kijken naar een voorbeeld van hoe we het bereik van een bovenliggende controller kunnen gebruiken in onze aangepaste richtlijn.

Event Registration

Guru99 Global Event

Code Verklaring:

  1. We maken eerst een controller met de naam "DemoController". Hierin definiëren we een variabele genaamd tutorialName en koppelen deze aan het scope-object in één instructie - $ scope.tutorialName = "AngularJS".
  2. In onze aangepaste richtlijn kunnen we de variabele "tutorialName" noemen door een uitdrukking te gebruiken. Deze variabele zou toegankelijk zijn omdat deze is gedefinieerd in de controller "DemoController", die de ouder voor deze richtlijn zou worden.
  3. We verwijzen naar de controller in een div-tag, die zal fungeren als onze bovenliggende div-tag. Merk op dat dit eerst moet worden gedaan om ervoor te zorgen dat onze aangepaste richtlijn toegang heeft tot de variabele tutorialName.
  4. We voegen eindelijk onze aangepaste richtlijn "ng-guru" toe aan onze div-tag.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

  • De bovenstaande output laat duidelijk zien dat onze aangepaste richtlijn "ng-guru" gebruik maakt van de scope variabele tutorialName in de bovenliggende controller.

Controllers met richtlijnen gebruiken

Angular biedt de mogelijkheid om rechtstreeks vanuit aangepaste richtlijnen toegang te krijgen tot de lidvariabele van de controller zonder dat het scope-object nodig is.

Dit is soms nodig omdat u in een applicatie meerdere scope-objecten kunt hebben die tot meerdere controllers behoren.

Er is dus een grote kans dat u de fout zou kunnen maken om toegang te krijgen tot het scoopobject van de verkeerde controller.

In dergelijke scenario's is er een manier om specifiek te zeggen "Ik wil toegang krijgen tot deze specifieke controller" vanuit mijn richtlijn.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

Event Registration

Guru99 Global Event

Code Verklaring:

  1. We maken eerst een controller met de naam "DemoController". Hierin zullen we een variabele met de naam "tutorialName" definiëren en deze keer in plaats van deze aan het scope-object te koppelen, zullen we deze rechtstreeks aan de controller koppelen.
  2. In onze aangepaste richtlijn vermelden we specifiek dat we de controller "DemoController" willen gebruiken door het sleutelwoord van de controllerparameter te gebruiken.
  3. We maken een verwijzing naar de controller met behulp van de parameter "controllerAs". Dit wordt gedefinieerd door Angular en is de manier om de controller als referentie te gebruiken.

    Opmerking: - Het is mogelijk om toegang te krijgen tot meerdere controllers in een instructie door de respectievelijke blokken van de controller, controllerAs en template statements te specificeren.

  4. Ten slotte gebruiken we in onze sjabloon de referentie die in stap 3 is gemaakt en gebruiken we de lidvariabele die in stap 1 rechtstreeks aan de controller was gekoppeld.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

De uitvoer laat duidelijk zien dat de aangepaste richtlijn vooral toegang heeft tot de DemoController en de daaraan gekoppelde lidvariabele tutorialName en geeft de tekst "Angular" weer.

Hoe u herbruikbare richtlijnen maakt

We zagen de kracht van aangepaste richtlijnen al, maar we kunnen dat naar een hoger niveau tillen door onze eigen herbruikbare richtlijnen op te stellen.

Laten we bijvoorbeeld zeggen dat we code wilden injecteren die altijd de onderstaande HTML-tags op meerdere schermen zou tonen, wat in feite slechts een invoer is voor de "Naam" en "leeftijd" van de gebruiker.

Om deze functie op meerdere schermen te hergebruiken zonder elke keer te coderen, maken we een hoofdbesturingselement of richtlijn in een hoek om deze bedieningselementen vast te houden ("Naam" en "leeftijd" van de gebruiker).

Dus nu, in plaats van elke keer dezelfde code voor het onderstaande scherm in te voeren, kunnen we deze code daadwerkelijk insluiten in een richtlijn en die richtlijn op elk moment in de tijd insluiten.

Laten we eens kijken hoe we dit kunnen bereiken.

Event Registration

Guru99 Global Event

Code Verklaring:

  1. Wat in ons codefragment voor een aangepaste richtlijn verandert, is alleen de waarde die wordt gegeven aan de sjabloonparameter van onze aangepaste richtlijn.

    In plaats van een plan vijf tag of tekst, voeren we feitelijk het hele fragment van 2 invoercontroles in voor de "Naam" en "leeftijd" die op onze pagina moeten worden weergegeven.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Uit de bovenstaande uitvoer kunnen we zien dat het codefragment uit de sjabloon van de aangepaste richtlijn aan de pagina wordt toegevoegd.

AngularJS-richtlijnen en componenten - ng-transclude

Zoals we al eerder zeiden, is Angular bedoeld om de functionaliteit van HTML uit te breiden. En we hebben al gezien hoe we code kunnen injecteren door aangepaste herbruikbare richtlijnen te gebruiken.

Maar in de moderne ontwikkeling van webapplicaties is er ook een concept van het ontwikkelen van webcomponenten. Wat in feite betekent dat we onze eigen HTML-tags moeten maken die als componenten in onze code kunnen worden gebruikt.

Vandaar dat Angular een ander niveau van kracht biedt om HTML-tags uit te breiden door de mogelijkheid te bieden om attributen in de HTML-tags zelf te injecteren.

Dit wordt gedaan door de " ng-transclude " -tag, wat een soort instelling is om angular te vertellen om alles vast te leggen dat in de richtlijn in de markup wordt geplaatst.

Laten we een voorbeeld nemen van hoe we dit kunnen bereiken.

Event Registration

Guru99 Global Event



Angular JS

Code Verklaring:

  1. We gebruiken de richtlijn om een ​​aangepaste HTML-tag met de naam 'pane' te definiëren en een functie toe te voegen die een aangepaste code voor deze tag plaatst. In de uitvoer zal onze aangepaste pane-tag de tekst "AngularJS" weergeven in een rechthoek met een effen zwarte rand.
  2. Het "transclude" -attribuut moet als true worden vermeld, wat vereist is voor angular om deze tag in onze DOM te injecteren.
  3. In het bereik definiëren we een titelattribuut. Attributen worden normaal gesproken gedefinieerd als naam / waarde-paren zoals: naam = "waarde". In ons geval is de naam van het attribuut in onze deelvenster HTML-tag "titel". Het "@" -symbool is een vereiste vanuit een hoek. Dit wordt gedaan zodat wanneer de regel title = {{title}} wordt uitgevoerd in stap 5, de aangepaste code voor het titelattribuut wordt toegevoegd aan de HTML-tag van het deelvenster.
  4. De aangepaste code voor de titelattributen die slechts een effen zwarte rand tekent voor onze controle.
  5. Ten slotte noemen we onze aangepaste HTML-tag samen met het title-attribuut dat is gedefinieerd.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

  • De uitvoer laat duidelijk zien dat het title-attribuut van de pane html5-tag is ingesteld op de aangepaste waarde "Angular.JS".

Geneste richtlijnen

Richtlijnen in hoekig kunnen worden genest. Net als alleen innerlijke modules of functies in elke programmeertaal, moet u mogelijk richtlijnen in elkaar opnemen.

U kunt dit beter begrijpen door het onderstaande voorbeeld te bekijken.

In dit voorbeeld maken we twee richtlijnen genaamd "buiten" en "binnen".

  • De inner richtlijn geeft een tekst weer met de naam "Inner".
  • Terwijl de buitenste richtlijn eigenlijk een oproep doet naar de innerlijke richtlijn om de tekst met de naam "Innerlijk" weer te geven.



Guru99 Global Event

Code Verklaring:

  1. We maken een richtlijn met de naam "outer" die zich zal gedragen als onze bovenliggende richtlijn. Deze richtlijn zal dan een beroep doen op de "innerlijke" richtlijn.
  2. De beperking: 'E' is vereist door angular om ervoor te zorgen dat de gegevens van de innerlijke richtlijn beschikbaar zijn voor de buitenste richtlijn. De letter 'E' is de korte vorm van het woord 'Element'.
  3. Hier maken we de inner-richtlijn die de tekst "Inner" in een div-tag weergeeft.
  4. In het sjabloon voor de buitenste richtlijn (stap # 4) noemen we de innerlijke richtlijn. Dus hier injecteren we de sjabloon van de innerlijke richtlijn naar de uiterlijke richtlijn.
  5. Ten slotte roepen we rechtstreeks de uiterlijke richtlijn op.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de output,

  • Het is duidelijk dat zowel de buitenste als de binnenste richtlijnen zijn aangeroepen en dat de tekst in beide div-tags wordt weergegeven.

Gebeurtenissen afhandelen in een richtlijn

Gebeurtenissen zoals muisklikken of knopklikken kunnen vanuit de richtlijnen zelf worden afgehandeld. Dit doet u met behulp van de link-functie. De linkfunctie zorgt ervoor dat de richtlijn zichzelf kan hechten aan de DOM-elementen in een HTML-pagina.

Syntaxis:

De syntaxis van het linkelement is zoals hieronder weergegeven

ng-herhalen

link: function ($scope, element, attrs)

De linkfunctie accepteert normaal gesproken 3 parameters, inclusief het bereik, het element waarmee de richtlijn is geassocieerd en de attributen van het doelelement.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

Event Registration

Guru99 Global Event


Click Me

Code Verklaring:

  1. We gebruiken de linkfunctie zoals gedefinieerd in hoekig om de richtlijnen toegang te geven tot gebeurtenissen in de HTML DOM.
  2. We gebruiken het trefwoord 'element' omdat we willen reageren op een gebeurtenis voor een HTML DOM-element, wat in ons geval het "div" -element zal zijn. We gebruiken dan de "bind" -functie en zeggen dat we aangepaste functionaliteit willen toevoegen aan de klikgebeurtenis van het element. Het 'klik'-woord is het sleutelwoord dat wordt gebruikt om de klikgebeurtenis van een HTML-besturingselement aan te duiden. Het besturingselement HTML-knop heeft bijvoorbeeld de gebeurtenis click. Omdat we in ons voorbeeld een aangepaste code willen toevoegen aan de klikgebeurtenis van onze "dev" -tag, gebruiken we het trefwoord 'klik'.
  3. Hier zeggen we dat we de innerlijke HTML van het element (in ons geval het div-element) willen vervangen door de tekst 'You clicked me!'.
  4. Hier definiëren we onze div-tag om de aangepaste richtlijn ng-guru te gebruiken.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

  • In eerste instantie wordt de tekst 'Click Me' aan de gebruiker getoond, omdat dit in eerste instantie is gedefinieerd in de div-tag. Wanneer u daadwerkelijk op de div-tag klikt, wordt de onderstaande uitvoer weergegeven

Overzicht

  • Men kan ook een aangepaste richtlijn maken die kan worden gebruikt om code in de hoofdhoektoepassing te injecteren.
  • Aangepaste richtlijnen kunnen worden gemaakt om leden aan te roepen die zijn gedefinieerd in het scope-object in een bepaalde controller met behulp van de sleutelwoorden 'Controller', 'controllerAs' en 'sjabloon'.
  • Richtlijnen kunnen ook worden genest om ingebedde functionaliteit te bieden die vereist kan zijn, afhankelijk van de behoefte van de toepassing.
  • Richtlijnen kunnen ook herbruikbaar worden gemaakt, zodat ze kunnen worden gebruikt om gemeenschappelijke code te injecteren die nodig zou kunnen zijn voor verschillende webtoepassingen.
  • Richtlijnen kunnen ook worden gebruikt om aangepaste HTML-tags te maken die hun eigen functionaliteit hebben die is gedefinieerd volgens de zakelijke vereisten.
  • Gebeurtenissen kunnen ook worden afgehandeld vanuit richtlijnen om DOM-gebeurtenissen zoals knop- en muisklikken af ​​te handelen.