AngularJS ng-include: Include fișiere HTML cu exemplu
James Hartman
⚡ Rezumat inteligent
Funcția ng-include din AngularJS preia, compilează și injectează un fragment HTML extern în pagina principală, astfel încât markup-ul partajat, cum ar fi un tabel, un antet sau un subsol, se află într-un fișier parțial reutilizabil.
În mod implicit, HTML nu oferă posibilitatea de a include codul client din alte fișiere. În mod normal, este o practică bună în orice limbaj de programare să distribuiți funcționalitatea în diferite fișiere pentru orice aplicație.
De exemplu, dacă ați avea logică pentru operații numerice, în mod normal ați dori să aveți acea funcționalitate definită într-un fișier separat. Fișierul separat ar putea fi apoi reutilizat în mai multe aplicații prin simpla includere a fișierului respectiv.
Acesta este în mod normal conceptul de Includeți declarații care sunt disponibile în limbaje de programare cum ar fi .Net și Java.
Acest tutorial analizează alte moduri în care fișierele (fișiere care conțin fișiere externe) HTML cod) poate fi inclus în fișierul HTML principal.
Partea clientului include
Una dintre cele mai comune metode de a include cod HTML este prin JavaScenariul. JavaScenariu este un limbaj de programare care poate fi folosit pentru a manipula conținutul dintr-o pagină HTML din mers. Prin urmare, JavaScriptul poate fi folosit și pentru a include cod din alte fișiere.
Pașii de mai jos arată cum se poate realiza acest lucru.
Pas 1) Definiți un fișier numit Sub.html și adăugați următorul cod la fișier.
<div> This is an included file </div>
Pas 2) Creați un fișier numit Sample.html, care este fișierul principal al aplicației și adăugați fragmentul de cod de mai jos.
Mai jos sunt principalele aspecte de reținut despre codul de mai jos,
- În eticheta body, există o etichetă div care are un ID de Conținut. Acesta este locul unde va fi inserat codul din fișierul extern „Sub.html”.
- Există o referință la un script jQuery. jQuery este un limbaj de scripting construit pe baza JavaScript care facilitează și mai mult manipularea DOM-ului.
- În JavaÎn funcția de script, există o instrucțiune „$(“#Content”).load(“Sub.html”);” care determină injectarea codului din fișierul Sub.html în eticheta div care are id-ul 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 Includes
Server Side Includes sunt, de asemenea, disponibile pentru a include o bucată comună de cod pe un site. Acest lucru se face în mod normal pentru includerea conținutului în părțile de mai jos ale unui document HTML.
- Antetul paginii
- Subsolul paginii
- Meniu de navigatie.
Pentru ca un server web să recunoască un Server Side Include, numele fișierelor au extensii speciale. Acestea sunt de obicei acceptate de serverul web, cum ar fi .shtml, .stm, .shtm, .cgi.
Directiva utilizată pentru includerea conținutului este „directiva include”. Un exemplu de directivă include este prezentat mai jos:
<!--#include virtual="navigation.cgi" -->
- Directiva de mai sus permite ca conținutul unui document să fie inclus în altul.
- Comanda „virtuală” de mai sus a codului este utilizată pentru a specifica ținta în raport cu rădăcina domeniului aplicației.
- De asemenea, la parametrul virtual, există și parametrul fișier care poate fi utilizat. Parametrii „fișier” sunt utilizați atunci când trebuie să specificați calea relativă la directorul fișierului curent.
Notă:
Parametrul virtual este utilizat pentru a specifica fișierul (pagină HTML, fișier text, script etc.) care trebuie inclus. Dacă procesul serverului web nu are acces pentru a citi fișierul sau a executa scriptul, comanda include va eșua. Cuvântul „virtual” este un cuvânt cheie care trebuie plasat în directiva include.
Cum să includeți fișierul HTML în AngularJS
AngularJS oferă funcția de includere a funcționalității din alte fișiere AngularJS utilizând ng-include directivă.
Scopul principal al „directivei ng-include” este de a prelua, compila și include un fragment HTML extern în aplicația AngularJS principală.
Notă privind versiunea: AngularJS 1.x a părăsit perioada de suport pe termen lung pe 31 decembrie 2021, iar echipa de framework declară că Suportul AngularJS s-a încheiat oficial în ianuarie 2022, deci nu urmează versiuni sau patch-uri de securitate. Fiecare pas și bloc de cod de mai jos rămâne exact așa cum a fost publicat, ca referință istorică. Angular modern nu oferă niciun înlocuitor direct: markup-ul este compus din componente, iar un fragment selectat la momentul execuției este redat cu ng-container și ngComponentOutlet.
Să analizăm baza de cod de mai jos și să explicăm cum se poate realiza acest lucru folosind AngularJS.
Pas 1) haideți să scriem codul de mai jos într-un fișier numit Table.html. Acesta este fișierul care va fi injectat în fișierul nostru principal de aplicație folosind directiva ng-include.
Fragmentul de cod de mai jos presupune că există o variabilă de domeniu numită „tutorial”. Apoi folosește ng-repetă directivă, care parcurge fiecare subiect din variabila „tutorial” și afișează valorile pentru „Nume” și „Descriptpereche cheie-valoare ion'.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Pas 2) Să scriem codul de mai jos într-un fișier numit Main.html. Aceasta este o aplicație AngularJS simplă care are următoarele aspecte
- Utilizați „directiva ng-include” pentru a injecta codul în fișierul extern „Table.html”. Declarația a fost evidențiată cu caractere aldine în codul de mai jos. Deci eticheta div' ' va fi înlocuit cu întregul cod din fișierul „Table.html”.
- În controlor, o variabilă „tutorial” este creată ca parte a obiectului $scope. Această variabilă conține o listă de perechi cheie-valoare.
În exemplul nostru, perechile valori-cheie sunt
- Nume – Acesta indică numele unui subiect, cum ar fi Controlere, Modele și Directive.
- Description – Aceasta oferă o descriere a fiecărui subiect
Variabila tutorial este accesată și în fișierul „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>
Când executați codul de mai sus, veți obține următoarea ieșire.
producție:
Captura de mai jos arată rezultatul redat: fila browserului are titlul Înregistrare eveniment, titlul se află deasupra tabelului injectat, iar cele trei rânduri sunt extrase din matricea tutorialului din Main.html prin intermediul partialului. Captura de ecran adnotată scrie titlul Gur99 în timp ce codul scrie Guru99.
Atribute ng-include: src, onload și autoscroll
Dincolo de numele fișierului, directiva acceptă două atribute opționale și poate fi scrisă în trei moduri: ca atribut pe orice element, ca un <ng-include> element sau ca o clasă CSS. Referința de mai jos respectă instrucțiunile oficiale Documentație ngInclude.
| Atribut | Necesar | Ce face |
|---|---|---|
| src sau ng-include | Da | Expresie care evaluează conform șablonului URL |
| onload | Nu | Expresia este evaluată de fiecare dată când o nouă încărcare parțială termină |
| defilare automată | Nu | Apelează $anchorScroll după încărcarea conținutului; omiterea atributului dezactivează derularea |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Cea mai frecventă greșeală rezultă din primul rând: src ia o expresie, nu un șir simplu. Prin urmare, o cale literală are nevoie de propriile ghilimele în interiorul atributului, motiv pentru care exemplul de mai sus este ng-include="'Table.html'". Scris ng-include="Table.html" face ca AngularJS să evalueze Table ca proprietate de domeniu, nu găsește nimic și lasă elementul gol.
De ce ng-include creează un nou domeniu de aplicare pentru copii
Directiva nu lipește markup-ul în domeniul de aplicare înconjurător. Fiecare includere creează un nou copil. domeniu care moștenește prototipic din domeniul de aplicare în care a fost declarat și acest fapt explică majoritatea surprizelor neplăcute.
Citirea funcționează conform așteptărilor. Citirea parțială de mai sus tutorial direct de la părinte, motiv pentru care ng-repeat găsește matricea. Scrierea este locul unde se întrerupe: atunci când o atribuie parțială unei primitive, ca în cazul ng-model="topic", AngularJS creează topic pe domeniul de aplicare al copilului, iar copia părinte nu se modifică niciodată.
Două obiceiuri evită capcana:
- Legați printr-un obiect, ca în
ng-model="data.topic", deci părintele și fiul ajung la aceeași referință. - Menține starea într-un controler sau un serviciu și expune funcții în loc de primitive goale.
Inclusiunea emite, de asemenea, $includeContentRequested, $includeContentLoaded și $includeContentError, astfel încât un părinte să poată reacționa prin $scope.$on fără a ajunge deloc în domeniul de aplicare al copilului.
Cum să remediați un fișier ng-include gol sau eșuat
O includere care nu redă nimic eșuează de obicei dintr-unul din câteva motive. Parcurgeți-le în această ordine.
- Verificați citatele. Un nume de fișier literal necesită ghilimele simple în interiorul valorii atributului. Fără acestea, expresia se rezolvă la nedefinit și nicio solicitare nu este trimisă vreodată.
- Serviți pagina prin HTTP. Directiva emite o eroare XHR pentru fișierul parțial, așadar deschiderea fișierului Main.html direct de pe disc printr-o adresă de fișier eșuează în majoritatea browserelor. Orice server web local șterge această problemă.
- Confirmați că calea se rezolvă. Urmăriți panoul de rețea pentru solicitare. O eroare 404 înseamnă că calea este relativă la pagina care găzduiește includerea, nu la elementul parțial care o face referire.
- Respectați regula aceleiași origini. În mod implicit, șablonul URL trebuie să corespundă domeniului și protocolului documentului aplicației, deoarece AngularJS îl transmite prin $sce.getTrustedResourceUrlUn șablon din altă parte necesită o intrare în resursa de încredere. URL listă sau un wrapper explicit trustAsResourceUrl, iar serverul la distanță trebuie să trimită în continuare antete CORS.
- Ascultă eșecul. `$includeContentError` se declanșează ori de câte ori starea răspunsului nu este între 200 și 299, transformând o zonă goală în mod silențios într-un mesaj care merită înregistrat.
Încă o cauză este ușor de trecut cu vederea. AngularJS păstrează fiecare fragment parțial preluat în $templateCache, astfel încât un fișier editat poate continua să livreze markup învechit până când intrarea din cache este eliminată sau pagina este reîncărcată de la sursă. Când un fragment are nevoie de un comportament propriu, mai degrabă decât doar de markup, un directivă personalizată cu propriul șablon și domeniu de aplicare izolat este instrumentul mai bun.
