Ng-include in AngularJS: HTML-bestand opnemen (voorbeeld)

Inhoudsopgave:

Anonim

HTML biedt standaard niet de mogelijkheid om client-side code uit andere bestanden op te nemen. Het is normaal gesproken een goede gewoonte in elke programmeertaal om functionaliteit over verschillende bestanden voor elke toepassing te verdelen.

Als u bijvoorbeeld logica had voor numerieke bewerkingen, zou u die functionaliteit normaal gesproken in één afzonderlijk bestand willen hebben. Dat afzonderlijke bestand kan vervolgens in meerdere toepassingen worden hergebruikt door alleen dat bestand op te nemen.

Dit is normaal gesproken het concept van include-instructies die beschikbaar zijn in programmeertalen zoals .Net en Java.

Deze tutorial kijkt naar andere manieren waarop bestanden (bestanden die externe HTML-code bevatten) kunnen worden opgenomen in het HTML-hoofdbestand.

In deze tutorial leer je-

  • Client Side omvat
  • Serverzijde omvat
  • Hoe HTML-bestand in AngularJS op te nemen

Client Side omvat

Een van de meest gebruikelijke manieren is om HTML-code op te nemen via Javascript. JavaScript is een programmeertaal die kan worden gebruikt om de inhoud in een HTML-pagina on-the-fly te manipuleren. Daarom kan Javascript ook worden gebruikt om code uit andere bestanden op te nemen.

De onderstaande stappen laten zien hoe dit kan worden bereikt.

Stap 1) Definieer een bestand met de naam Sub.html en voeg de volgende code toe aan het bestand.

Dit is een bijgevoegd bestand

Stap 2) Maak een bestand met de naam Sample.html, uw hoofdtoepassingsbestand, en voeg het onderstaande codefragment toe.

Hieronder staan ​​de belangrijkste aspecten om op te merken over de onderstaande code,

  1. In de body-tag is er een div-tag die een ID van Content heeft. Dit is de plaats waar de code uit het externe bestand 'Sub.html' wordt ingevoegd.
  2. Er is een verwijzing naar een jQuery-script. JQuery is een scripttaal die bovenop Javascript is gebouwd, waardoor DOM-manipulatie nog eenvoudiger wordt.
  3. In de Javascript-functie is er een statement '$ ("# Content"). Load ("Sub.html");' waardoor de code in het bestand Sub.html wordt geïnjecteerd in de div-tag die de id van Content heeft.

Serverzijde omvat

Server Side Inclusief is ook beschikbaar om een ​​algemeen stuk code op een site op te nemen. Dit wordt normaal gesproken gedaan om inhoud op te nemen in de onderstaande delen van een HTML-document.

  1. Pagina hoofd
  2. Pagina ondertekst
  3. Navigatie menu.

Om een ​​webserver een Server Side Included te laten herkennen, hebben de bestandsnamen speciale extensies. Ze worden meestal geaccepteerd door de webserver, zoals .shtml, .stm, .shtm, .cgi.

De richtlijn die wordt gebruikt voor het opnemen van inhoud is de "include-richtlijn". Een voorbeeld van de include-richtlijn wordt hieronder getoond;

  • Met de bovenstaande richtlijn kan de inhoud van het ene document in een ander worden opgenomen.
  • Het "virtuele" commando boven de code wordt gebruikt om het doel te specificeren ten opzichte van de domeinroot van de applicatie.
  • Naast de virtuele parameter is er ook de bestandsparameter die kan worden gebruikt. De "file" -parameters worden gebruikt wanneer men het pad moet specificeren ten opzichte van de directory van het huidige bestand.

Notitie:

De virtuele parameter wordt gebruikt om het bestand (HTML-pagina, tekstbestand, script, etc.) te specificeren dat moet worden opgenomen. Als het webserverproces geen toegang heeft om het bestand te lezen of het script uit te voeren, zal het include-commando mislukken. Het 'virtuele' woord is een trefwoord dat in de include-instructie moet worden geplaatst.

Hoe HTML-bestand in AngularJS op te nemen

Angular biedt de functie om de functionaliteit van andere AngularJS-bestanden op te nemen door de instructie ng-include te gebruiken.

Het primaire doel van de "ng-include-richtlijn" wordt gebruikt om een ​​extern HTML-fragment op te halen, te compileren en op te nemen in de hoofdtoepassing van AngularJS.

Laten we de onderstaande codebasis bekijken en uitleggen hoe dit kan worden bereikt met Angular.

Stap 1) laten we de onderstaande code schrijven in een bestand met de naam Table.html. Dit is het bestand dat in ons hoofdtoepassingsbestand zal worden geïnjecteerd met behulp van de ng-include-instructie.

Het onderstaande codefragment gaat ervan uit dat er een bereikvariabele is met de naam "tutorial". Het gebruikt dan de instructie ng-repeat, die door elk onderwerp in de "Tutorial" -variabele gaat en de waarden weergeeft voor het sleutel-waardepaar 'naam' en 'beschrijving'.


 {{Topic.Name}}  {{Topic.Country}}

Stap 2) laten we de onderstaande code schrijven in een bestand met de naam Main.html. Dit is een eenvoudige angular.JS-applicatie die de volgende aspecten heeft

  1. Gebruik de "ng-include-instructie" om de code in het externe bestand 'Table.html' te injecteren. De verklaring is vetgedrukt gemarkeerd in de onderstaande code. Dus de div-tag '
    '     wordt vervangen door de volledige code in het 'Table.html'-bestand.
  2. In de controller wordt een "tutorial" -variabele gemaakt als onderdeel van het $ scope-object. Deze variabele bevat een lijst met sleutel / waarde-paren.

In ons voorbeeld zijn de sleutelwaardeparen

  1. Naam - Dit geeft de naam van een onderwerp aan, zoals controllers, modellen en richtlijnen.
  2. Beschrijving - Dit geeft een beschrijving van elk onderwerp

De tutorialvariabele is ook toegankelijk in het bestand 'Table.html'.

 Evenementregistratie 


Guru99 Wereldwijd evenement

Als u de bovenstaande code uitvoert, krijgt u de volgende uitvoer.

Uitgang :

Overzicht:

  • Standaard weten we dat HTML geen directe manier biedt om HTML-inhoud uit andere bestanden op te nemen, zoals andere programmeertalen.
  • Javascript is samen met JQuery de beste optie voor het insluiten van HTML-inhoud uit andere bestanden.
  • Een andere manier om HTML-inhoud uit andere bestanden op te nemen, is door de instructie en het trefwoord virtuele parameter te gebruiken. Het virtuele parameter sleutelwoord wordt gebruikt om het bestand aan te duiden dat moet worden ingesloten. Dit staat bekend als server-side omvat.
  • Angular biedt ook de mogelijkheid om bestanden op te nemen met behulp van de ng-include-richtlijn. Deze instructie kan worden gebruikt om code uit externe bestanden rechtstreeks in het HTML-hoofdbestand te injecteren.