AngularJS ng-include: Uključivanje HTML datoteka s primjerom
James Hartman
⚡ Pametni sažetak
ng-include u AngularJS-u dohvaća, kompajlira i ubrizgava vanjski HTML fragment na glavnu stranicu, tako da se dijeljene oznake poput tablice, zaglavlja ili podnožja nalaze u jednoj djelomičnoj datoteci za višekratnu upotrebu.
Prema zadanim postavkama, HTML ne nudi mogućnost uključivanja koda na strani klijenta iz drugih datoteka. Obično je dobra praksa u bilo kojem programskom jeziku distribuirati funkcionalnost kroz različite datoteke za bilo koju aplikaciju.
Na primjer, ako imate logiku za numeričke operacije, normalno biste željeli imati tu funkcionalnost definiranu u jednoj zasebnoj datoteci. Ta se zasebna datoteka zatim može ponovno upotrijebiti u više aplikacija samo uključivanjem te datoteke.
Ovo je obično koncept Uključite izjave koji su dostupni u programski jezici kao što su .Net i Java.
Ovaj vodič razmatra druge načine rada s datotekama (datotekama koje sadrže vanjske HTML kod) može se uključiti u glavnu HTML datoteku.
Uključuje stranu klijenta
Jedan od najčešćih načina uključivanja HTML koda je putem JavaSkripta. JavaScript je programski jezik koji se može koristiti za manipuliranje sadržajem na HTML stranici u hodu. Stoga, JavaSkripta se također može koristiti za uključivanje koda iz drugih datoteka.
Donji koraci pokazuju kako se to može postići.
Korak 1) Definirajte datoteku pod nazivom Sub.html i dodajte sljedeći kod u datoteku.
<div> This is an included file </div>
Korak 2) Napravite datoteku pod nazivom Sample.html, koja je vaša glavna aplikacijska datoteka i dodajte donji isječak koda.
Ispod su glavni aspekti koje treba obratiti pozornost na donji kod,
- U oznaci tijela nalazi se oznaka div koja ima ID sadržaja. Ovo je mjesto gdje će se umetnuti kod iz vanjske datoteke 'Sub.html'.
- Postoji referenca na jQuery skriptu. jQuery je skriptni jezik izgrađen na JavaSkripta koja dodatno olakšava manipulaciju DOM-om.
- u JavaU funkciji skripte postoji naredba '$(“#Content”).load(“Sub.html”);' koja uzrokuje ubrizgavanje koda iz datoteke Sub.html u div oznaku koja ima ID sadržaja.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Poslužiteljska strana uključuje
Server Side Includes također je dostupan za uključivanje zajedničkog dijela koda na cijeloj stranici. To se obično radi za uključivanje sadržaja u donje dijelove HTML dokumenta.
- Zaglavlje stranice
- Podnožje stranice
- Navigacijski izbornik.
Da bi web poslužitelj prepoznao Server Side Include, nazivi datoteka imaju posebne ekstenzije. Web poslužitelj ih obično prihvaća, kao što su .shtml, .stm, .shtm, .cgi.
Direktiva koja se koristi za uključivanje sadržaja je „direktiva za uključivanje“. Primjer direktive za uključivanje prikazan je u nastavku:
<!--#include virtual="navigation.cgi" -->
- Gornja direktiva dopušta da se sadržaj jednog dokumenta uključi u drugi.
- Gornji kod "virtualne" naredbe koristi se za određivanje cilja u odnosu na korijen domene aplikacije.
- Također, uz virtualni parametar, postoji i parametar datoteke koji se može koristiti. Parametri "datoteke" koriste se kada je potrebno navesti stazu u odnosu na direktorij trenutne datoteke.
Bilješka:
Virtualni parametar koristi se za određivanje datoteke (HTML stranice, tekstualne datoteke, skripte itd.) koju je potrebno uključiti. Ako proces web poslužitelja nema pristup za čitanje datoteke ili izvršavanje skripte, naredba uključi neće uspjeti. 'Virtualna' riječ je ključna riječ koja se mora staviti u direktivu uključivanja.
Kako uključiti HTML datoteku u AngularJS
AngularJS pruža funkciju za uključivanje funkcionalnosti iz drugih AngularJS datoteka korištenjem ng-include Direktiva.
Primarna svrha direktive "ng-include" je dohvatiti, kompajlirati i uključiti vanjski HTML fragment u glavnu AngularJS aplikaciju.
Napomena o verziji: AngularJS 1.x je prestao biti dostupan za dugoročnu podršku 31. prosinca 2021., a tim za framework navodi da Podrška za AngularJS je službeno završena u siječnju 2022., tako da ne slijede nikakva izdanja ili sigurnosne zakrpe. Svaki korak i blok koda u nastavku ostaju točno onakvi kakvi su objavljeni, kao povijesna referenca. Modern Angular ne isporučuje izravnu zamjenu: označavanje se sastoji od komponenti, a fragment odabran tijekom izvođenja renderira se s ng-spremnik i ngComponentOutlet.
Pogledajmo donju bazu koda i objasnimo kako se to može postići pomoću AngularJS-a.
Korak 1) napišimo donji kod u datoteku pod nazivom Table.html. Ovo je datoteka koja će biti umetnuta u našu glavnu aplikacijsku datoteku pomoću direktive ng-include.
Donji isječak koda pretpostavlja da postoji varijabla opsega pod nazivom "tutorial". Zatim koristi ng-ponovi direktiva koja prolazi kroz svaku temu u varijabli "tutorial" i prikazuje vrijednosti za 'Naziv' i 'Descriptpar ključ-vrijednost 'ion'.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Korak 2) Napišimo donji kod u datoteku pod nazivom Main.html. Ovo je jednostavna AngularJS aplikacija koja ima sljedeće aspekte
- Upotrijebite direktivu "ng-include" za umetanje koda u vanjsku datoteku 'Table.html'. Izjava je istaknuta masnim slovima u donjem kodu. Dakle, div oznaka ' ' bit će zamijenjen cijelim kodom u datoteci 'Table.html'.
- u kontrolor, varijabla "tutorial" se stvara kao dio objekta $scope. Ova varijabla sadrži popis parova ključ-vrijednost.
U našem primjeru, parovi ključ-vrijednost su
- Naziv – Ovo označava naziv teme kao što su kontroleri, modeli i direktive.
- Description – Ovo daje opis svake teme
Varijabli vodiča također se pristupa u datoteci '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>
Kada izvršite gornji kod, dobit ćete sljedeći izlaz.
Izlaz:
Snimka u nastavku prikazuje generirani rezultat: kartica preglednika nosi naslov Registracija događaja, naslov se nalazi iznad ubrizgane tablice, a tri retka su izvučena iz niza tutoriala u Main.html kroz parcijal. Snimka zaslona s bilješkama prikazuje naslov Gur99 dok kod piše Guru99.
ng-include Atributi: src, onload i autoscroll
Osim imena datoteke, direktiva prihvaća dva opcionalna atributa i može se napisati na tri načina: kao atribut na bilo kojem elementu, kao <ng-include> element ili kao CSS klasa. Donja referenca slijedi službeni ngInclude dokumentacija.
| Atribut | potreban | Ono što se također |
|---|---|---|
| src ili ng-include | Da | Izraz koji se evaluira prema predlošku URL |
| učitavanje | Ne | Izraz se procjenjuje svaki put kada se završi učitavanje novog parcijala |
| autoscroll | Ne | Poziva $anchorScroll nakon što se sadržaj učita; izostavljanje atributa onemogućuje pomicanje |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Najčešća greška proizlazi iz prvog retka: src uzima izražavanje, a ne običan niz znakova. Doslovna putanja stoga treba vlastite navodnike unutar atributa, zbog čega gornji primjer glasi ng-include="'Table.html'"Pisanje ng-include="Table.html" tjera AngularJS da evaluira Table kao svojstvo opsega, ne pronađi ništa i ostavi element prazan.
Zašto ng-include stvara novi podređeni opseg
Direktiva ne lijepi oznake u okolni opseg. Svako uključivanje stvara novo dijete. djelokrug koji prototipski nasljeđuje iz opsega u kojem je deklariran, i ta jedna činjenica objašnjava većinu iznenađenja vezanja.
Čitanje funkcionira kako se očekuje. Gornji djelomični prikaz glasi tutorial izravno od roditelja, zbog čega ng-repeat pronalazi niz. Pisanje je mjesto gdje se prekida: kada parcijalna vrijednost dodjeljuje primitivu, kao kod ng-model="topic", AngularJS stvara topic na podređenom opsegu i roditeljska kopija se nikada ne mijenja.
Dvije navike izbjegavaju zamku:
- Vezati se kroz objekt, kao u
ng-model="data.topic", tako da roditelj i dijete dođu do iste reference. - Zadržite stanje u kontroleru ili servisu i otkrijte funkcije umjesto golih primitiva.
Uključivanje također emitira $includeContentRequested, $includeContentLoaded i $includeContentError, tako da roditelj može reagirati putem $scope.$on bez ikakvog dosezanja u podređeni opseg.
Kako popraviti prazno ili neuspješno ng-include
Uključivanje koje ne prikazuje ništa obično ne uspije iz jednog od nekoliko razloga. Razradite ih ovim redoslijedom.
- Provjerite citate. Doslovni naziv datoteke treba biti u navodnicima unutar vrijednosti atributa. Bez njih izraz se rješava kao nedefiniran i nikakav zahtjev se nikada ne šalje.
- Posluži stranicu putem HTTP-a. Direktiva izdaje XHR za parcijal, pa otvaranje Main.html datoteke izravno s diska putem adrese datoteke ne uspijeva u većini preglednika. Bilo koji lokalni web poslužitelj to briše.
- Potvrdite da se put rješava. Pratite mrežnu ploču za zahtjev. 404 znači da je put relativan u odnosu na stranicu koja hostira uključeno, a ne u odnosu na parcijal koji ga referencira.
- Poštujte pravilo istog porijekla. Predložak prema zadanim postavkama URL mora odgovarati domeni i protokolu dokumenta aplikacije, jer ga AngularJS prosljeđuje $sce.getTrustedResourceUrlPredložak iz nekog drugog mjesta treba biti unesen u pouzdani resurs. URL popis ili eksplicitni omotač trustAsResourceUrl, a udaljeni poslužitelj i dalje mora slati CORS zaglavlja.
- Osluškujte neuspjeh. $includeContentError se aktivira kad god status odgovora padne izvan vrijednosti od 200 do 299, pretvarajući tiho prazno područje u poruku vrijednu zapisivanja.
Još jedan uzrok je lako previdjeti. AngularJS čuva svaki dohvaćeni parcijal u $templateCache, tako da uređena datoteka može nastaviti posluživati zastarjele oznake dok se unos iz predmemorije ne ukloni ili se stranica ponovno učita iz izvornog koda. Kada fragmentu treba vlastito ponašanje, a ne samo oznake, prilagođena direktiva s vlastitim predloškom i izoliranim opsegom je bolji alat.
