AngularJS ng-include: Inkluder HTML-filer med eksempel

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

ng-include i AngularJS henter, kompilerer og indsætter et eksternt HTML-fragment på hovedsiden, så delt markup, såsom en tabel, en header eller en footer, findes i én genanvendelig delvis fil.

  • 🔘 Direktiv rolle: ng-include henter et eksternt fragment og indsætter det som underordnede noder til dets værtselement.
  • ☑️ Citatsti: src-værdien er et udtryk, så et literalt filnavn skal bruge enkelte anførselstegn inde i attributten.
  • ✅ Udarbejdet eksempel: Table.html gengives via ng-repeat, når Main.html injicerer den i controller-div'en.
  • 🧪 Nyt underordnet omfang: Hver include opbygger et underordnet scope, så primitive bindinger kræver punktumnotation.
  • 🛠️ Blankt inkluderer: Regler for samme oprindelse, $sce og filadgang forklarer de fleste tomme resultater.
  • 📊 Versionsnotat: AngularJS-understøttelse ophørte i januar 2022; moderne Angular komponerer i stedet komponenter.
Læs mere

ng-include-direktivet i AngularJS indsprøjter en ekstern HTML-fil i hovedskabelonen

Som standard giver HTML ikke mulighed for at inkludere kode på klientsiden fra andre filer. Det er normalt en god praksis i ethvert programmeringssprog at distribuere funktionalitet på tværs af forskellige filer til enhver applikation.

For eksempel, hvis du havde logik til numeriske operationer, ville du normalt ønske at have denne funktion defineret i en separat fil. Den separate fil kunne derefter genbruges på tværs af flere applikationer ved blot at inkludere den fil.

Dette er normalt begrebet Medtag udsagn som er tilgængelige i programmeringssprog såsom .Net og Java.

Denne vejledning ser på andre måder, hvorpå filer (filer, der indeholder eksterne HTML kode) kan inkluderes i den primære HTML-fil.

Klientsiden inkluderer

En af de mest almindelige måder at inkludere HTML-kode på er via JavaManuskript. JavaScript er et programmeringssprog, som kan bruges til at manipulere indholdet på en HTML-side i farten. Derfor, JavaScriptet kan også bruges til at inkludere kode fra andre filer.

Nedenstående trin viser, hvordan dette kan opnås.

Trin 1) Definer en fil kaldet Sub.html og tilføj følgende kode til filen.

<div>
	This is an included file
</div>

Trin 2) Opret en fil kaldet Sample.html, som er din primære programfil, og tilføj nedenstående kodestykke.

Nedenfor er de vigtigste aspekter at bemærke om nedenstående kode,

  1. I body-tagget er der et div-tag, som har et id på Content. Dette er stedet, hvor koden fra den eksterne fil 'Sub.html' vil blive indsat.
  2. Der er en reference til et jQuery-script. jQuery er et scriptsprog bygget oven på JavaScript der gør DOM-manipulation endnu nemmere.
  3. I JavaScriptfunktionen, der er en sætning '$(“#Content”).load(“Sub.html”);' som får koden i filen Sub.html til at blive indsprøjtet i div-tagget, som har id'et 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 Inkluderer

Server Side Includes er også tilgængelige for at inkludere et fælles stykke kode på hele et websted. Dette gøres normalt for at inkludere indhold i nedenstående dele af et HTML-dokument.

  1. Sideoverskrift
  2. Sidefod
  3. Navigationsmenu.

For at en webserver kan genkende en Server Side Include, har filnavnene særlige filtypenavne. De accepteres normalt af webserveren, såsom .shtml, .stm, .shtm, .cgi.

Direktivet, der bruges til at inkludere indhold, er "include-direktivet". Et eksempel på include-direktivet er vist nedenfor:

<!--#include virtual="navigation.cgi" -->
  • Ovenstående direktiv tillader, at indholdet af et dokument kan indgå i et andet.
  • Den "virtuelle" kommando ovenfor bruges til at angive målet i forhold til applikationens domænerod.
  • Til den virtuelle parameter er der også filparameteren, som kan bruges. "Fil"-parametrene bruges, når man skal angive stien i forhold til mappen for den aktuelle fil.

Bemærk:

Den virtuelle parameter bruges til at angive den fil (HTML-side, tekstfil, script osv.), der skal inkluderes. Hvis webserverprocessen ikke har adgang til at læse filen eller udføre scriptet, vil include-kommandoen mislykkes. Det 'virtuelle' ord er et nøgleord, der skal placeres i inkluderingsdirektivet.

