ng-include în AngularJS: Cum să includeți fișierul HTML [Exemplu]

prin: James Hartman James Hartman
Hours Actualizat

Î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 precum .Net și Java.

Acest tutorial analizează alte moduri în care fișierele (fișierele care conțin cod HTML extern) pot fi incluse în fișierul HTML principal.

Partea client include

Una dintre cele mai comune moduri este de a include codul HTML este prin Javascript. JavaScenariu este un limbaj de programare care poate fi folosit pentru a manipula conținutul dintr-o pagină HTML din mers. Prin urmare, Javascript poate fi folosit și pentru a include cod din alte fișiere.

Pașii de mai jos arată cum se poate realiza acest lucru.

Pasul 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,

  1. Î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”.
  2. Există o referință la un script jquery. JQuery este un limbaj de scripting construit pe deasupra Javascript ceea ce face manipularea DOM și mai ușoară.
  3. În Javascript funcția, există o instrucțiune „$(“#Content”).load(“Sub.html”);' ceea ce face ca codul din fișierul Sub.html să fie injectat î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>

ARTICOLE SIMILARE

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.

  1. Antetul paginii
  2. Subsolul paginii
  3. Meniu de navigatie.

Pentru ca un server web să recunoască un Server Side Includes, numele fișierelor au extensii speciale. Acestea sunt de obicei acceptate de serverul web, cum ar fi .shtml, .stm, .shtm , .cgi.

Directiva folosită pentru includerea conținutului este „directiva include”. Un exemplu de directiva 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

Angular oferă funcția de a include funcționalitatea din alte fișiere AngularJS utilizând directiva ng-include.

Scopul principal al „directivei ng-include” este folosit pentru a prelua, compila și include un fragment HTML extern în aplicația principală AngularJS.

Să ne uităm la baza de cod de mai jos și să explicăm cum se poate realiza acest lucru folosind Angular.

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 utilizează directiva ng-repeat, care parcurge fiecare subiect din variabila „Tutorial” și afișează valorile pentru perechea cheie-valoare „nume” și „descriere”.

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

Pas 2) să scriem codul de mai jos într-un fișier numit Main.html. Aceasta este o aplicație simplă angular.JS care are următoarele aspecte

  1. 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”.
  2. În controler, 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

  1. Nume – Acesta indică numele unui subiect, cum ar fi Controlere, Modele și Directive.
  2. 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:

Includeți fișierul HTML în AngularJS

Rezumat

  • În mod implicit, știm că HTML nu oferă o modalitate directă de a include conținut HTML din alte fișiere, ca altele limbaje de programare.
  • Javascript împreună cu JQuery este cea mai preferată opțiune pentru încorporarea conținutului HTML din alte fișiere.
  • Un alt mod de a include HTML conținutul din alte fișiere este de a utiliza directivă și cuvântul cheie parametru virtual. Cuvântul cheie parametru virtual este folosit pentru a desemna fișierul care trebuie încorporat. Acest lucru este cunoscut ca include server-side.
  • Angular oferă, de asemenea, posibilitatea de a include fișiere utilizând directiva ng-include. Această directivă poate fi folosită pentru a injecta cod din fișiere externe direct în fișierul HTML principal.

S-ar putea sa-ti placa: