AngularJS ng-include: Includi file HTML con esempio
James Hartmann
⚡ Riepilogo intelligente
In AngularJS, `ng-include` recupera, compila e inserisce un frammento HTML esterno nella pagina principale, in modo che il markup condiviso, come una tabella, un'intestazione o un piè di pagina, risieda in un unico file parziale riutilizzabile.
Per impostazione predefinita, l'HTML non fornisce la possibilità di includere codice lato client da altri file. Normalmente è una buona pratica in qualsiasi linguaggio di programmazione distribuire le funzionalità su vari file per qualsiasi applicazione.
Ad esempio, se avessi la logica per le operazioni numeriche, normalmente vorresti che quella funzionalità fosse definita in un file separato. Quel file separato potrebbe quindi essere riutilizzato in più applicazioni includendo semplicemente quel file.
Questo è normalmente il concetto di Includi dichiarazioni che sono disponibili in linguaggi di programmazione come .Net e Java.
Questo tutorial esamina altri modi in cui i file (file che contengono elementi esterni) HTML il codice) può essere incluso nel file HTML principale.
Il lato client include
Uno dei modi più comuni per includere il codice HTML è tramite JavaScript. JavaCopione è un linguaggio di programmazione che può essere utilizzato per manipolare al volo il contenuto di una pagina HTML. Quindi, JavaGli script possono essere utilizzati anche per includere codice da altri file.
I passaggi seguenti mostrano come è possibile raggiungere questo obiettivo.
Passo 1) Definisci un file denominato Sub.html e aggiungi il seguente codice al file.
<div> This is an included file </div>
Passo 2) Crea un file chiamato Sample.html, che è il file dell'applicazione principale e aggiungi lo snippet di codice seguente.
Di seguito sono riportati gli aspetti principali da notare sul codice seguente,
- Nel tag body è presente un tag div che ha l'ID Content. Questo è il posto dove verrà inserito il codice del file esterno 'Sub.html'.
- C'è un riferimento a uno script jQuery. jQuery è un linguaggio di scripting costruito sopra JavaScript che semplifica ulteriormente la manipolazione del DOM.
- Nel JavaNella funzione script è presente l'istruzione '$(“#Content”).load(“Sub.html”);' che fa sì che il codice contenuto nel file Sub.html venga inserito nel tag div con 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 Includes
Sono disponibili anche Server Side Include per includere una parte comune di codice in un sito. Questo viene normalmente fatto per includere contenuto nelle parti seguenti di un documento HTML.
- Intestazione di pagina
- Piè di pagina
- Menu di navigazione.
Affinché un server web riconosca un Server Side Include, i nomi dei file devono avere estensioni speciali. Solitamente, i server web accettano estensioni come .shtml, .stm, .shtm e .cgi.
La direttiva utilizzata per includere contenuti è la "direttiva include". Un esempio della direttiva include è mostrato di seguito:
<!--#include virtual="navigation.cgi" -->
- La suddetta direttiva consente di includere il contenuto di un documento in un altro.
- Il comando "virtuale" sopra riportato nel codice viene utilizzato per specificare la destinazione relativa alla radice del dominio dell'applicazione.
- Inoltre, oltre al parametro virtuale, c'è anche il parametro file che può essere utilizzato. I parametri “file” vengono utilizzati quando è necessario specificare il percorso relativo alla directory del file corrente.
Nota:
Il parametro virtual viene utilizzato per specificare il file (pagina HTML, file di testo, script, ecc.) da includere. Se il processo del server Web non ha accesso per leggere il file o eseguire lo script, il comando include fallirà. La parola "virtuale" è una parola chiave che deve essere inserita nella direttiva include.
Come includere il file HTML in AngularJS
AngularJS fornisce la funzione per includere la funzionalità da altri file AngularJS utilizzando ng-include Direttive.
Lo scopo principale della direttiva "ng-include" è quello di recuperare, compilare e includere un frammento HTML esterno nell'applicazione AngularJS principale.
Nota sulla versione: AngularJS 1.x ha lasciato il supporto a lungo termine il 31 dicembre 2021 e il team del framework dichiara che Il supporto per AngularJS è ufficialmente terminato. nel gennaio 2022, quindi non seguono rilasci o patch di sicurezza. Ogni passaggio e blocco di codice sottostante rimane esattamente come pubblicato, come riferimento storico. Angular moderno non fornisce alcun sostituto diretto: il markup è composto da componenti e un frammento selezionato in fase di esecuzione viene renderizzato con ng-container e ngComponentOutlet.
Analizziamo il codice sorgente riportato di seguito e spieghiamo come questo risultato può essere ottenuto utilizzando AngularJS.
Passo 1) scriviamo il codice seguente in un file chiamato Table.html. Questo è il file che verrà inserito nel file della nostra applicazione principale utilizzando la direttiva ng-include.
Il seguente frammento di codice presuppone che esista una variabile di ambito chiamata "tutorial". Quindi utilizza il ng-ripetere direttiva, che passa attraverso ogni argomento nella variabile “tutorial” e visualizza i valori per 'Nome' e 'Descriptcoppia chiave-valore ion'.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Passo 2) Scriviamo il codice seguente in un file chiamato Main.html. Questa è una semplice applicazione AngularJS che presenta i seguenti aspetti
- Utilizzare la "direttiva ng-include" per inserire il codice nel file esterno "Table.html". La dichiarazione è stata evidenziata in grassetto nel codice seguente. Quindi il tag div ' ' verrà sostituito dall'intero codice nel file "Table.html".
- Nel controlloreViene creata una variabile "tutorial" come parte dell'oggetto $scope. Questa variabile contiene un elenco di coppie chiave-valore.
Nel nostro esempio, le coppie chiave-valore sono
- Nome: indica il nome di un argomento come Controller, Modelli e Direttive.
- Descriptione – Fornisce una descrizione di ciascun argomento
È possibile accedere alla variabile tutorial anche nel file "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>
Quando esegui il codice sopra, otterrai il seguente output.
Uscita:
L'immagine qui sotto mostra il risultato renderizzato: la scheda del browser riporta il titolo Registrazione all'evento, l'intestazione si trova sopra la tabella iniettata e le tre righe vengono disegnate dall'array tutorial in Main.html tramite il partial. Lo screenshot annotato riporta l'intestazione Gur99 mentre il codice scrive Guru99
ng-include Attributi: src, onload e autoscroll
Oltre al nome del file, la direttiva accetta due attributi opzionali e può essere scritta in tre modi: come attributo su qualsiasi elemento, come un <ng-include> elemento, o come classe CSS. Il riferimento seguente segue l'ufficiale documentazione di ngInclude.
| Attributo | Obbligatorio | Ciò che fa |
|---|---|---|
| src o ng-include | Si | Espressione che si valuta nel modello URL |
| caricare | Non | Espressione valutata ogni volta che un nuovo caricamento parziale termina |
| scorrimento automatico | Non | Chiama $anchorScroll dopo il caricamento del contenuto; omettendo l'attributo si disabilita lo scorrimento. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
L'errore più comune si trova nella prima riga: src prende un espressione, non una semplice stringa. Un percorso letterale necessita quindi delle proprie virgolette all'interno dell'attributo, motivo per cui l'esempio precedente recita ng-include="'Table.html'". scrittura ng-include="Table.html" fa valutare AngularJS Table come proprietà di ambito, non trova nulla e lascia l'elemento vuoto.
Perché ng-include crea un nuovo ambito figlio
La direttiva non incolla il markup nello scope circostante. Ogni include crea un nuovo figlio portata che eredita prototipicamente dall'ambito in cui è stato dichiarato, e che un singolo fatto spiega la maggior parte delle sorprese vincolanti.
La lettura funziona come previsto. La parte sopra riportata recita: tutorial direttamente dal genitore, ecco perché ng-repeat trova l'array. La scrittura è dove si verifica l'errore: quando un parziale assegna a un primitivo, come con ng-model="topic", AngularJS crea topic nell'ambito figlio e la copia padre non cambia mai.
Due abitudini evitano la trappola:
- Legare attraverso un oggetto, come in
ng-model="data.topic", quindi genitore e figlio raggiungono lo stesso riferimento. - Gestisci lo stato in un controller o in un servizio ed esponi funzioni anziché semplici tipi primitivi.
L'inclusione emette anche $includeContentRequested, $includeContentLoaded and $includeContentError, in modo che un genitore possa reagire attraverso $scope.$on senza intaccare minimamente la sfera infantile.
Come correggere un ng-include vuoto o non riuscito
Un'inclusione che non produce alcun output di solito fallisce per uno dei seguenti motivi. Analizziamoli in quest'ordine.
- Controlla i preventivi. Un nome di file letterale deve essere racchiuso tra virgolette singole all'interno del valore dell'attributo. Senza di esse, l'espressione risulta indefinita e non viene inviata alcuna richiesta.
- Servire la pagina tramite HTTP. La direttiva genera una richiesta XHR per il partial, pertanto l'apertura di Main.html direttamente dal disco tramite indirizzo file non funziona nella maggior parte dei browser. Qualsiasi server web locale risolve questo problema.
- Verificare che il percorso sia risolto. Controlla il pannello di rete per la richiesta. Un errore 404 significa che il percorso è relativo alla pagina che ospita l'inclusione, non al partial che la referenzia.
- Rispetta la regola della stessa origine. Per impostazione predefinita il modello URL deve corrispondere al dominio e al protocollo del documento dell'applicazione, perché AngularJS lo passa attraverso $sce.getTrustedResourceUrlUn modello proveniente da un'altra fonte necessita di una voce nell'elenco delle risorse attendibili. URL elenco, oppure un wrapper trustAsResourceUrl esplicito, e il server remoto deve comunque inviare le intestazioni CORS.
- Presta attenzione al fallimento. L'evento $includeContentError si verifica ogni volta che lo stato della risposta è al di fuori dell'intervallo 200-299, trasformando un'area vuota in un messaggio che vale la pena registrare.
Un'altra causa è facile da non notare. AngularJS mantiene ogni partial recuperato in $templateCache, quindi un file modificato può continuare a servire markup obsoleto finché la voce della cache non viene rimossa o la pagina non viene ricaricata dal codice sorgente. Quando un frammento ha bisogno di un comportamento proprio piuttosto che del solo markup, un Direttiva personalizzata con il suo modello predefinito e il suo ambito isolato è lo strumento migliore.
