Ng-include în AngularJS: Cum se include fișierul HTML (exemplu)

În mod implicit, HTML nu oferă facilitatea de a include cod din partea clientului din alte fișiere. În mod normal, este o bună practică în orice limbaj de programare să distribuiți funcționalități î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. Acel fișier separat ar putea fi apoi reutilizat în mai multe aplicații, incluzând doar fișierul respectiv.

Acesta este în mod normal conceptul de declarații Include care sunt disponibile în limbaje de programare precum .Net și Java.

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

În acest tutorial, veți învăța-

• Partea client include
• Partea serverului include
• Cum să includeți fișierul HTML în AngularJS

Partea client include

Una dintre cele mai comune modalități de a include codul HTML este prin Javascript. JavaScript 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 utilizat ș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 în fișier.

Acesta este un fișier inclus

Pasul 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 remarcat despre codul de mai jos,

1. În eticheta de corp, 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 script construit pe partea de sus a Javascript, care face manipularea DOM și mai ușoară.
3. În funcția Javascript, există o declarație '$ ("# Content"). Load ("Sub.html");' ceea ce face ca codul din fișierul Sub.html să fie injectat în eticheta div care are id-ul de Conținut.

Partea serverului include

Includerile laterale ale serverului sunt, de asemenea, disponibile pentru a include o bucată de cod comună pe întregul site. Acest lucru se face în mod normal pentru a include conținut în părțile de mai jos ale unui document HTML.

1. Antetul paginii
2. Subsol de pagină
3. Meniu de navigatie.

Pentru ca un server web să recunoască o parte inclusă pe server, 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;

• Directiva de mai sus permite conținutul unui document să fie inclus în altul.
• Comanda „virtuală” de deasupra 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 specificată 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 pus î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.

Pasul 1) 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 al aplicației folosind directiva ng-include.

Fragmentul de cod de mai jos presupune că există o variabilă de domeniu numită „tutorial”. Apoi folosește directiva ng-repeat, care trece prin fiecare subiect din variabila „Tutorial” și afișează valorile pentru perechea cheie-valoare „nume” și „descriere”.

 {{Topic.Name}}  {{Topic.Country}} 

Pasul 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”. Afirmaț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, se creează o variabilă „tutorial” ca parte a obiectului $ scope. Această variabilă conține o listă de perechi cheie-valoare.

În exemplul nostru, perechile de valori cheie sunt

1. Nume - Aceasta denotă numele unui subiect, cum ar fi controlere, modele și directive.
2. Descriere - Aceasta oferă o descriere a fiecărui subiect

Variabila tutorial este accesată și în fișierul „Table.html”.

Eveniment global Guru99
 

Când executați codul de mai sus, veți obține următoarea ieșire.

Ieșire :

Rezumat:

• În mod implicit, știm că HTML nu oferă o modalitate directă de a include conținut HTML din alte fișiere, cum ar fi alte limbaje de programare.
• Javascript împreună cu JQuery este cea mai preferată opțiune pentru încorporarea conținutului HTML din alte fișiere.
• O altă modalitate de a include conținut HTML din alte fișiere este utilizarea directivei și a cuvântului cheie parametru virtual. Cuvântul cheie parametru virtual este utilizat pentru a indica fișierul care trebuie încorporat. Acest lucru este cunoscut sub numele de server-side include.
• Angular oferă, de asemenea, facilitatea de a include fișiere utilizând directiva ng-include. Această directivă poate fi utilizată pentru a injecta cod din fișiere externe direct în fișierul HTML principal.