ng-include AngularJS:ssä: HTML-tiedoston sisällyttäminen [esimerkki]

by: James Hartman James Hartman
Hours Päivitetty

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 ohjelmointikielillä, kuten .Net ja Java.

Tässä opetusohjelmassa tarkastellaan muita tapoja, joilla tiedostoja (tiedostoja, jotka sisältävät ulkoista HTML-koodia) voidaan sisällyttää pääHTML-tiedostoon.

Asiakaspuoli sisältää

Yksi yleisimmistä tavoista on sisällyttää HTML-koodi on via Javascript. JavaKäsikirjoitus on ohjelmointikieli, jota voidaan käyttää HTML-sivun sisällön muokkaamiseen lennossa. Siten, Javascript voidaan käyttää myös koodin lisäämiseen muista tiedostoista.

Alla olevat vaiheet osoittavat, kuinka tämä voidaan tehdä.

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,

  1. Body-tagissa on div-tunniste, jolla on sisällön tunnus. Tämä on paikka, johon ulkoisen Sub.html-tiedoston koodi lisätään.
  2. Siinä on viittaus jquery-skriptiin. JQuery on skriptikieli, joka on rakennettu sen päälle Javascript mikä tekee DOM-manipulaatiosta entistä helpompaa.
  3. In Javascript -funktiossa on lauseke "$("#Content").load("Sub.html");' joka aiheuttaa tiedoston Sub.html koodin syöttämisen div-tunnisteeseen, jolla on sisällön tunnus. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

AIHEESEEN LIITTYVÄT ARTIKKELIT

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.

  1. Sivun otsikko
  2. Sivun alatunniste
  3. Navigointivalikko.

Jotta verkkopalvelin tunnistaisi palvelinpuolen sisällytyksiä, tiedostonimilla on erityiset tunnisteet. Web-palvelin hyväksyy yleensä ne, kuten .shtml, .stm, .shtm , .cgi.

Sisällön sisällyttämiseen käytetty direktiivi on "sisällytä direktiivi". Esimerkki sisällyttämisdirektiivistä 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

Angular tarjoaa toiminnon sisällyttää toimintoja muista AngularJS-tiedostoista käyttämällä ng-include -direktiiviä.

"ng-include-direktiivin" ensisijaista tarkoitusta käytetään ulkoisen HTML-fragmentin hakemiseen, kääntämiseen ja sisällyttämiseen AngularJS-pääsovellukseen.

Katsotaanpa alla olevaa koodipohjaa ja selitetään, kuinka tämä voidaan saavuttaa Angularilla.

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-repeat-ohjetta, joka käy läpi jokaisen "Tutorial"-muuttujan aiheen ja näyttää arvot "nimi" ja "kuvaus" avainarvoparille.

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

Vaihe 2) kirjoitetaan alla oleva koodi tiedostoon nimeltä Main.html. Tämä on yksinkertainen angular.JS-sovellus, jolla on seuraavat näkökohdat

  1. 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.
  2. Ohjaimessa "tutorial"-muuttuja luodaan osaksi $scope-objektia. Tämä muuttuja sisältää luettelon avain-arvo-pareista.

Esimerkissämme avainarvoparit ovat

  1. Nimi – Tämä tarkoittaa aiheen nimeä, kuten Ohjaimet, Mallit ja Direktiivit.
  2. 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:

Sisällytä HTML-tiedosto AngularJS:ään

Yhteenveto

  • Oletuksena tiedämme, että HTML ei tarjoa suoraa tapaa sisällyttää HTML-sisältöä muista tiedostoista, kuten muista ohjelmointikielet.
  • Javascript yhdessä JQueryn kanssa on paras vaihtoehto HTML-sisällön upottamiseen muista tiedostoista.
  • Toinen tapa sisällyttää HTML muiden tiedostojen sisältöä on käytettävä direktiivi ja virtuaaliparametrin avainsana. Virtuaaliparametrin avainsanaa käytetään kuvaamaan tiedostoa, joka on upotettava. Tämä tunnetaan nimellä palvelinpuolen sisällyttäminen.
  • Angular tarjoaa myös mahdollisuuden sisällyttää tiedostoja käyttämällä ng-include -direktiiviä. Tätä ohjetta voidaan käyttää syöttämään koodia ulkoisista tiedostoista suoraan HTML-päätiedostoon.