Per impostazione predefinita, HTML non fornisce la funzionalità per includere il codice lato client da altri file. È normalmente una buona pratica in qualsiasi linguaggio di programmazione distribuire funzionalità su vari file per qualsiasi applicazione.
Ad esempio, se si dispone della logica per le operazioni numeriche, normalmente si desidera che tale funzionalità sia definita in un file separato. Quel file separato potrebbe quindi essere riutilizzato in più applicazioni includendo semplicemente quel file.
Questo è normalmente il concetto di istruzioni Include disponibili nei linguaggi di programmazione come .Net e Java.
Questo tutorial esamina altri modi in cui i file (file che contengono codice HTML esterno) possono essere inclusi nel file HTML principale.
In questo tutorial imparerai-
- Il lato client include
- Include lato server
- Come includere file HTML in AngularJS
Il lato client include
Uno dei modi più comuni è includere il codice HTML tramite Javascript. JavaScript è un linguaggio di programmazione che può essere utilizzato per manipolare il contenuto in una pagina HTML al volo. Quindi, Javascript può essere utilizzato anche per includere codice da altri file.
I passaggi seguenti mostrano come eseguire questa operazione.
Step1) Definisci un file chiamato Sub.html e aggiungi il seguente codice al file.
Questo è un file incluso
Passaggio 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 sottostante,
- Nel tag body, c'è un tag div che ha un id di Content. Questo è il punto in cui verrà inserito il codice dal file esterno "Sub.html".
- C'è un riferimento a uno script jquery. JQuery è un linguaggio di scripting basato su Javascript che rende la manipolazione del DOM ancora più semplice.
- Nella funzione Javascript, c'è un'istruzione '$ ("# Content"). Load ("Sub.html");' che fa sì che il codice nel file Sub.html venga iniettato nel tag div che ha l'ID di Content.
Include lato server
Sono disponibili anche Server Side Include per includere una parte di codice comune in un sito. Questo viene normalmente fatto per includere il 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 hanno estensioni speciali. Di solito sono accettati dal server web come .shtml, .stm, .shtm, .cgi.
La direttiva utilizzata per includere il contenuto è la "direttiva include". Di seguito è mostrato un esempio della direttiva include;
- La suddetta direttiva consente di includere il contenuto di un documento in un altro.
- Il comando "virtuale" sopra il codice viene utilizzato per specificare la destinazione relativa alla radice del dominio dell'applicazione.
- Inoltre, 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 virtuale viene utilizzato per specificare il file (pagina HTML, file di testo, script, ecc.) Che deve essere incluso. 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 file HTML in AngularJS
Angular fornisce la funzione per includere la funzionalità da altri file AngularJS utilizzando la direttiva ng-include.
Lo scopo principale della "direttiva ng-include" è utilizzato per recuperare, compilare e includere un frammento HTML esterno nell'applicazione AngularJS principale.
Diamo un'occhiata alla base di codice sottostante e spieghiamo come questo può essere ottenuto utilizzando Angular.
Passaggio 1) scriviamo il codice seguente in un file chiamato Table.html. Questo è il file che verrà inserito nel nostro file dell'applicazione principale utilizzando la direttiva ng-include.
Lo snippet di codice riportato di seguito presuppone l'esistenza di una variabile di ambito denominata "tutorial". Quindi utilizza la direttiva ng-repeat, che esamina ogni argomento nella variabile "Tutorial" e visualizza i valori per la coppia chiave-valore "nome" e "descrizione".
| {{Topic.Name}} | {{Topic.Country}} |
Passaggio 2) scriviamo il codice seguente in un file chiamato Main.html. Questa è una semplice applicazione angular.JS che ha 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 sottostante. Quindi il tag div " ' verrà sostituito dall'intero codice nel file" Table.html ".
- Nel controller, una variabile "tutorial" viene creata 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.
- Descrizione: fornisce una descrizione di ogni argomento
La variabile tutorial è accessibile anche nel file "Table.html".
Registrazione all'evento Evento globale Guru99
Quando esegui il codice sopra, otterrai il seguente output.
Uscita :
Sommario:
- Per impostazione predefinita, sappiamo che HTML non fornisce un modo diretto per includere contenuto HTML da altri file come altri linguaggi di programmazione.
- Javascript insieme a JQuery è l'opzione preferita per incorporare contenuto HTML da altri file.
- Un altro modo per includere contenuto HTML da altri file è utilizzare la direttiva
e la parola chiave del parametro virtuale. La parola chiave del parametro virtuale viene utilizzata per indicare il file che deve essere incorporato. Questo è noto come include lato server. - Angular fornisce anche la possibilità di includere file utilizzando la direttiva ng-include. Questa direttiva può essere utilizzata per iniettare codice da file esterni direttamente nel file HTML principale.