Domyślnie HTML nie zapewnia możliwości dołączania kodu po stronie klienta z innych plików. W każdym języku programowania dobrą praktyką jest rozpowszechnianie funkcjonalności w różnych plikach dowolnej aplikacji.
Na przykład, jeśli masz logikę dla operacji numerycznych, normalnie chciałbyś mieć tę funkcjonalność zdefiniowaną w jednym oddzielnym pliku. Ten oddzielny plik można następnie ponownie wykorzystać w wielu aplikacjach, po prostu dołączając ten plik.
Zwykle jest to koncepcja instrukcji Include, które są dostępne w językach programowania, takich jak .Net i Java.
W tym samouczku przyjrzymy się innym sposobom włączania plików (zawierających zewnętrzny kod HTML) do głównego pliku HTML.
W tym samouczku nauczysz się:
- Po stronie klienta obejmuje
- Dołączenia po stronie serwera
- Jak dołączyć plik HTML do AngularJS
Po stronie klienta obejmuje
Jednym z najczęstszych sposobów jest dołączenie kodu HTML za pomocą JavaScript. JavaScript to język programowania, którego można używać do manipulowania zawartością strony HTML w locie. W związku z tym JavaScript może być również używany do dołączania 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 następujący kod do pliku.
To jest dołączony plik
Krok 2) Utwórz plik o nazwie Sample.html, który jest głównym plikiem aplikacji i dodaj poniższy fragment kodu.
Poniżej znajdują się główne aspekty dotyczące poniższego kodu, na które należy zwrócić uwagę,
- W tagu body znajduje się znacznik DIV, który ma identyfikator Treści. Jest to miejsce, w którym zostanie wstawiony kod z zewnętrznego pliku „Sub.html”.
- Istnieje odniesienie do skryptu jquery. JQuery to język skryptowy oparty na Javascript, który sprawia, że manipulowanie DOM jest jeszcze łatwiejsze.
- W funkcji Javascript znajduje się instrukcja '$ ("# Content"). Load ("Sub.html");' co powoduje, że kod z pliku Sub.html jest wstawiany do znacznika DIV, który ma identyfikator Treść.
Dołączenia po stronie serwera
Dołączenia po stronie serwera są również dostępne w celu dołączenia 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.
- Nagłówek
- Stopka stony
- Menu nawigacji.
Aby serwer WWW mógł rozpoznać dołączenia po stronie serwera, nazwy plików mają specjalne rozszerzenia. Zwykle są akceptowane przez serwer WWW, taki jak .shtml, .stm, .shtm, .cgi.
Dyrektywa używana do dołączania treści to „dyrektywa włączająca”. Przykład dyrektywy include jest pokazany poniżej;
- Powyższa dyrektywa pozwala na umieszczenie treści jednego dokumentu w innym.
- Polecenie „wirtualne” powyżej kodu 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ędną do katalogu, w którym znajduje się bieżący plik.
Uwaga:
Parametr wirtualny służy do określenia pliku (strony HTML, pliku tekstowego, skryptu itp.), Który ma zostać uwzględniony. Jeśli proces serwera WWW nie ma dostępu do odczytu pliku lub wykonania skryptu, polecenie dołączania zakończy się niepowodzeniem. Słowo „wirtualne” jest słowem kluczowym, które musi zostać umieszczone w dyrektywie włączającej.
Jak dołączyć plik HTML do AngularJS
Angular zapewnia funkcję włączania funkcji z innych plików AngularJS za pomocą dyrektywy ng-include.
Głównym 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. To jest plik, który zostanie wstrzyknięty do naszego głównego pliku aplikacji za pomocą dyrektywy ng-include.
Poniższy fragment kodu zakłada, że istnieje zmienna zakresu o nazwie „tutorial”. Następnie używa dyrektywy ng-repeat, która przechodzi przez każdy temat w zmiennej „Tutorial” i wyświetla wartości pary klucz-wartość „nazwa” i „opis”.
| {{Topic.Name}} | {{Topic.Country}} |
Krok 2) Napiszmy poniższy kod w pliku o nazwie Main.html. Jest to prosta aplikacja angular.JS, która ma następujące aspekty
- Użyj dyrektywy „ng-include”, aby wstrzyknąć kod do zewnętrznego pliku „Table.html”. Oświadczenie zostało wyróżnione pogrubioną czcionką w poniższym kodzie. Dlatego znacznik DIV „ ” zostanie zastąpiony całym kodem w pliku „Table.html”.
- W kontrolerze zmienna „tutorial” jest tworzona jako część obiektu $ scope. Ta zmienna zawiera listę par klucz-wartość.
W naszym przykładzie parami klucz-wartość są
- Nazwa - oznacza nazwę tematu, takiego jak kontrolery, modele i dyrektywy.
- Opis - zawiera opis każdego tematu
Dostęp do zmiennej samouczka można również uzyskać w pliku „Table.html”.
Rejestracja wydarzenia Globalne wydarzenie Guru99
Po wykonaniu powyższego kodu otrzymasz następujące dane wyjściowe.
Dane wyjściowe :
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 najbardziej preferowaną opcją osadzania treści HTML z innych plików.
- Innym sposobem włączenia treści HTML z innych plików jest użycie dyrektywy
i słowa kluczowego virtual parameter. Słowo kluczowe parametru wirtualnego jest używane do oznaczenia pliku, który ma zostać osadzony. Jest to znane jako dołączanie po stronie serwera. - Angular zapewnia również możliwość dołączania plików za pomocą dyrektywy ng-include. Tej dyrektywy można użyć do wstrzyknięcia kodu z plików zewnętrznych bezpośrednio do głównego pliku HTML.