AngularJS ng-include: HTML-failide lisamine koos näitega
James Hartman
⚡ Nutikas kokkuvõte
AngularJS-i ng-include laadib, kompileerib ja süstib pealehele välise HTML-fragmendi, seega jagatud märgistus, näiteks tabel, päis või jalus, asub ühes korduvkasutatavas osalises failis.
Vaikimisi ei paku HTML võimalust lisada teistest failidest kliendipoolset koodi. Tavaliselt on igas programmeerimiskeeles hea tava jaotada funktsioone mis tahes rakenduse jaoks erinevate failide vahel.
Näiteks kui teil on numbriliste toimingute loogika, soovite tavaliselt, et see funktsioon oleks määratletud ühes eraldi failis. Seda eraldi faili saab seejärel mitmes rakenduses uuesti kasutada, lisades selle faili.
See on tavaliselt mõiste Kaasa avaldused mis on saadaval programmeerimiskeeled näiteks .Net ja Java.
See õpetus vaatleb teisi viise failide (failide, mis sisaldavad väliseid HTML kood) saab lisada peamisse HTML-faili.
Kliendipoolne kaasamine
Üks levinumaid viise HTML-koodi lisamiseks on ... JavaSkript. JavaScript on programmeerimiskeel, mida saab kasutada HTML-lehe sisuga käigupealt manipuleerimiseks. Seega JavaSkripti saab kasutada ka koodi lisamiseks teistest failidest.
Allolevad sammud näitavad, kuidas seda saavutada.
Step 1) Määratlege fail nimega Sub.html ja lisage failile järgmine kood.
<div> This is an included file </div>
Step 2) Looge fail nimega Sample.html, mis on teie peamine rakenduse fail, ja lisage allolev koodilõik.
Allpool on toodud peamised aspektid, mida alloleva koodi puhul tähele panna,
- Kehasildis on märgend div, millel on sisu ID. See on koht, kuhu sisestatakse kood välisest failist "Sub.html".
- Seal on viide jQuery skriptile. jQuery on skriptimiskeel, mis on loodud ... peale. JavaSkript, mis muudab DOM-i manipuleerimise veelgi lihtsamaks.
- aasta JavaSkriptifunktsioonis on lause '$(“#Content”).load(“Sub.html”);', mis põhjustab failis Sub.html oleva koodi sisestamise div-silti, mille ID on Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Serveri külg kaasatakse
Server Side Includes on saadaval ka tavalise koodilõigu lisamiseks kogu saidile. Tavaliselt tehakse seda sisu lisamiseks HTML-dokumendi allolevatesse osadesse.
- Lehe päis
- Lehe jalus
- Navigeerimismenüü.
Selleks, et veebiserver serveripoolse lisamise ära tunneks, on failinimedel spetsiaalsed laiendid. Tavaliselt aktsepteerib veebiserver neid, näiteks .shtml, .stm, .shtm, .cgi.
Sisu kaasamiseks kasutatav direktiiv on „kaasamisdirektiiv“. Kaasamisdirektiivi näide on toodud allpool:
<!--#include virtual="navigation.cgi" -->
- Ülaltoodud direktiiv võimaldab ühe dokumendi sisu lisada teise.
- Ülaltoodud koodi "virtuaalne" käsk kasutatakse sihtmärgi määramiseks rakenduse domeenijuure suhtes.
- Lisaks on virtuaalsele parameetrile lisatud ka faili parameeter, mida saab kasutada. Faili parameetreid kasutatakse siis, kui on vaja määrata tee praeguse faili kataloogi suhtes.
Märge:
Virtuaalset parameetrit kasutatakse kaasatava faili (HTML-leht, tekstifail, skript jne) määramiseks. Kui veebiserveri protsessil pole juurdepääsu faili lugemiseks või skripti käivitamiseks, siis käsk include nurjub. "Virtuaalne" sõna on märksõna, mis tuleb lisada direktiivi.
Kuidas lisada HTML-faili AngularJS-i
AngularJS pakub funktsiooni, mis võimaldab ng-include abil lisada funktsionaalsust teistest AngularJS-failidest. Direktiivi.
„Ng-include direktiivi” peamine eesmärk on välise HTML-fragmendi toomine, kompileerimine ja lisamine AngularJS-i peamisse rakendusse.
Versiooni märkus: AngularJS 1.x lahkus pikaajalisest toest 31. detsembril 2021 ja raamistiku meeskond väidab, et AngularJS tugi ametlikult lõppenud jaanuaris 2022, seega ei järgne mingeid väljaandeid ega turvaparandusi. Iga allolev samm ja koodiplokk jääb täpselt avaldatuks, nagu ajalooline viide. Kaasaegne Angular ei paku otsest asendust: märgistus koosneb komponentidest ja käitusajal valitud fragment renderdatakse ng-konteiner ja ngComponentOutlet.
Vaatame allolevat koodibaasi ja selgitame, kuidas seda AngularJS-i abil saavutada saab.
Step 1) kirjutame alloleva koodi faili nimega Table.html. See on fail, mis sisestatakse meie põhirakenduse faili, kasutades ng-include direktiivi.
Allolev koodilõik eeldab, et on olemas ulatusmuutuja nimega „õpetus“. Seejärel kasutab see ng-korda direktiiv, mis käib läbi iga teema muutujas „õpetus“ ja kuvab „Nimi“ ja „Descriptiooni võtme-väärtuse paar.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Step 2) Kirjutame alloleva koodi faili nimega Main.html. See on lihtne AngularJS rakendus, millel on järgmised aspektid
- Kasutage käsku „ng-include”, et sisestada kood välisesse faili „Table.html”. Väide on allolevas koodis paksus kirjas esile tõstetud. Nii et div silt " ' asendatakse kogu koodiga failis Table.html.
- aasta kontroller, luuakse $scope objekti osana muutuja „õpetus”. See muutuja sisaldab võtme-väärtuse paaride loendit.
Meie näites on võtmeväärtuste paarid
- Nimi – see tähistab teema nime, nagu kontrollerid, mudelid ja direktiivid.
- Descriptioon – see annab iga teema kirjelduse
Õpetusmuutujale pääseb juurde ka failist 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>
Kui käivitate ülaltoodud koodi, saate järgmise väljundi.
Väljund:
Allolev pilt näitab renderdatud tulemust: brauseri vahekaardi pealkiri on „Sündmuse registreerimine“, pealkiri asub sisestatud tabeli kohal ja kolm rida on võetud Main.html-i õpetusmassiivist osalise tabeli kaudu. Annoteeritud ekraanipildil on pealkiri Gur99, samal ajal kui kood kirjutab Guru99.
ng-include atribuudid: src, onload ja autoscroll
Lisaks failinimele aktsepteerib direktiiv kahte valikulist atribuuti ja seda saab kirjutada kolmel viisil: mis tahes elemendi atribuudina, <ng-include> elemendina või CSS-klassina. Allolev viide järgib ametlikku ngInclude'i dokumentatsioon.
| Atribuut | Nõutud | Mida see teeb |
|---|---|---|
| src või ng-include | Jah | Avaldis, mis hindab malli URL |
| laadimine | Ei | Avaldist hinnatakse iga kord, kui uus osaline laadimine lõpeb |
| automaatne kerimine | Ei | Kutsub pärast sisu laadimist välja funktsiooni $anchorScroll; atribuudi väljajätmine keelab kerimise. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Kõige levinum viga tuleneb esimesest reast: src võtab väljend, mitte tavaline string. Seega vajab sõnasõnaline tee atribuudi sees oma jutumärke, mistõttu ülaltoodud näide on järgmine ng-include="'Table.html'". Kirjutamine ng-include="Table.html" paneb AngularJS-i hindama Table ulatuse atribuudina ei leia midagi ja jäta element tühjaks.
Miks ng-include loob uue lapse ulatuse?
Direktiiv ei kleebi märgistust ümbritsevasse ulatusse. Iga kaasamine loob uue lapse. ulatus mis pärib prototüüpselt ulatusest, milles see deklareeriti, ja see üks asjaolu selgitab enamiku siduvaid üllatusi.
Lugemine toimib ootuspäraselt. Ülaltoodud osaline tekst loeb tutorial otse vanematelt, mistõttu ng-repeat leiab massiivi. Kirjutamine on see, kus see katkeb: kui osaline väärtus omistatakse primitiivile, nagu näiteks ng-model="topic", AngularJS loob topic lapse ulatuse ja vanema koopia puhul ei muutu see kunagi.
Kaks harjumust väldivad lõksu:
- Siduda objekti kaudu, nagu näiteks
ng-model="data.topic", seega jõuavad vanem ja laps samale viitepunktile. - Hoia olekut kontrolleris või teenuses ja paljasta funktsioonide asemel paljaid primitiive.
Kaasamine kiirgab ka $includeContentRequested, $includeContentLoaded ja $includeContentError, et lapsevanem saaks reageerida läbi $scope.$on ilma lapse ulatusse üldse ulatumata.
Kuidas parandada tühja või ebaõnnestunud ng-include'i
Mitte midagi renderdav lisamine ebaõnnestub tavaliselt ühel järgmistest põhjustest. Töötage need läbi selles järjekorras.
- Kontrolli hinnapakkumisi. Literaalse failinime puhul peavad atribuudi väärtuse sees olema ülakomad. Ilma nendeta on avaldis määratlemata ja päringut ei saadeta kunagi.
- Esita lehte HTTP kaudu. Direktiiv väljastab osalise avamise jaoks XHR-i, seega Main.html avamine otse kettalt failiaadressi kaudu enamikus brauserites ebaõnnestub. Iga kohalik veebiserver kustutab selle.
- Kinnitage, et tee on lahendatud. Jälgige päringut võrgupaneelil. 404 tähendab, et tee on seotud lehe, mis majutab kaasamist, mitte sellele viitava osaga.
- Austa sama päritolu reeglit. Vaikimisi mall URL peab vastama rakendusdokumendi domeenile ja protokollile, sest AngularJS edastab selle $sce.getTrustedResourceUrlMujalt pärit mall vajab usaldusväärse ressursi kirjet. URL loendit või selgesõnalist trustAsResourceUrl ümbrist ja kaugserver peab ikkagi saatma CORS-päiseid.
- Kuula ebaõnnestumist. $includeContentError käivitub alati, kui vastuse olek jääb väljapoole vahemikku 200 kuni 299, muutes vaikselt tühja ala logimist väärivaks teateks.
Veel ühte põhjust on lihtne kahe silma vahele jätta. AngularJS hoiab iga allalaaditud osalise väärtuse $templateCache'is, seega saab muudetud fail aegunud märgistust edasi pakkuda, kuni vahemälu kirje eemaldatakse või leht lähtekoodist uuesti laaditakse. Kui fragment vajab oma käitumist, mitte ainult märgistust, siis kohandatud direktiiv oma malli ja isoleeritud ulatusega on parem tööriist.