Sådan inkluderes HTML-fil i AngularJS

AngularJS giver funktionen til at inkludere funktionaliteten fra andre AngularJS-filer ved hjælp af ng-include Direktiv.

Det primære formål med "ng-include-direktivet" er at hente, kompilere og inkludere et eksternt HTML-fragment i den primære AngularJS-applikation.

Versionsnotat: AngularJS 1.x forlod langtidssupport den 31. december 2021, og framework-teamet oplyser, at AngularJS-support officielt ophørt i januar 2022, så der følger ingen udgivelser eller sikkerhedsrettelser. Hvert trin og kodeblok nedenfor forbliver nøjagtigt som udgivet, som den historiske reference. Moderne Angular har ingen direkte erstatning: markup er sammensat af komponenter, og et fragment valgt under kørsel gengives med ng-container og ngComponentOutlet.

Lad os se på nedenstående kodebase og forklare, hvordan dette kan opnås ved hjælp af AngularJS.

Trin 1) lad os skrive nedenstående kode i en fil kaldet Table.html. Dette er filen, som vil blive indsat i vores hovedapplikationsfil ved hjælp af ng-include-direktivet.

Kodestykket nedenfor antager, at der er en scope-variabel kaldet "tutorial". Den bruger derefter ng-gentag direktiv, som gennemgår hvert emne i variablen "tutorial" og viser værdierne for 'Navn' og 'Description' nøgle-værdi-par.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Description }}</td>
    </tr>
</table>
Gå ikke glip af:

Trin 2) Lad os skrive nedenstående kode i en fil kaldet Main.html. Dette er en simpel AngularJS-applikation, der har følgende aspekter

  1. Brug "ng-include-direktivet" til at indsætte koden i den eksterne fil 'Table.html'. Udsagnet er fremhævet med fed skrift i nedenstående kode. Så div-tagget ' ' erstattes af hele koden i filen 'Table.html'.
  2. I controller, oprettes en "tutorial"-variabel som en del af $scope-objektet. Denne variabel indeholder en liste over nøgle-værdi-par.

I vores eksempel er nøgleværdiparrene

  1. Navn – Dette angiver navnet på et emne som controllere, modeller og direktiver.
  2. Description – Dette giver en beskrivelse af hvert emne

Selvstudievariablen er også tilgængelig 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 udfører ovenstående kode, får du følgende output.

Produktion:

Optagelsen nedenfor viser det gengivne resultat: browserfanen har titlen Begivenhedsregistrering, overskriften sidder over den indsprøjtede tabel, og de tre rækker er trukket fra tutorial-arrayet i Main.html gennem den delvise [delvis/delvis]. Det kommenterede skærmbillede staver overskriften Gur99, mens koden skriver [kode/fil/etc.]. Guru99.

Browseroutput fra AngularJS ng-include-eksemplet, der viser emnetabellen injiceret fra Table.html

ng-include Attributter: src, onload og autoscroll

Ud over filnavnet accepterer direktivet to valgfrie attributter, og det kan skrives på tre måder: som en attribut på et hvilket som helst element, som en <ng-include> element eller som en CSS-klasse. Referencen nedenfor følger den officielle ngInkluder dokumentation.

Attribut påkrævet Hvad gør den
src eller ng-include Ja Udtryk, der evalueres til skabelonen URL
påfyldning Ingen Udtryk evalueres hver gang en ny del af et udtryk er færdigindlæst
autoscroll Ingen Kalder $anchorScroll efter indholdet er indlæst; udeladelse af attributten deaktiverer rulning 
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div>
<ng-include src="templateUrl"></ng-include>

Den mest almindelige fejl følger fra første række: src tager en udtryk, ikke en almindelig streng. En literal sti skal derfor bruge sine egne anførselstegn i attributten, hvilket er grunden til, at eksemplet ovenfor lyder ng-include="'Table.html'". Skrivning ng-include="Table.html" får AngularJS til at evaluere Table som en scope-egenskab, find nothing, og lad elementet være tomt.

Hvorfor ng-include opretter et nyt underordnet omfang

Direktivet indsætter ikke markup i det omgivende omfang. Hver inkludering opretter et nyt underordnet område. rækkevidde der arver prototypisk fra det omfang, det blev erklæret i, og den ene kendsgerning forklarer de fleste bindende overraskelser.

