ng-include in AngularJS: come includere file HTML [Esempio]

By: James Hartmann James Hartmann
Hours aggiornato

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 codice HTML esterno) possono essere inclusi nel file HTML principale.

Il lato client include

Uno dei modi più comuni è 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, Javascript può essere utilizzato anche per includere codice da altri file.

I passaggi seguenti mostrano come è possibile ottenere ciò.

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,

  1. 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'.
  2. C'è un riferimento a uno script jquery. JQuery è un linguaggio di scripting costruito su Javascript il che rende la manipolazione del DOM ancora più semplice.
  3. Nel Javascript funzione, c'è un'istruzione '$(“#Content”).load(“Sub.html”);' che fa sì che il codice nel file Sub.html venga inserito nel tag div che ha l'ID Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

ARTICOLI CORRELATI

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.

  1. Intestazione di pagina
  2. Piè di pagina
  3. 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;

<!--#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

Angular fornisce la funzione per includere la funzionalità di 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 al codice base seguente e spieghiamo come ciò può essere ottenuto utilizzando Angular.

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 frammento di codice seguente presuppone che esista una variabile di ambito denominata "tutorial". Quindi utilizza la direttiva ng-repeat, che attraversa ciascun argomento nella variabile "Tutorial" e visualizza i valori per la coppia chiave-valore "nome" e "descrizione".

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Passo 2) scriviamo il codice sottostante in un file chiamato Main.html. Questa è una semplice applicazione angular.JS che ha i seguenti aspetti

  1. 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".
  2. Nel controller viene 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

  1. Nome: indica il nome di un argomento come Controller, Modelli e Direttive.
  2. 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:

Includi il file HTML in AngularJS

Sintesi

  • Per impostazione predefinita, sappiamo che l'HTML non fornisce un modo diretto per includere contenuto HTML da altri file come altri linguaggi di programmazione.
  • Javascript insieme a JQuery è l'opzione migliore per incorporare contenuto HTML da altri file.
  • Un altro modo di includere HTML il contenuto di altri file è utilizzare il file direttiva e la parola chiave del parametro virtuale. La parola chiave del parametro virtuale viene utilizzata per denotare 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 inserire codice da file esterni direttamente nel file HTML principale.