ng-include AngularJS-is: HTML-faili kaasamine [näide]
James Hartman
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 programmeerimiskeeltes nagu .Net ja Java.
Selles õpetuses vaadeldakse muid viise, kuidas faile (välist HTML-koodi sisaldavad failid) saab HTML-i põhifaili lisada.
Kliendipool sisaldab
Üks levinumaid viise on HTML-koodi lisamine on via Javascript. JavaScript on programmeerimiskeel, mida saab kasutada HTML-lehe sisuga käigupealt manipuleerimiseks. Seega Javascript saab kasutada ka koodi lisamiseks muudest failidest.
Allpool toodud sammud näitavad, kuidas seda saab teha.
Samm 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 skriptikeel, mis on üles ehitatud Javascript mis muudab DOM-i manipuleerimise veelgi lihtsamaks.
- aasta Javascript funktsioon, on avaldus "$("#Content").load("Sub.html");' mille tõttu sisestatakse failis Sub.html olev kood märgendisse div, millel on sisu ID.
<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üü.
Et veebiserver tunneks ära serveripoolsed lisad, on failinimedel spetsiaalsed laiendid. Tavaliselt aktsepteerib neid veebiserver, näiteks .shtml, .stm, .shtm, .cgi.
Sisu kaasamiseks kasutatav direktiiv on "kaasamise direktiiv". Kaasamise direktiivi näide on näidatud 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
Angular pakub funktsiooni ng-include direktiivi abil funktsioonide kaasamiseks teistest AngularJS-failidest.
Direktiiv "ng-include" peamist eesmärki kasutatakse välise HTML-i fragmendi toomiseks, kompileerimiseks ja kaasamiseks AngularJS-i põhirakendusse.
Vaatame allolevat koodibaasi ja selgitame, kuidas seda Angulari abil saavutada.
Step 1) kirjutame alloleva koodi faili nimega Table.html. See on fail, mis sisestatakse meie põhirakenduse faili, kasutades ng-include direktiivi.
Allpool olev koodilõik eeldab, et on olemas ulatuse muutuja nimega "õpetus". Seejärel kasutab see käskkirja ng-repeat, mis läbib iga muutuja "Tutorial" teema ja kuvab võtme-väärtuste paari "nimi" ja "kirjeldus" väärtused.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Country }}</td>
</tr>
</table>
Step 2) kirjutame alloleva koodi faili nimega Main.html. See on lihtne angular.JS 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.
- Kontrolleris luuakse objekti $scope osana muutuja "õpetus". See muutuja sisaldab võtme-väärtuste 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:
kokkuvõte
- Vaikimisi teame, et HTML ei paku otsest võimalust HTML-i sisu kaasamiseks muudest failidest, nagu muud programmeerimiskeeled.
- Javascript koos JQueryga on parim eelistatud valik HTML-i sisu manustamiseks teistest failidest.
- Teine viis kaasamiseks HTML teiste failide sisu on kasutada direktiiv ja virtuaalse parameetri märksõna. Virtuaalse parameetri märksõna kasutatakse manustatava faili tähistamiseks. Seda nimetatakse serveripoolseteks kaasamiseks.
- Angular pakub ka võimalust failide kaasamiseks, kasutades ng-include direktiivi. Seda käsku saab kasutada välistest failidest pärineva koodi sisestamiseks otse peamisse HTML-faili.
