AngularJS ng-include: Inkludera HTML-filer med exempel
James Hartman
⚡ Smart sammanfattning
ng-include i AngularJS hämtar, kompilerar och injicerar ett externt HTML-fragment på huvudsidan, så att delad markup som en tabell, ett sidhuvud eller en sidfot finns i en återanvändbar delfil.
Som standard ger HTML inte möjligheten att inkludera kod på klientsidan från andra filer. Det är normalt en god praxis i alla programmeringsspråk att distribuera funktionalitet över olika filer för alla program.
Till exempel, om du hade logik för numeriska operationer, skulle du normalt vilja ha den funktionen definierad i en separat fil. Den separata filen kan sedan återanvändas i flera applikationer genom att bara inkludera den filen.
Detta är normalt begreppet Inkludera påståenden som finns tillgängliga i programmeringsspråk såsom .Net och Java.
Den här handledningen tittar på andra sätt som filer (filer som innehåller externa) html kod) kan inkluderas i den huvudsakliga HTML-filen.
Klientsidan inkluderar
Ett av de vanligaste sätten att inkludera HTML-kod är via JavaManus. JavaScript är ett programmeringsspråk som kan användas för att manipulera innehållet på en HTML-sida i farten. Därför, JavaSkript kan också användas för att inkludera kod från andra filer.
Stegen nedan visar hur detta kan åstadkommas.
Steg 1) Definiera en fil som heter Sub.html och lägg till följande kod till filen.
<div> This is an included file </div>
Steg 2) Skapa en fil som heter Sample.html, som är din huvudsakliga programfil och lägg till kodavsnittet nedan.
Nedan är de viktigaste aspekterna att notera om koden nedan,
- I body-taggen finns en div-tagg som har ett ID för Content. Det här är platsen där koden från den externa filen 'Sub.html' kommer att infogas.
- Det finns en referens till ett jQuery-skript. jQuery är ett skriptspråk byggt ovanpå JavaSkript som gör DOM-manipulation ännu enklare.
- I JavaI skriptfunktionen finns det ett kommando '$(“#Content”).load(“Sub.html”);' som gör att koden i filen Sub.html injiceras i div-taggen som har ID:t Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Server sida ingår
Server Side Includes är också tillgängliga för att inkludera en gemensam kodbit på en webbplats. Detta görs normalt för att inkludera innehåll i nedanstående delar av ett HTML-dokument.
- Sidhuvud
- Sidfot
- Navigeringsmeny.
För att en webbserver ska kunna känna igen en Server Side Include har filnamnen speciella filändelser. De accepteras vanligtvis av webbservern, till exempel .shtml, .stm, .shtm, .cgi.
Direktivet som används för att inkludera innehåll är "include-direktivet". Ett exempel på include-direktivet visas nedan:
<!--#include virtual="navigation.cgi" -->
- Ovanstående direktiv tillåter att innehållet i ett dokument inkluderas i ett annat.
- Kommandot "virtuella" ovan används för att specificera målet i förhållande till domänroten för applikationen.
- Till den virtuella parametern finns även filparametern som kan användas. Parametrarna "fil" används när man behöver ange sökvägen i förhållande till katalogen för den aktuella filen.
Obs:
Den virtuella parametern används för att specificera filen (HTML-sida, textfil, skript, etc.) som måste inkluderas. Om webbserverprocessen inte har tillgång till att läsa filen eller köra skriptet, misslyckas kommandot include. Det "virtuella" ordet är ett nyckelord som måste placeras i inkluderingsdirektivet.
Hur man inkluderar HTML-fil i AngularJS
AngularJS tillhandahåller funktionen för att inkludera funktionalitet från andra AngularJS-filer med hjälp av ng-include Direktiven.
Det primära syftet med direktivet "ng-include" är att hämta, kompilera och inkludera ett externt HTML-fragment i AngularJS-huvudapplikationen.
Versionsnotering: AngularJS 1.x lämnade långtidssupporten den 31 december 2021, och ramverksteamet uppger att Stödet för AngularJS har officiellt upphört i januari 2022, så inga utgåvor eller säkerhetsuppdateringar följer. Varje steg och kodblock nedan förblir exakt som publicerat, som den historiska referensen. Modern Angular har ingen direkt ersättning: markup består av komponenter, och ett fragment som plockas vid körning renderas med ng-container och ngComponentOutlet.
Låt oss titta på kodbasen nedan och förklara hur detta kan uppnås med AngularJS.
Steg 1) låt oss skriva koden nedan i en fil som heter Table.html. Det här är filen som kommer att injiceras i vår huvudapplikationsfil med ng-include-direktivet.
Kodavsnittet nedan antar att det finns en scope-variabel som heter "tutorial". Den använder sedan ng-upprepa direktiv, som går igenom varje ämne i variabeln ”tutorial” och visar värdena för 'Namn' och 'Description' nyckel-värdepar.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Steg 2) Låt oss skriva koden nedan i en fil som heter Main.html. Detta är en enkel AngularJS-applikation som har följande aspekter
- Använd "ng-include-direktivet" för att injicera koden i den externa filen 'Table.html'. Uttalandet har markerats med fet stil i koden nedan. Så div-taggen ' ' kommer att ersättas av hela koden i filen 'Table.html'.
- I styrenhet, skapas en "handledningsvariabel" som en del av $scope-objektet. Denna variabel innehåller en lista med nyckel-värde-par.
I vårt exempel är nyckelvärdeparen
- Namn – Detta betecknar namnet på ett ämne som styrenheter, modeller och direktiv.
- Description – Detta ger en beskrivning av varje ämne
Handledningsvariabeln är också tillgänglig i filen '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>
När du kör ovanstående kod får du följande utdata.
Produktion:
Bilden nedan visar det renderade resultatet: webbläsarfliken har titeln Händelseregistrering, rubriken sitter ovanför den injicerade tabellen och de tre raderna är hämtade från handledningsarrayen i Main.html genom den partiella tabellen. Den kommenterade skärmdumpen stavar rubriken Gur99 medan koden skriver Guru99.
ng-include-attribut: src, onload och autoscroll
Utöver filnamnet accepterar direktivet två valfria attribut, och det kan skrivas på tre sätt: som ett attribut på valfritt element, som ett <ng-include> element, eller som en CSS-klass. Referensen nedan följer den officiella ngInkludera dokumentation.
| Attribut | Krävs | Vad den gör |
|---|---|---|
| src eller ng-include | Ja | Uttryck som utvärderas till mallen URL |
| belastning | Nej | Uttryck utvärderas varje gång en ny del av ett uttryck är klar att läsa in. |
| autoscroll | Nej | Anropar $anchorScroll efter att innehållet har laddats; om attributet utelämnas inaktiveras rullning |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Det vanligaste misstaget följer från första raden: src tar en Uttrycket, inte en vanlig sträng. En litteral sökväg behöver därför sina egna citattecken inuti attributet, vilket är anledningen till att exemplet ovan lyder ng-include="'Table.html'". Skrivning ng-include="Table.html" får AngularJS att utvärdera Table som en scope-egenskap, find nothing och lämna elementet tomt.
Varför ng-include skapar ett nytt underordnat omfång
Direktivet klistrar inte in markup i det omgivande omfånget. Varje inkludering skapar ett nytt underordnat objekt. omfattning som ärver prototypiskt från det omfång den deklarerades i, och det enda faktumet förklarar de flesta bindande överraskningar.
Läsningen fungerar som förväntat. Delen ovan läses. tutorial direkt från föräldern, vilket är anledningen ng-repeat hittar arrayen. Det är vid skrivning som den går sönder: när en partiell värde tilldelas en primitiv värde, som med ng-model="topic", AngularJS skapar topic på underordnets omfattning och den överordnade kopian ändras aldrig.
Två vanor undviker fällan:
- Bind genom ett föremål, som i
ng-model="data.topic", så att förälder och barn når samma referens. - Håll tillståndet i en kontroller eller en tjänst och exponera funktioner istället för nakna primitiv.
Inkluderar även utsläpp $includeContentRequested, $includeContentLoaded och $includeContentErrorså att en förälder kan reagera genom $scope.$on utan att alls nå in i barnets omfattning.
Hur man åtgärdar ett tomt eller misslyckat ng-include-fel
En include som inte renderar någonting misslyckas vanligtvis av en av flera anledningar. Gå igenom dem i denna ordning.
- Kontrollera citaten. Ett filnamn med bokstavlig betydelse behöver enkla citattecken inuti attributvärdet. Utan dem blir uttrycket odefinierat och ingen begäran skickas någonsin.
- Servera sidan via HTTP. Direktivet utfärdar en XHR för den partiella filen, så att öppna Main.html direkt från disk via en filadress misslyckas i de flesta webbläsare. Alla lokala webbservrar rensar detta.
- Bekräfta att sökvägen löses. Håll utkik efter begäran i nätverkspanelen. En 404-fil betyder att sökvägen är relativ till sidan som är värd för inkluderingen, inte till den partiella filen som refererar till den.
- Respektera regeln om samma ursprung. Som standard är mallen URL måste matcha domänen och protokollet för applikationsdokumentet, eftersom AngularJS skickar det igenom $sce.getTrustedResourceUrlEn mall från en annan plats behöver en post i den betrodda resursen. URL lista, eller en explicit trustAsResourceUrl-omslag, och fjärrservern måste fortfarande skicka CORS-rubriker.
- Lyssna efter misslyckandet. $includeContentError utlöses när svarsstatusen faller utanför 200 till 299, vilket förvandlar ett tyst tomt område till ett meddelande värt att logga.
Ytterligare en orsak är lätt att missa. AngularJS sparar varje hämtad partiell fil i $templateCache, så en redigerad fil kan fortsätta att visa inaktuell markup tills cacheposten tas bort eller sidan laddas om från källkoden. När ett fragment behöver ett eget beteende snarare än enbart markup, en anpassad direktiv med egen mall och isolerat omfång är det bättre verktyget.
