AngularJS ng-include: HTML-bestanden includen met een voorbeeld
James Hartman
⚡ Slimme samenvatting
ng-include in AngularJS haalt een extern HTML-fragment op, compileert het en injecteert het in de hoofdpagina, waardoor gedeelde markup zoals een tabel, een header of een footer in één herbruikbaar partial-bestand wordt opgeslagen.
Standaard biedt HTML niet de mogelijkheid om client-side code uit andere bestanden op te nemen. Normaal gesproken is het in elke programmeertaal een goede gewoonte om functionaliteit over verschillende bestanden voor elke toepassing te verdelen.
Als u bijvoorbeeld logica voor numerieke bewerkingen had, zou u die functionaliteit normaal gesproken in één afzonderlijk bestand willen hebben gedefinieerd. Dat afzonderlijke bestand kan vervolgens in meerdere toepassingen worden hergebruikt door dat bestand gewoon op te nemen.
Dit is normaal gesproken het concept van Inclusief verklaringen die beschikbaar zijn in programmeertalen zoals .Net en Java.
Deze handleiding bekijkt andere manieren waarop bestanden (bestanden die externe inhoud bevatten) HTML code) kan worden opgenomen in het hoofd-HTML-bestand.
Clientzijde omvat
Een van de meest gebruikelijke manieren om HTML-code in te voegen is via JavaScript. JavaScript is een programmeertaal die kan worden gebruikt om de inhoud van een HTML-pagina direct te manipuleren. Vandaar, JavaScripts kunnen ook worden gebruikt om code uit andere bestanden in te voegen.
De onderstaande stappen laten zien hoe dit bereikt kan worden.
Stap 1) Definieer een bestand met de naam Sub.html en voeg de volgende code toe aan het bestand.
<div> This is an included file </div>
Stap 2) Maak een bestand met de naam Sample.html, uw hoofdtoepassingsbestand, en voeg het onderstaande codefragment toe.
Hieronder vindt u de belangrijkste aspecten die u moet weten over de onderstaande code:
- In de body-tag bevindt zich een div-tag met de ID Content. Dit is de plaats waar de code uit het externe bestand 'Sub.html' wordt ingevoegd.
- Er wordt verwezen naar een jQuery-script. jQuery is een scripttaal die is gebouwd op basis van... JavaScript dat DOM-manipulatie nog eenvoudiger maakt.
- In de JavaIn de scriptfunctie staat de instructie '$(“#Content”).load(“Sub.html”);', waardoor de code in het bestand Sub.html wordt ingevoegd in de div-tag met de id Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Server Side omvat
Server Side Includes zijn ook beschikbaar om een gemeenschappelijk stukje code op een site op te nemen. Dit wordt normaal gesproken gedaan voor het opnemen van inhoud in de onderstaande delen van een HTML-document.
- Pagina hoofd
- Pagina ondertekst
- Navigatie menu.
Om een Server Side Include door een webserver te laten herkennen, moeten de bestandsnamen speciale extensies hebben. Deze worden doorgaans door de webserver geaccepteerd, zoals .shtml, .stm, .shtm en .cgi.
De instructie die wordt gebruikt om inhoud op te nemen, is de "include-instructie". Een voorbeeld van de include-instructie wordt hieronder weergegeven:
<!--#include virtual="navigation.cgi" -->
- De bovenstaande richtlijn maakt het mogelijk dat de inhoud van het ene document in het andere wordt 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.
Let op:
De virtuele parameter wordt gebruikt om het bestand (HTML-pagina, tekstbestand, script, enz.) op te geven dat moet worden opgenomen. Als het webserverproces geen toegang heeft om het bestand te lezen of het script uit te voeren, mislukt de include-opdracht. Het 'virtuele' woord is een trefwoord dat in de include-richtlijn moet worden geplaatst.
Hoe een HTML-bestand in AngularJS op te nemen
angularjs Biedt de mogelijkheid om functionaliteit uit andere AngularJS-bestanden te importeren met behulp van ng-include. Richtlijnen.
Het voornaamste doel van de "ng-include directive" is het ophalen, compileren en opnemen van een extern HTML-fragment in de hoofdapplicatie van AngularJS.
Versie-opmerking: AngularJS 1.x heeft de Long Term Support-status op 31 december 2021 verlaten, en het frameworkteam verklaart dat De ondersteuning voor AngularJS is officieel beëindigd. in januari 2022, dus er volgen geen releases of beveiligingspatches. Elke stap en elk codeblok hieronder blijft exact zoals gepubliceerd, als historische referentie. Modern Angular biedt geen directe vervanging: de markup is opgebouwd uit componenten en een fragment dat tijdens de runtime wordt geselecteerd, wordt weergegeven met ng-container en ngComponentOutlet.
Laten we de onderstaande code bekijken en uitleggen hoe dit met AngularJS kan worden bereikt.
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-richtlijn.
Het onderstaande codefragment gaat ervan uit dat er een scopevariabele met de naam "tutorial" bestaat. Vervolgens gebruikt het de ng-herhalen richtlijn, die elk onderwerp in de variabele "tutorial" doorloopt en de waarden voor 'Naam' en 'Description' sleutel-waardepaar.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Stap 2) Laten we de onderstaande code in een bestand met de naam Main.html schrijven. Dit is een eenvoudige AngularJS-applicatie met de volgende aspecten.
- Gebruik de “ng-include richtlijn” om de code in het externe bestand 'Table.html' te injecteren. De verklaring is vetgedrukt weergegeven in de onderstaande code. Dus de div-tag ' ' wordt vervangen door de volledige code in het bestand 'Table.html'.
- In de controleurEr wordt een variabele met de naam "tutorial" aangemaakt als onderdeel van het $scope-object. Deze variabele bevat een lijst met sleutel-waardeparen.
In ons voorbeeld zijn de sleutelwaardeparen dat
- Naam – Dit geeft de naam aan van een onderwerp, zoals Controllers, Modellen en Richtlijnen.
- Description – Dit geeft een beschrijving van elk onderwerp
De tutorialvariabele is ook toegankelijk in het bestand 'Table.html'.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
<h3> Guru99 Global Event</h3>
<div ng-include="'Table.html'"></div>
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController', function($scope) {
$scope.tutorial =[
{Name: "Controllers" , Description : "Controllers in action"},
{Name: "Models" , Description : "Models and binding data"},
{Name: "Directives" , Description : "Flexibility of Directives"}
];
});
</script>
</body>
</html>
Wanneer u de bovenstaande code uitvoert, krijgt u de volgende uitvoer.
uitgang:
De onderstaande schermafbeelding toont het weergegeven resultaat: het browsertabblad heeft de titel 'Event Registration', de koptekst bevindt zich boven de ingevoegde tabel en de drie rijen worden via de partial uit de tutorial-array in Main.html gehaald. De geannoteerde schermafbeelding spelt de koptekst als Gur99, terwijl de code schrijft... Guru99.
ng-include Attributen: src, onload en autoscroll
Naast de bestandsnaam accepteert de directive twee optionele attributen en kan deze op drie manieren worden geschreven: als een attribuut op elk element, als een <ng-include> element, of als een CSS-klasse. De onderstaande referentie volgt de officiële ngInclude-documentatie.
| Kenmerk | Nodig | Wat het doet |
|---|---|---|
| src, of ng-include | Ja | Een expressie die resulteert in de template. URL |
| laden | Nee | De expressie wordt elke keer geëvalueerd wanneer een nieuw partieel bestand klaar is met laden. |
| automatisch scrollen | Nee | Roept $anchorScroll aan nadat de inhoud is geladen; het weglaten van dit attribuut schakelt scrollen uit. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
De meest voorkomende fout volgt uit de eerste regel: src neemt een uitdrukking, geen gewone tekenreeks. Een letterlijk pad heeft daarom eigen aanhalingstekens nodig binnen het attribuut, vandaar dat het bovenstaande voorbeeld er als volgt uitziet: ng-include="'Table.html'". Schrijven ng-include="Table.html" zorgt ervoor dat AngularJS evalueert Table Als bereikeigenschap, niets vinden en het element leeg laten.
Waarom ng-include een nieuwe subscope creëert
De instructie plakt geen markup in de omringende scope. Elke include creëert een nieuw child-element. omvang dat prototypisch overerft van het bereik waarin het is gedeclareerd, en dat ene feit verklaart de meeste verrassingen bij het binden.
Het leesproces verloopt zoals verwacht. Het bovenstaande gedeelte luidt als volgt: tutorial rechtstreeks van de ouder, daarom ng-repeat vindt de array. Het gaat mis bij het schrijven: wanneer een gedeeltelijke waarde een primitieve waarde toewijst, zoals bij ng-model="topic"AngularJS creëert topic De kopie op het niveau van het kind blijft ongewijzigd.
Twee gewoontes voorkomen dat je in de val trapt:
- Binden via een object, zoals in
ng-model="data.topic"Zodat ouder en kind hetzelfde referentiepunt bereiken. - Bewaar de status in een controller of een service en stel functies beschikbaar in plaats van kale basisgegevenstypen.
De include-functie zendt ook uit $includeContentRequested, $includeContentLoaded en $includeContentErrorzodat een ouder kan reageren via $scope.$on zonder ook maar enigszins in het kindertijdsgebied te treden.
Hoe los je een lege of mislukte ng-include op?
Een include-instructie die niets oplevert, mislukt meestal om een van de volgende redenen. Loop ze in deze volgorde af.
- Bekijk de offertes. Een letterlijke bestandsnaam moet tussen enkele aanhalingstekens staan binnen de attribuutwaarde. Zonder aanhalingstekens wordt de expressie als 'undefined' beschouwd en wordt er geen verzoek verzonden.
- De pagina via HTTP aanbieden. De instructie genereert een XHR voor het gedeeltelijke bestand, waardoor het openen van Main.html rechtstreeks vanaf de schijf via een bestandsadres in de meeste browsers mislukt. Elke lokale webserver lost dit probleem op.
- Controleer of het pad correct wordt opgelost. Houd het netwerkpaneel in de gaten voor het verzoek. Een 404-fout betekent dat het pad relatief is ten opzichte van de pagina die de include bevat, niet ten opzichte van het partial-bestand dat ernaar verwijst.
- Houd u aan de regel van gelijke oorsprong. Standaard is de sjabloon URL moet overeenkomen met het domein en protocol van het applicatiedocument, omdat AngularJS het doorgeeft. $sce.getTrustedResourceUrlEen sjabloon van elders moet een vermelding hebben in de vertrouwde bronnen. URL lijst, of een expliciete trustAsResourceUrl-wrapper, en de externe server moet nog steeds CORS-headers verzenden.
- Luister naar de mislukking. De foutmelding $includeContentError wordt geactiveerd wanneer de responsstatus buiten het bereik van 200 tot 299 valt, waardoor een normaal leeg gebied wordt omgezet in een bericht dat het waard is om te loggen.
Nog een oorzaak die gemakkelijk over het hoofd gezien kan worden. AngularJS bewaart elk opgehaald fragment in `$templateCache`, waardoor een bewerkt bestand verouderde markup kan blijven weergeven totdat de cachevermelding wordt verwijderd of de pagina opnieuw vanuit de bron wordt geladen. Wanneer een fragment eigen gedrag nodig heeft in plaats van alleen markup, kan dit problemen veroorzaken. aangepaste richtlijn Met zijn eigen sjabloon en afgebakende scope is het de betere tool.
