AngularJS ng-include: Inkluder HTML-filer med eksempel
James Hartman
⚡ Smart oppsummering
ng-include i AngularJS henter, kompilerer og injiserer et eksternt HTML-fragment på hovedsiden, slik at delt markup som en tabell, en topptekst eller en bunntekst ligger i én gjenbrukbar delvis fil.
Som standard gir HTML ikke mulighet til å inkludere klientsidekode fra andre filer. Det er normalt en god praksis i et hvilket som helst programmeringsspråk å distribuere funksjonalitet på tvers av ulike filer for alle programmer.
For eksempel, hvis du hadde logikk for numeriske operasjoner, vil du normalt ha denne funksjonaliteten definert i en separat fil. Den separate filen kan deretter gjenbrukes på tvers av flere applikasjoner ved bare å inkludere den filen.
Dette er vanligvis konseptet Ta med utsagn som er tilgjengelige i programmerings språk som .Net og Java.
Denne veiledningen ser på andre måter filer (filer som inneholder eksterne HTML kode) kan inkluderes i hoved-HTML-filen.
Klientsiden inkluderer
En av de vanligste måtene å inkludere HTML-kode på er via JavaManus. JavaScript er et programmeringsspråk som kan brukes til å manipulere innholdet på en HTML-side i farten. Derfor, JavaSkript kan også brukes til å inkludere kode fra andre filer.
Trinnene nedenfor viser hvordan dette kan oppnås.
Trinn 1) Definer en fil kalt Sub.html og legg til følgende kode i filen.
<div> This is an included file </div>
Trinn 2) Lag en fil kalt Sample.html, som er hovedprogramfilen din, og legg til kodebiten nedenfor.
Nedenfor er hovedaspektene å merke seg om koden nedenfor,
- I body-taggen er det en div-tag som har en ID for innhold. Dette er stedet der koden fra den eksterne filen 'Sub.html' vil bli satt inn.
- Det er en referanse til et jQuery-skript. jQuery er et skriptspråk bygget oppå JavaSkript som gjør DOM-manipulering enda enklere.
- på JavaSkriptfunksjonen, det finnes en setning '$(“#Content”).load(“Sub.html”);' som fører til at koden i filen Sub.html injiseres i div-taggen som har ID-en Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Serverside inkluderer
Server Side Includes er også tilgjengelige for å inkludere en felles kodebit på hele et nettsted. Dette gjøres vanligvis for å inkludere innhold i delene nedenfor av et HTML-dokument.
- Sideoverskrift
- Sidebunntekst
- Navigasjonsmeny.
For at en webserver skal kunne gjenkjenne en Server Side Include, må filnavnene ha spesielle filtyper. De aksepteres vanligvis av webserveren, for eksempel .shtml, .stm, .shtm, .cgi.
Direktivet som brukes for å inkludere innhold er «include-direktivet». Et eksempel på include-direktivet er vist nedenfor:
<!--#include virtual="navigation.cgi" -->
- Ovennevnte direktiv tillater at innholdet i ett dokument kan inkluderes i et annet.
- Den "virtuelle" kommandoen over koden brukes til å spesifisere målet i forhold til domeneroten til applikasjonen.
- Til den virtuelle parameteren er det også filparameteren som kan brukes. "Fil"-parametrene brukes når man trenger å spesifisere banen i forhold til katalogen til den gjeldende filen.
OBS:
Den virtuelle parameteren brukes til å spesifisere filen (HTML-side, tekstfil, skript osv.) som må inkluderes. Hvis webserverprosessen ikke har tilgang til å lese filen eller utføre skriptet, vil include-kommandoen mislykkes. Det "virtuelle" ordet er et nøkkelord som må plasseres i inkluderingsdirektivet.
Hvordan inkludere HTML-fil i AngularJS
AngularJS gir funksjonen til å inkludere funksjonaliteten fra andre AngularJS-filer ved å bruke ng-include Direktiver.
Hovedformålet med «ng-include»-direktivet er å hente, kompilere og inkludere et eksternt HTML-fragment i hovedapplikasjonen for AngularJS.
Versjonsmerknad: AngularJS 1.x forlot langtidsstøtten 31. desember 2021, og rammeverksteamet oppgir at AngularJS-støtten er offisielt avsluttet i januar 2022, så ingen utgivelser eller sikkerhetsoppdateringer følger. Hvert trinn og kodeblokk nedenfor forblir nøyaktig slik den er publisert, som den historiske referansen. Moderne Angular har ingen direkte erstatning: markup er satt sammen av komponenter, og et fragment plukket under kjøretid gjengis med ng-container og ngComponentOutlet.
La oss se på kodebasen nedenfor og forklare hvordan dette kan oppnås ved hjelp av AngularJS.
Trinn 1) la oss skrive koden nedenfor i en fil som heter Table.html. Dette er filen som vil bli injisert i hovedapplikasjonsfilen vår ved å bruke ng-include-direktivet.
Kodestykket nedenfor antar at det finnes en omfangsvariabel kalt «tutorial». Deretter bruker den ng-gjenta direktiv, som går gjennom hvert emne i variabelen «tutorial» og viser verdiene for «Navn» og «Description' nøkkel-verdi-par.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Trinn 2) La oss skrive koden nedenfor i en fil som heter Main.html. Dette er et enkelt AngularJS-program som har følgende aspekter.
- Bruk "ng-include-direktivet" for å injisere koden i den eksterne filen 'Table.html'. Uttalelsen er uthevet med fet skrift i koden nedenfor. Så div-taggen ' ' erstattes av hele koden i 'Table.html'-filen.
- på controller, opprettes en «veiledningsvariabel» som en del av $scope-objektet. Denne variabelen inneholder en liste over nøkkelverdipar.
I vårt eksempel er nøkkelverdiparene
- Navn – Dette angir navnet på et emne som kontroller, modeller og direktiver.
- Description – Dette gir en beskrivelse av hvert emne
Opplæringsvariabelen er også tilgjengelig i 'Table.html'-filen.
<!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 utfører koden ovenfor, vil du få følgende utgang.
Produksjon:
Skjermbildet nedenfor viser det gjengitte resultatet: nettleserfanen har tittelen Hendelsesregistrering, overskriften er plassert over den injiserte tabellen, og de tre radene er trukket fra veiledningsarrayet i Main.html gjennom den delvise tabellen. Det kommenterte skjermbildet staver overskriften Gur99 mens koden skriver Guru99.
ng-include-attributter: src, onload og autoscroll
Utover filnavnet godtar direktivet to valgfrie attributter, og det kan skrives på tre måter: som et attributt på et hvilket som helst element, som et <ng-include> element, eller som en CSS-klasse. Referansen nedenfor følger den offisielle ngInkluder dokumentasjon.
| Egenskap | Påkrevd | Hva det gjør |
|---|---|---|
| src eller ng-include | Ja | Uttrykk som evalueres til malen URL |
| last ned | Nei | Uttrykk evalueres hver gang en ny del av et uttrykk er ferdig lastet |
| automatisk rulling | Nei | Kaller $anchorScroll etter at innholdet er lastet inn; utelatelse av attributtet deaktiverer rulling |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Den vanligste feilen følger fra første rad: src tar en uttrykk, ikke en ren streng. En litteral sti trenger derfor sine egne anførselstegn inne i attributtet, og det er derfor eksemplet ovenfor lyder ng-include="'Table.html'". Skrive ng-include="Table.html" får AngularJS til å evaluere Table som en omfangsegenskap, finn ingenting, og la elementet stå tomt.
Hvorfor ng-include oppretter et nytt underordnet omfang
Direktivet limer ikke inn markup i det omkringliggende omfanget. Hver inkludering oppretter et nytt underordnet element. omfang som arver prototypisk fra omfanget den ble deklarert i, og det ene faktum forklarer de fleste bindende overraskelser.
Lesingen fungerer som forventet. Delen ovenfor leses tutorial rett fra foreldrene, og det er derfor ng-repeat finner matrisen. Det er ved å skrive den går i stykker: når en partiell verdi tilordnes til en primitiv verdi, som med ng-model="topic", AngularJS oppretter topic på barneomfanget og den overordnede kopien endres aldri.
To vaner unngår fellen:
- Bind gjennom et objekt, som i
ng-model="data.topic", slik at forelder og barn når samme referanse. - Hold tilstanden i en kontroller eller en tjeneste og eksponer funksjoner i stedet for nakne primitiver.
Inkluderingen avgir også $includeContentRequested, $includeContentLoaded og $includeContentError, slik at en forelder kan reagere gjennom $scope.$on uten å nå inn i barnets omfang i det hele tatt.
Slik fikser du en tom eller mislykket ng-include
En inkludering som ikke gjengir noe mislykkes vanligvis av én av flere grunner. Jobb deg gjennom dem i denne rekkefølgen.
- Sjekk sitatene. Et litteralt filnavn trenger enkle anførselstegn i attributtverdien. Uten dem blir uttrykket oppløst til udefinert, og ingen forespørsel sendes noen gang.
- Server siden over HTTP. Direktivet utsteder en XHR for den delvise filen, så åpning av Main.html direkte fra disk via en filadresse mislykkes i de fleste nettlesere. Enhver lokal webserver fjerner dette.
- Bekreft at banen løser seg. Se etter forespørselen i nettverkspanelet. En 404-feil betyr at banen er relativ til siden som er vert for inkluderingen, ikke til den delvise siden som refererer til den.
- Respekter regelen om samme opprinnelse. Som standard er malen URL må samsvare med domenet og protokollen til applikasjonsdokumentet, fordi AngularJS sender det gjennom $sce.getTrustedResourceUrlEn mal fra et annet sted trenger en oppføring i den klarerte ressursen. URL liste, eller en eksplisitt trustAsResourceUrl-wrapper, og den eksterne serveren må fortsatt sende CORS-overskrifter.
- Lytt etter feilen. $includeContentError utløses når svarstatusen faller utenfor 200 til 299, og gjør et stille tomt område om til en melding som er verdt å logge.
En annen årsak er lett å overse. AngularJS beholder alle hentede partielle filer i $templateCache, slik at en redigert fil kan fortsette å vise foreldet markup inntil hurtigbufferoppføringen fjernes eller siden lastes inn på nytt fra kildekoden. Når et fragment trenger sin egen oppførsel i stedet for bare markup, vil en tilpasset direktiv med sin egen mal og isolerte omfang er det bedre verktøyet.
