ng-include i AngularJS: Hvordan inkludere HTML-fil [Eksempel]

by: James Hartman James Hartman
Hours oppdatert

Som standard gir HTML ikke mulighet til å inkludere klientsidekode fra andre filer. Det er normalt en god praksis i et hvilket som helst programmeringsspråk å distribuere funksjonalitet på tvers av ulike filer for alle programmer.

For eksempel, hvis du hadde logikk for numeriske operasjoner, vil du normalt ha denne funksjonaliteten definert i en separat fil. Den separate filen kan deretter gjenbrukes på tvers av flere applikasjoner ved bare å inkludere den filen.

Dette er vanligvis konseptet Ta med utsagn som er tilgjengelig på programmeringsspråk som .Net og Java.

Denne opplæringen ser på andre måter filer (filer som inneholder ekstern HTML-kode) kan inkluderes i HTML-hovedfilen.

Kundesiden inkluderer

En av de vanligste måtene er å inkludere HTML-kode er via Javascript. JavaScript er et programmeringsspråk som kan brukes til å manipulere innholdet på en HTML-side i farten. Derfor, Javascript kan også brukes til å inkludere kode fra andre filer.

Trinnene nedenfor viser hvordan dette kan oppnås.

Trinn 1) Definer en fil kalt Sub.html og legg til følgende kode i filen.

<div>
	This is an included file
</div>

Trinn 2) Lag en fil kalt Sample.html, som er hovedprogramfilen din, og legg til kodebiten nedenfor.

Nedenfor er hovedaspektene å merke seg om koden nedenfor,

  1. I body-taggen er det en div-tag som har en ID for innhold. Dette er stedet der koden fra den eksterne filen 'Sub.html' vil bli satt inn.
  2. Det er en referanse til et jquery-skript. JQuery er et skriptspråk bygget på toppen av Javascript som gjør DOM-manipulering enda enklere.
  3. på Javascript funksjon, er det en setning '$(“#Content”).load(“Sub.html”);' som gjør at koden i filen Sub.html injiseres i div-taggen som har ID-en til Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

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

RELATERTE ARTIKLER

Serverside inkluderer

Server Side Includes er også tilgjengelige for å inkludere en felles kodebit på hele et nettsted. Dette gjøres vanligvis for å inkludere innhold i delene nedenfor av et HTML-dokument.

  1. Sideoverskrift
  2. Sidebunntekst
  3. Navigasjonsmeny.

For at en webserver skal gjenkjenne en Server Side Includes, har filnavnene spesielle utvidelser. De aksepteres vanligvis av webserveren som .shtml, .stm, .shtm , .cgi.

Direktivet som brukes for å inkludere innhold er "inkluder-direktivet". Et eksempel på inkluderingsdirektivet er vist nedenfor;

<!--#include virtual="navigation.cgi" -->
  • Ovennevnte direktiv tillater at innholdet i ett dokument kan inkluderes i et annet.
  • Den "virtuelle" kommandoen over koden brukes til å spesifisere målet i forhold til domeneroten til applikasjonen.
  • Til den virtuelle parameteren er det også filparameteren som kan brukes. "Fil"-parametrene brukes når man trenger å spesifisere banen i forhold til katalogen til den gjeldende filen.

OBS:

Den virtuelle parameteren brukes til å spesifisere filen (HTML-side, tekstfil, skript osv.) som må inkluderes. Hvis webserverprosessen ikke har tilgang til å lese filen eller utføre skriptet, vil include-kommandoen mislykkes. Det "virtuelle" ordet er et nøkkelord som må plasseres i inkluderingsdirektivet.

Hvordan inkludere HTML-fil i AngularJS

Angular gir funksjonen til å inkludere funksjonaliteten fra andre AngularJS-filer ved å bruke ng-include-direktivet.

Hovedformålet med "ng-include-direktivet" brukes til å hente, kompilere og inkludere et eksternt HTML-fragment i AngularJS-hovedapplikasjonen.

La oss se på kodebasen nedenfor og forklare hvordan dette kan oppnås ved å bruke Angular.

Trinn 1) la oss skrive koden nedenfor i en fil som heter Table.html. Dette er filen som vil bli injisert i hovedapplikasjonsfilen vår ved å bruke ng-include-direktivet.

Kodebiten nedenfor antar at det er en omfangsvariabel kalt "opplæring". Den bruker deretter ng-repeat-direktivet, som går gjennom hvert emne i "Tutorial"-variabelen og viser verdiene for nøkkelverdiparet 'navn' og 'beskrivelse'.

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

Trinn 2) la oss skrive koden nedenfor i en fil som heter Main.html. Dette er en enkel angular.JS-applikasjon som har følgende aspekter

  1. Bruk "ng-include-direktivet" for å injisere koden i den eksterne filen 'Table.html'. Uttalelsen er uthevet med fet skrift i koden nedenfor. Så div-taggen ' ' erstattes av hele koden i 'Table.html'-filen.
  2. I kontrolleren opprettes en "tutorial"-variabel som en del av $scope-objektet. Denne variabelen inneholder en liste over nøkkelverdi-par.

I vårt eksempel er nøkkelverdiparene

  1. Navn – Dette angir navnet på et emne som kontroller, modeller og direktiver.
  2. Description – Dette gir en beskrivelse av hvert emne

Opplæringsvariabelen er også tilgjengelig i 'Table.html'-filen.

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

Når du utfører koden ovenfor, vil du få følgende utgang.

Produksjon:

Inkluder HTML-fil i AngularJS

Sammendrag

  • Som standard vet vi at HTML ikke gir en direkte måte å inkludere HTML-innhold fra andre filer som andre programmerings språk.
  • Javascript sammen med JQuery er det best foretrukne alternativet for å bygge inn HTML-innhold fra andre filer.
  • En annen måte å inkludere HTML innhold fra andre filer er å bruke direktivet og nøkkelordet for virtuell parameter. Det virtuelle parameternøkkelordet brukes til å angi filen som må bygges inn. Dette er kjent som server-side inkluderer.
  • Angular gir også muligheten til å inkludere filer ved å bruke ng-include-direktivet. Dette direktivet kan brukes til å injisere kode fra eksterne filer direkte inn i HTML-hovedfilen.

Oppsummer dette innlegget med: