По умолчанию HTML не предоставляет средства для включения клиентского кода из других файлов. Обычно на любом языке программирования рекомендуется распределять функциональность по различным файлам для любого приложения.
Например, если у вас есть логика для числовых операций, вы обычно хотите, чтобы эта функциональность была определена в одном отдельном файле. Этот отдельный файл можно затем повторно использовать в нескольких приложениях, просто включив этот файл.
Обычно это концепция операторов включения, которые доступны на таких языках программирования, как .Net и Java.
В этом руководстве рассматриваются другие способы включения файлов (файлов, содержащих внешний HTML-код) в основной файл HTML.
В этом уроке вы узнаете
Клиентская часть включает в себя
Одним из наиболее распространенных способов является включение кода HTML через Javascript. JavaScript — это язык программирования, который можно использовать для управления содержимым HTML-страницы на лету. Следовательно, Javascript также может быть использован для включения кода из других файлов.
Следующие шаги показывают, как это можно сделать.
Шаг 1) Определите файл с именем Sub.html и добавьте в него следующий код.
<div> This is an included file </div>
Шаг 2) Создайте файл с именем Sample.html, который является вашим основным файлом приложения, и добавьте приведенный ниже фрагмент кода.
Ниже приведены основные аспекты, которые следует отметить относительно приведенного ниже кода.
- В теге body есть тег div, который имеет идентификатор Content. Это место, куда будет вставлен код из внешнего файла Sub.html.
- Есть ссылка на скрипт jquery. JQuery — это язык сценариев, построенный поверх Javascript, который делает манипулирование DOM еще проще
- В функции Javascript есть оператор ‘$ («# Content»). Load («Sub.html»);’ в результате код в файле Sub.html будет вставлен в тег div, имеющий идентификатор Content.
<html> <head> <script src="/jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Серверная часть Включает
Включения на стороне сервера также доступны для включения общего фрагмента кода по всему сайту. Обычно это делается для включения содержимого в следующие части HTML-документа.
- Заголовок страницы
- Нижний колонтитул страницы
- Меню навигации.
Для того, чтобы веб-сервер распознал серверные включения, имена файлов имеют специальные расширения. Они обычно принимаются веб-сервером, таким как .shtml, .stm, .shtm, .cgi.
Директива, используемая для включения контента, является «директивой включения». Пример директивы include показан ниже;
<!--#include virtual="navigation.cgi" -->
- Приведенная выше директива позволяет включать содержимое одного документа в другой.
- Код «Виртуальная», приведенный выше, используется для указания цели относительно корня домена приложения.
- Кроме того, для виртуального параметра есть также параметр файла, который можно использовать. Параметры «файл» используются, когда необходимо указать путь относительно каталога текущего файла.
Замечания:
Виртуальный параметр используется для указания файла (HTML-страницы, текстового файла, сценария и т. Д.), Который необходимо включить. Если процесс веб-сервера не имеет доступа для чтения файла или выполнения сценария, команда include завершится неудачно. «Виртуальное» слово — это ключевое слово, которое необходимо поместить в директиву включения.
Как включить HTML-файл в AngularJS
Angular предоставляет функцию для включения функций из других файлов AngularJS с помощью директивы ng-include.
Основная цель «директивы ng-include» используется для извлечения, компиляции и включения внешнего HTML-фрагмента в основное приложение AngularJS.
Давайте посмотрим на приведенную ниже базу кода и объясним, как этого можно добиться с помощью Angular.
Шаг 1) давайте напишем приведенный ниже код в файле с именем Table.html. Это файл, который будет вставлен в наш основной файл приложения с помощью директивы ng-include.
В приведенном ниже фрагменте кода предполагается, что существует переменная области видимости, называемая «учебник». Затем он использует директиву ng-repeat, которая просматривает каждую тему в переменной «Tutorial» и отображает значения для пары ключ-значение «имя» и «описание».
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Country }}</td>
</tr>
</table>
Шаг 2) давайте напишем приведенный ниже код в файле с именем Main.html. Это простое приложение angular.JS, которое имеет следующие аспекты
- Используйте «директиву ng-include», чтобы внедрить код во внешний файл «Table.html». Заявление выделено жирным шрифтом в приведенном ниже коде. Таким образом, тег div ‘ <div ng-include = «‘ Table.html ‘»> </ div>’ будет заменен на весь код в файле ‘Table.html’.
- В контроллере переменная «tutorial» создается как часть объекта $ scope. Эта переменная содержит список пар ключ-значение.
В нашем примере пары ключ-значение
- Имя. Обозначает название темы, такой как «Контроллеры, Модели и Директивы».
- Описание — это дает описание каждой темы
Обучающая переменная также доступна в файле 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>
Когда вы выполните приведенный выше код, вы получите следующий вывод.
Выход :
Резюме:
- По умолчанию мы знаем, что HTML не обеспечивает прямой способ включения содержимого HTML из других файлов, таких как другие языки программирования.
- Javascript вместе с JQuery является наиболее предпочтительным вариантом для встраивания содержимого HTML из других файлов.
- Другим способом включения содержимого HTML из других файлов является использование директивы <include> и ключевого слова виртуального параметра. Ключевое слово виртуального параметра используется для обозначения файла, который необходимо внедрить. Это называется включением на стороне сервера.
- Angular также предоставляет возможность включать файлы с помощью директивы ng-include. Эта директива может использоваться для вставки кода из внешних файлов непосредственно в основной файл HTML.