AngularJS ng-include: HTML-tiedostojen sisällyttäminen esimerkin avulla
James Hartman
⚡ Älykäs yhteenveto
AngularJS:n ng-include hakee, kääntää ja lisää ulkoisen HTML-fragmentin pääsivulle, joten jaetut merkinnät, kuten taulukko, otsikko tai alatunniste, sijaitsevat yhdessä uudelleenkäytettävässä osittaisessa tiedostossa.
Oletusarvoisesti HTML ei tarjoa mahdollisuutta sisällyttää asiakaspuolen koodia muista tiedostoista. Yleensä millä tahansa ohjelmointikielellä on hyvä käytäntö jakaa toimintoja eri tiedostoille mitä tahansa sovellusta varten.
Jos sinulla on esimerkiksi logiikka numeerisia operaatioita varten, haluat normaalisti, että toiminto määritellään yhdessä erillisessä tiedostossa. Tätä erillistä tiedostoa voitaisiin sitten käyttää uudelleen useissa sovelluksissa lisäämällä vain kyseinen tiedosto.
Tämä on yleensä käsite Sisällytä lausunnot jotka ovat saatavilla ohjelmointikielet kuten .Net ja Java.
Tässä opetusohjelmassa tarkastellaan muita tapoja tiedostoille (tiedostoille, jotka sisältävät ulkoisia tiedostoja) HTML koodi) voidaan sisällyttää HTML-päätiedostoon.
Asiakaspuolen sisällytteet
Yksi yleisimmistä tavoista sisällyttää HTML-koodia on JavaSkripti. JavaKäsikirjoitus on ohjelmointikieli, jota voidaan käyttää HTML-sivun sisällön muokkaamiseen lennossa. Siten, JavaSkriptiä voidaan käyttää myös koodin sisällyttämiseen muista tiedostoista.
Alla olevat vaiheet osoittavat, miten tämä voidaan saavuttaa.
Vaihe 1) Määritä tiedosto nimeltä Sub.html ja lisää tiedostoon seuraava koodi.
<div> This is an included file </div>
Vaihe 2) Luo tiedosto nimeltä Sample.html, joka on pääsovellustiedostosi, ja lisää alla oleva koodinpätkä.
Alla on tärkeimmät huomioitavat seikat alla olevasta koodista,
- Body-tagissa on div-tunniste, jolla on sisällön tunnus. Tämä on paikka, johon ulkoisen Sub.html-tiedoston koodi lisätään.
- Viittaus jQuery-skriptiin on olemassa. jQuery on skriptikieli, joka on rakennettu jQuery-kielen päälle. JavaSkripti, joka tekee DOM-manipuloinnista entistä helpompaa.
- In JavaSkriptifunktiossa on lause '$(“#Content”).load(“Sub.html”);', joka aiheuttaa Sub.html-tiedostossa olevan koodin lisäämisen div-tagiin, jonka tunniste on Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Palvelinpuoli sisältää
Palvelinpuolen sisällytyksiä on saatavana myös yleisen koodinpätkän sisällyttämiseen koko sivustolle. Tämä tehdään yleensä sisällön sisällyttämiseksi HTML-dokumentin alla oleviin osiin.
- Sivun otsikko
- Sivun alatunniste
- Navigointivalikko.
Jotta web-palvelin tunnistaisi palvelinpuolen include-tiedoston, tiedostonimillä on erityiset tiedostopäätteet. Web-palvelin yleensä hyväksyy ne, kuten .shtml, .stm, .shtm tai .cgi.
Sisällön sisällyttämiseen käytetty direktiivi on ”include-direktiivi”. Esimerkki sisällytysdirektiivistä on esitetty alla:
<!--#include virtual="navigation.cgi" -->
- Yllä oleva direktiivi sallii yhden asiakirjan sisällön sisällyttämisen toiseen asiakirjaan.
- Yllä olevaa "virtuaalista" komentoa käytetään määrittämään kohde suhteessa sovelluksen verkkotunnuksen juureen.
- Lisäksi virtuaaliparametrissa on myös tiedostoparametri, jota voidaan käyttää. "File"-parametreja käytetään, kun on määritettävä polku suhteessa nykyisen tiedoston hakemistoon.
Huomautus:
Virtuaaliparametria käytetään määrittämään tiedosto (HTML-sivu, tekstitiedosto, komentosarja jne.), joka on sisällytettävä. Jos verkkopalvelinprosessilla ei ole oikeutta lukea tiedostoa tai suorittaa komentosarjaa, include-komento epäonnistuu. "Virtuaalinen" sana on avainsana, joka on sijoitettava sisällyttämistä koskevaan direktiiviin.
Kuinka sisällyttää HTML-tiedosto AngularJS:ään
angularjs tarjoaa funktion, jolla voi sisällyttää toiminnallisuuden muista AngularJS-tiedostoista ng-include-metodin avulla. Direktiivi.
”Ng-include-direktiivin” ensisijainen tarkoitus on hakea, kääntää ja sisällyttää ulkoinen HTML-fragmentti AngularJS-pääsovellukseen.
Versiohuomautus: AngularJS 1.x jätti pitkäaikaisen tuen 31. joulukuuta 2021, ja kehystiimi toteaa, että AngularJS-tuki päättyi virallisesti tammikuussa 2022, joten julkaisuja tai tietoturvapäivityksiä ei seuraa. Jokainen alla oleva vaihe ja koodilohko pysyvät täsmälleen sellaisena kuin se on julkaistu, kuten historiallinen viittaus. Moderni Angular ei tarjoa suoraa korvaajaa: merkinnät koostuvat komponenteista, ja ajonaikana poimittu fragmentti renderöidään ng-container ja ngComponentOutlet.
Tarkastellaan alla olevaa koodikantaa ja selitetään, miten tämä voidaan saavuttaa AngularJS:n avulla.
Vaihe 1) kirjoitetaan alla oleva koodi tiedostoon nimeltä Table.html. Tämä on tiedosto, joka lisätään pääsovellustiedostoomme ng-include-direktiivin avulla.
Alla oleva koodinpätkä olettaa, että on olemassa laajuusmuuttuja nimeltä ”tutorial”. Sitten se käyttää ng-toista direktiivi, joka käy läpi jokaisen "tutorial"-muuttujan aiheen ja näyttää arvot 'Name'- ja 'Description' avain-arvo-pari.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Vaihe 2) Kirjoitetaan alla oleva koodi tiedostoon nimeltä Main.html. Tämä on yksinkertainen AngularJS-sovellus, jolla on seuraavat ominaisuudet
- Käytä "ng-include-direktiiviä" lisätäksesi koodin ulkoiseen tiedostoon "Table.html". Lausunto on korostettu lihavoidulla alla olevassa koodissa. Joten div-tunniste ' ' korvataan koko koodilla Table.html-tiedostossa.
- In ohjain, $scope-objektin osaksi luodaan ”tutorial”-muuttuja. Tämä muuttuja sisältää luettelon avain-arvo-pareista.
Esimerkissämme avainarvoparit ovat
- Nimi – Tämä tarkoittaa aiheen nimeä, kuten Ohjaimet, Mallit ja Direktiivit.
- Descriptioni – Tämä antaa kuvauksen jokaisesta aiheesta
Opetusmuuttujaa voi käyttää myös Table.html-tiedostossa.
<!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>
Kun suoritat yllä olevan koodin, saat seuraavan tulosteen.
ulostulo:
Alla oleva kuvakaappaus näyttää renderöidyn tuloksen: selainvälilehden otsikko on Tapahtuman rekisteröinti, otsikko on injektoidun taulukon yläpuolella ja kolme riviä on otettu Main.html-tiedoston tutoriaalitaulukosta osittaisen osan kautta. Annotoitu kuvakaappaus kirjoittaa otsikon Gur99, kun koodi kirjoittaa Guru99.
ng-include-ominaisuudet: src, onload ja autoscroll
Tiedostonimen lisäksi direktiivi hyväksyy kaksi valinnaista attribuuttia, ja se voidaan kirjoittaa kolmella tavalla: minkä tahansa elementin attribuuttina, <ng-include> elementtinä tai CSS-luokkana. Alla oleva viittaus noudattaa virallista ngInclude-dokumentaatio.
| Ominaisuus | edellytetään | Mitä se tekee |
|---|---|---|
| src tai ng-include | Kyllä | Lauseke, joka evaluoituu mallineen URL |
| lastina | Ei | Lauseke arvioidaan joka kerta, kun uusi osittainen lataus päättyy |
| automaattinen vieritys | Ei | Kutsuu $anchorScroll-funktiota sisällön latautumisen jälkeen; attribuutin poisjättäminen poistaa vierityksen käytöstä. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Yleisin virhe seuraa ensimmäiseltä riviltä: src vie lauseke, ei pelkkää merkkijonoa. Literaalinen polku tarvitsee siis omat lainausmerkit attribuutin sisällä, minkä vuoksi yllä oleva esimerkki kuuluu seuraavasti ng-include="'Table.html'". Kirjoittaminen ng-include="Table.html" saa AngularJS:n arvioimaan Table scope-ominaisuutena, älä etsi mitään ja jätä elementti tyhjäksi.
Miksi ng-include luo uuden lapsialueen
Direktiivi ei liitä merkintöjä ympäröivään laajuusalueeseen. Jokainen include-merkintä luo uuden lapsen. laajuus joka perii prototyyppisesti sen laajuuden, jossa se julistettiin, ja tämä yksi seikka selittää useimmat sitovat yllätykset.
Lukeminen toimii odotetulla tavalla. Yllä oleva osittainen lukee tutorial suoraan vanhemmilta, minkä vuoksi ng-repeat löytää taulukon. Kirjoittaminen on se kohta, jossa se katkeaa: kun osittainen arvo sijoittuu primitiiville, kuten ng-model="topic", AngularJS luo topic lapsen laajuusalueella ja pääkopio eivät koskaan muutu.
Kaksi tapaa välttää ansan:
- Sido objektin kautta, kuten
ng-model="data.topic", joten vanhempi ja lapsi päätyvät samaan viitteeseen. - Pidä tila ohjaimessa tai palvelussa ja paljasta funktiot pelkkien primitiivien sijaan.
Sisällytä myös emittoi $includeContentRequested, $includeContentLoaded ja $includeContentErrorjotta vanhempi voi reagoida $scope.$on ulottumatta lainkaan lapsen ulottuville.
Tyhjän tai epäonnistuneen ng-include-tiedoston korjaaminen
Sisällys, joka ei renderöi mitään, epäonnistuu yleensä jostakin useista syistä. Käy syyt läpi tässä järjestyksessä.
- Tarkista lainaukset. Literaalitiedoston nimessä attribuutin arvon sisällä on oltava yksittäiset lainausmerkit. Ilman niitä lauseke on määrittämätön, eikä pyyntöä koskaan lähetetä.
- Näytä sivu HTTP:n kautta. Ohje antaa XHR-koodin osittaiselle tiedostolle, joten Main.html-tiedoston avaaminen suoraan levyltä tiedostoosoitteen kautta epäonnistuu useimmissa selaimissa. Mikä tahansa paikallinen web-palvelin poistaa tämän.
- Vahvista, että polku ratkeaa. Tarkkaile pyyntöä verkkopaneelista. 404-virhe tarkoittaa, että polku on suhteessa sivuun, jolla include-tiedosto sijaitsee, ei siihen viittaavaan osittaiseen tiedostoon.
- Noudata saman alkuperän sääntöä. Oletusarvoisesti mallipohja URL täytyy vastata sovellusdokumentin toimialuetta ja protokollaa, koska AngularJS välittää sen $sce.getTrustedResourceUrlMuualta peräisin oleva mallipohja tarvitsee merkinnän luotettavassa resurssissa. URL lista tai eksplisiittinen trustAsResourceUrl-kääre, ja etäpalvelimen on silti lähetettävä CORS-otsikot.
- Kuuntele epäonnistumista. $includeContentError laukeaa aina, kun vastauksen tila on 200–299 ulkopuolella, muuttaen hiljaisesti tyhjän alueen kirjaamisen arvoiseksi viestiksi.
Yksi syy on helppo jättää huomiotta. AngularJS säilyttää jokaisen noudetun osittaistiedoston $templateCache-välimuistissa, joten muokattu tiedosto voi jatkaa vanhentuneen merkinnän tarjoamista, kunnes välimuistimerkintä poistetaan tai sivu ladataan uudelleen lähdekoodista. Kun fragmentti tarvitsee omaa toimintaansa pelkän merkinnän sijaan, mukautettu direktiivi omalla mallipohjallaan ja eristetyllä laajuusalueellaan se on parempi työkalu.