Læsning fungerer som forventet. Den delvise del ovenfor læses tutorial direkte fra forælderen, hvilket er grunden til ng-repeat finder arrayet. Det er ved at skrive, at det går i stykker: når en partielværdi tildeler en primitiv værdi, som med ng-model="topic", AngularJS opretter topic på det underordnede omfang, og den overordnede kopi ændres aldrig.

To vaner undgår fælden:

  • Bind gennem en genstand, som i ng-model="data.topic", så forælder og barn når frem til den samme reference.
  • Hold tilstanden i en controller eller en tjeneste og eksponér funktioner i stedet for nøgne primitiver.

Inkluderer også udsender $includeContentRequested, $includeContentLoaded og $includeContentError, så en forælder kan reagere via $scope.$on uden overhovedet at nå ind i barnets omfang.

Sådan retter du en tom eller mislykket ng-include

En include, der ikke gengiver noget, fejler normalt af en af ​​flere årsager. Arbejd dig igennem dem i denne rækkefølge.

  1. Tjek citaterne. Et filnavn med en bestemt specifik betydning skal have enkelte anførselstegn i attributværdien. Uden dem opløses udtrykket til udefineret, og der sendes aldrig nogen anmodning.
  2. Vis siden via HTTP. Direktivet udsteder en XHR for den delvise fil, så åbning af Main.html direkte fra disken via en filadresse mislykkes i de fleste browsere. Enhver lokal webserver fjerner dette.
  3. Bekræft at stien løser sig. Hold øje med netværkspanelet for anmodningen. En 404-fejl betyder, at stien er relativ til den side, der er vært for include-filen, ikke til den delvise fil, der refererer til den.
  4. Respekter reglen om samme oprindelse. Som standard er skabelonen URL skal matche domænet og protokollen i applikationsdokumentet, fordi AngularJS sender det igennem $sce.getTrustedResourceUrlEn skabelon fra et andet sted skal have en post i den betroede ressource. URL liste eller en eksplicit trustAsResourceUrl-wrapper, og den eksterne server skal stadig sende CORS-headere.
  5. Lyt efter fiaskoen. $includeContentError udløses, når svarstatussen falder uden for 200 til 299, hvilket forvandler et lydløst tomt område til en besked, der er værd at logføre.

Endnu en årsag er let at overse. AngularJS gemmer alle hentede partielle filer i $templateCache, så en redigeret fil kan fortsætte med at vise forældet markup, indtil cache-posten fjernes, eller siden genindlæses fra kildekoden. Når et fragment kræver sin egen adfærd i stedet for kun markup, vil en brugerdefineret direktiv med sin egen skabelon og isolerede omfang er det bedre værktøj.

Ofte Stillede Spørgsmål

ng-include indsætter et fragment, du navngiver dig selv, hvor som helst på siden. ng-view gengiver den skabelon, router kort til den nuværende URL, og kun én ng-view hører hjemme i et layout.

Nej. En delvis tekst indeholder kun et fragment.ping I html-, head- eller body-tags efterlader det tilfældige elementer, fordi markup'en indsættes som underordnede noder til værtselementet i stedet for at blive parset som et dokument.

Nej. Fragmentet kompileres og indsættes som DOM-noder, så indlejrede scriptelementer udføres aldrig. Indlæs delte scripts fra værtsiden, eller flyt adfærden til en controller eller en direktiv.

Ja. Når ngAnimate er indlæst, udløser direktivet en enter-animation på det indgående fragment og en leave-animation på det udgående, og de to kører samtidigt, når kildeudtrykket ændres.

Ja. Fordi værdien er et udtryk, vil det at pege den på en scope-egenskab ombytte fragmentet, når den ændres. Beskyt elementet med ng - hvis det er tilfældet, indlæses der intet, før egenskaben indeholder en reel sti.

Der findes ingen ækvivalent. Genanvendelig markup bliver en komponent, og et fragment valgt under kørsel gengives via ngComponentOutlet eller ngTemplateOutlet inde i en ng-container.

Sprogmodeller læser et ældre skabelonsæt og grupperer partialer, controllere og bindinger i kandidatkomponenter og foreslår derefter en migreringsrækkefølge. Behandl outputtet som et første udkast, da omfangsarv sjældent knyttes rent til komponentinput.

GitHub Copilot Agenttilstand konverterer en partiel komponent til en selvstændig komponent med typebestemte input og omskriver værtsskabelonen, men de genererede bindinger og tests kræver stadig menneskelig gennemgang.

Opsummer dette indlæg med: