ng-include u AngularJS: Kako uključiti HTML datoteku [Primjer]

By: James Hartman James Hartman
Hours Ažurirano

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 programskim jezicima kao što su .Net i Java.

Ovaj vodič razmatra druge načine na koje se datoteke (datoteke koje sadrže vanjski HTML kod) mogu uključiti u glavnu HTML datoteku.

Klijentska strana uključuje

Jedan od najčešćih načina je uključivanje HTML koda putem Javascript. JavaScript je programski jezik koji se može koristiti za manipuliranje sadržajem na HTML stranici u hodu. Stoga, Javascript također se može koristiti za uključivanje koda iz drugih datoteka.

Koraci u nastavku 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,

  1. 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'.
  2. Postoji referenca na jquery skriptu. JQuery je skriptni jezik izgrađen na temelju Javascript što čini DOM manipulaciju još lakšom.
  3. u Javascript funkcija, postoji izjava '$(“#Content”).load(“Sub.html”);' što uzrokuje da se kod u datoteci Sub.html umetne u oznaku div 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>

POVEZANI ČLANCI

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.

  1. Zaglavlje stranice
  2. Podnožje stranice
  3. Navigacijski izbornik.

Kako bi web-poslužitelj prepoznao uključene strane poslužitelja, nazivi datoteka imaju posebne ekstenzije. Obično ih prihvaća web poslužitelj kao što su .shtml, .stm, .shtm, .cgi.

Direktiva koja se koristi za uključivanje sadržaja je "direktiva uključivanja". Dolje je prikazan primjer direktive uključivanja;

<!--#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

Angular pruža funkciju za uključivanje funkcionalnosti iz drugih AngularJS datoteka pomoću direktive ng-include.

Primarna svrha "ng-include direktive" koristi se za dohvaćanje, kompajliranje i uključivanje vanjskog HTML fragmenta u glavnu AngularJS aplikaciju.

Pogledajmo donju bazu koda i objasnimo kako se to može postići pomoću Angulara.

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 direktivu ng-repeat, koja prolazi kroz svaku temu u varijabli “Tutorial” i prikazuje vrijednosti za par ključ-vrijednost 'ime' i 'opis'.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Korak 2) napišimo donji kod u datoteku pod nazivom Main.html. Ovo je jednostavna angular.JS aplikacija koja ima sljedeće aspekte

  1. 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'.
  2. U kontroleru se stvara varijabla “tutorial” kao dio objekta $scope. Ova varijabla sadrži popis parova ključ-vrijednost.

U našem primjeru, parovi ključ-vrijednost su

  1. Naziv – Ovo označava naziv teme kao što su kontroleri, modeli i direktive.
  2. 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:

Uključite HTML datoteku u AngularJS

Rezime

  • Prema zadanim postavkama, znamo da HTML ne pruža izravan način za uključivanje HTML sadržaja iz drugih datoteka poput ostalih programski jezici.
  • Javascript zajedno s JQueryjem najbolja je opcija za ugrađivanje HTML sadržaja iz drugih datoteka.
  • Drugi način uključivanja HTML sadržaj iz drugih datoteka je koristiti direktiva i ključna riječ virtualni parametar. Ključna riječ virtualnog parametra koristi se za označavanje datoteke koju je potrebno ugraditi. To je poznato kao uključivanje na strani poslužitelja.
  • Angular također pruža mogućnost uključivanja datoteka pomoću direktive ng-include. Ova se direktiva može koristiti za umetanje koda iz vanjskih datoteka izravno u glavnu HTML datoteku.