ng-include w AngularJS: Jak dołączyć plik HTML [Przykład]

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

Domyślnie HTML nie umożliwia dołączania kodu po stronie klienta z innych plików. Zwykle dobrą praktyką w każdym języku programowania jest dystrybucja funkcjonalności w różnych plikach dla dowolnej aplikacji.

Na przykład, gdybyś miał logikę dla operacji numerycznych, normalnie chciałbyś mieć tę funkcjonalność zdefiniowaną w jednym oddzielnym pliku. Ten oddzielny plik mógłby być następnie ponownie użyty w wielu aplikacjach, po prostu dołączając ten plik.

Zwykle jest to koncepcja Dołącz oświadczenia które są dostępne w językach programowania takich jak .Net i Java.

W tym samouczku omówiono inne sposoby dołączania plików (plików zawierających zewnętrzny kod HTML) do głównego pliku HTML.

Strona Klienta obejmuje

Jednym z najpopularniejszych sposobów jest dołączenie kodu HTML poprzez Javascript. JAVASCRIPT to język programowania, którego można używać do manipulowania zawartością strony HTML w locie. Stąd, Javascript można również użyć do włączenia kodu z innych plików.

Poniższe kroki pokazują, jak można to osiągnąć.

Krok 1) Zdefiniuj plik o nazwie Sub.html i dodaj do niego następujący kod.

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

Krok 2) Utwórz plik o nazwie Sample.html, który będzie głównym plikiem aplikacji i dodaj poniższy fragment kodu.

Poniżej znajdują się główne aspekty, na które należy zwrócić uwagę w związku z poniższym kodem,

  1. W znaczniku body znajduje się znacznik div, którego identyfikator to Treść. To miejsce, w którym zostanie wstawiony kod z zewnętrznego pliku „Sub.html”.
  2. Istnieje odniesienie do skryptu jquery. JQuery to język skryptowy zbudowany na bazie Javascript co sprawia, że ​​manipulacja DOM jest jeszcze łatwiejsza.
  3. W Javascript funkcji znajduje się instrukcja '$(“#Content”).load(“Sub.html”);' co powoduje wstrzyknięcie kodu z pliku Sub.html do znacznika div o identyfikatorze Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

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

POWIĄZANE ARTYKUŁY

Strona serwera obejmuje

Dostępne są również elementy dołączane po stronie serwera, umożliwiające dołączenie wspólnego fragmentu kodu w całej witrynie. Zwykle robi się to w celu dołączenia treści do poniższych części dokumentu HTML.

  1. Nagłówek
  2. Stopka stony
  3. Menu nawigacji.

Aby serwer WWW rozpoznał opcję Zawiera po stronie serwera, nazwy plików mają specjalne rozszerzenia. Są one zazwyczaj akceptowane przez serwer WWW, np. .shtml, .stm, .shtm, .cgi.

Dyrektywa używana do włączania treści to „dyrektywa włączająca”. Przykład dyrektywy include pokazano poniżej;

<!--#include virtual="navigation.cgi" -->
  • Powyższa dyrektywa pozwala na umieszczenie treści jednego dokumentu w innym.
  • Powyższe polecenie „wirtualne” służy do określenia celu względem katalogu głównego domeny aplikacji.
  • Oprócz parametru wirtualnego istnieje również parametr pliku, którego można użyć. Parametry „plik” są używane, gdy trzeba określić ścieżkę względem katalogu bieżącego pliku.

Uwaga:

Parametr wirtualny służy do określenia pliku (strony HTML, pliku tekstowego, skryptu itp.), który należy uwzględnić. Jeśli proces serwera WWW nie ma dostępu do odczytu pliku lub wykonania skryptu, wykonanie polecenia include zakończy się niepowodzeniem. Słowo „wirtualne” to słowo kluczowe, które należy umieścić w dyrektywie include.

Jak dołączyć plik HTML do AngularJS

Angular zapewnia funkcję włączania funkcjonalności z innych plików AngularJS za pomocą dyrektywy ng-include.

Podstawowym celem „dyrektywy ng-include” jest pobieranie, kompilowanie i dołączanie zewnętrznego fragmentu HTML do głównej aplikacji AngularJS.

Przyjrzyjmy się poniższej bazie kodu i wyjaśnijmy, jak można to osiągnąć za pomocą Angulara.

Krok 1) napiszmy poniższy kod w pliku o nazwie Table.html. Jest to plik, który zostanie wstrzyknięty do naszego głównego pliku aplikacji przy użyciu dyrektywy ng-include.

W poniższym fragmencie kodu założono, że istnieje zmienna zakresu o nazwie „samouczek”. Następnie używa dyrektywy ng-repeat, która przegląda każdy temat w zmiennej „Tutorial” i wyświetla wartości pary klucz-wartość „nazwa” i „opis”.

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

Krok 2) napiszmy poniższy kod w pliku o nazwie Main.html. To prosta aplikacja angular.JS, która ma następujące aspekty

  1. Użyj „dyrektywy ng-include”, aby wstrzyknąć kod do zewnętrznego pliku „Table.html”. W poniższym kodzie stwierdzenie zostało wyróżnione pogrubioną czcionką. Zatem znacznik div ' ' zostanie zastąpiony całym kodem z pliku „Table.html”.
  2. W kontrolerze jako część obiektu $scope tworzona jest zmienna „tutorial”. Ta zmienna zawiera listę par klucz-wartość.

W naszym przykładzie są to pary klucz-wartość

  1. Nazwa — oznacza nazwę tematu, takiego jak kontrolery, modele i dyrektywy.
  2. Description – Tutaj znajdziesz opis każdego tematu

Zmienna samouczka jest również dostępna w pliku „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>

Po wykonaniu powyższego kodu otrzymasz następujący wynik.

Wydajność:

Dołącz plik HTML do AngularJS

Podsumowanie

  • Domyślnie wiemy, że HTML nie zapewnia bezpośredniego sposobu dołączania treści HTML z innych plików, takich jak inne języki programowania.
  • Javascript wraz z JQuery jest najlepiej preferowaną opcją osadzania treści HTML z innych plików.
  • Inny sposób włączania HTML zawartość z innych plików polega na użyciu rozszerzenia dyrektywa i słowo kluczowe parametru wirtualnego. Słowo kluczowe parametru wirtualnego służy do oznaczenia pliku, który należy osadzić. Nazywa się to dołączeniami po stronie serwera.
  • Angular zapewnia także możliwość dołączania plików za pomocą dyrektywy ng-include. Dyrektywy tej można użyć do wstrzyknięcia kodu z plików zewnętrznych bezpośrednio do głównego pliku HTML.

Podsumuj ten post następująco: