AngularJS ng-include: Включение HTML-файлов с примерами
Джеймс Хартман
⚡ Умное резюме
В AngularJS ng-include загружает, компилирует и внедряет внешний HTML-фрагмент в основную страницу, поэтому общая разметка, такая как таблица, заголовок или нижний колонтитул, находится в одном многократно используемом частичном файле.
По умолчанию HTML не предоставляет возможности включать клиентский код из других файлов. Обычно в любом языке программирования хорошей практикой является распределение функциональных возможностей по различным файлам для любого приложения.
Например, если у вас есть логика для числовых операций, обычно вам нужно, чтобы эта функциональность была определена в одном отдельном файле. Этот отдельный файл затем можно будет повторно использовать в нескольких приложениях, просто включив этот файл.
Обычно это концепция Включить утверждения которые доступны в языки программирования например, .Net и Java.
В этом руководстве рассматриваются другие способы работы с файлами (файлами, содержащими внешние файлы). HTML код) можно включить в основной HTML-файл.
Включает в себя: Включает в себя:
Один из наиболее распространенных способов включения HTML-кода — это использование JavaСценарий. JavaСценарий — это язык программирования, который можно использовать для оперативного управления содержимым HTML-страницы. Следовательно, JavaСкрипт также можно использовать для включения кода из других файлов.
Ниже описаны шаги, которые можно выполнить для достижения этой цели.
Шаг 1) Определите файл с именем Sub.html и добавьте в него следующий код.
<div> This is an included file </div>
Шаг 2) Создайте файл Sample.html, который является основным файлом вашего приложения, и добавьте приведенный ниже фрагмент кода.
Ниже приведены основные аспекты приведенного ниже кода, на которые следует обратить внимание.
- В теге body есть тег div с идентификатором Content. Это место, куда будет вставлен код из внешнего файла Sub.html.
- Здесь упоминается скрипт jQuery. jQuery — это язык сценариев, построенный на основе... JavaСкрипт, который значительно упрощает манипулирование DOM-деревом.
- В JavaВ функции скрипта есть оператор '$(“#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-документа.
- Заголовок страницы
- Нижний колонтитул страницы
- Меню навигации.
Для того чтобы веб-сервер распознал Server Side Include, имена файлов имеют специальные расширения. Обычно веб-сервер их принимает, например, .shtml, .stm, .shtm, .cgi.
Для включения контента используется директива `include`. Пример директивы `include` показан ниже:
<!--#include virtual="navigation.cgi" -->
- Приведенная выше директива позволяет включать содержимое одного документа в другой.
- «Виртуальная» команда выше кода используется для указания цели относительно корня домена приложения.
- Кроме того, помимо виртуального параметра есть еще и файловый параметр, который можно использовать. Параметры «файл» используются, когда необходимо указать путь относительно каталога текущего файла.
Примечание:
Виртуальный параметр используется для указания файла (HTML-страницы, текстового файла, сценария и т. д.), который необходимо включить. Если процесс веб-сервера не имеет доступа для чтения файла или выполнения сценария, команда включения завершится неудачей. «Виртуальное» слово — это ключевое слово, которое необходимо поместить в директиву include.
Как включить HTML-файл в AngularJS
AngularJS Предоставляет функцию для включения функциональности из других файлов AngularJS с помощью ng-include. Директивы.
Основная цель директивы ng-include — загрузить, скомпилировать и включить внешний HTML-фрагмент в основное приложение AngularJS.
Примечание к версии: Поддержка AngularJS 1.x в рамках долгосрочной программы поддержки прекратилась 31 декабря 2021 года, и команда разработчиков фреймворка заявляет, что... Поддержка AngularJS официально прекращена. В январе 2022 года, поэтому никаких релизов или исправлений безопасности не последовало. Каждый шаг и блок кода ниже остаются точно такими, какими были опубликованы, в качестве исторической справки. Современный Angular не предлагает прямой замены: разметка состоит из компонентов, а фрагмент, выбранный во время выполнения, отображается с помощью ng-контейнер и ngComponentOutlet.
Давайте рассмотрим приведенный ниже код и объясним, как этого можно достичь с помощью AngularJS.
Шаг 1) давайте напишем приведенный ниже код в файле Table.html. Это файл, который будет добавлен в наш основной файл приложения с помощью директивы ng-include.
Приведённый ниже фрагмент кода предполагает наличие переменной области видимости с именем «tutorial». Затем он использует нг-повторить директива, которая проходит по каждой теме в переменной «tutorial» и отображает значения для «Name» и «Description' пара ключ-значение.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Шаг 2) Давайте напишем приведенный ниже код в файле с именем Main.html. Это простое приложение AngularJS, которое имеет следующие особенности.
- Используйте «директиву ng-include», чтобы внедрить код во внешний файл «Table.html». Это утверждение выделено жирным шрифтом в приведенном ниже коде. Итак, тег div ' ' будет заменен всем кодом в файле Table.html.
- В контроллерВ рамках объекта $scope создается переменная типа «tutorial». Эта переменная содержит список пар ключ-значение.
В нашем примере пары ключ-значение:
- Имя — обозначает название темы, например «Контроллеры», «Модели» и «Директивы».
- Description – Здесь дается описание каждой темы
Доступ к учебной переменной также осуществляется в файле 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>
Когда вы выполните приведенный выше код, вы получите следующий результат.
Результат:
На скриншоте ниже показан результат рендеринга: вкладка браузера отображает заголовок «Регистрация на мероприятие», заголовок расположен над внедренной таблицей, а три строки берутся из массива tutorial в файле Main.html через частичный шаблон. На скриншоте с аннотациями заголовок написан как Gur99, а код выводит... Guru99.
Атрибуты ng-include: src, onload и autoscroll
Помимо имени файла, директива принимает два необязательных атрибута, и её можно записать тремя способами: как атрибут любого элемента, или как <ng-include> элемент или в виде CSS-класса. Приведенная ниже ссылка соответствует официальной документации. ngInclude документация.
| Атрибут | необходимые | Что она делает |
|---|---|---|
| src или ng-include | Да | Выражение, результатом которого является шаблон. URL |
| в процессе | Нет | Выражение оценивается каждый раз, когда завершается загрузка нового частичного фрагмента. |
| автопрокрутка | Нет | Вызывает `$anchorScroll` после загрузки контента; отсутствие атрибута отключает прокрутку. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Наиболее распространенная ошибка начинается с первого ряда: src занимает выражениеЭто не обычная строка. Поэтому для прямого пути необходимы собственные кавычки внутри атрибута, именно поэтому в приведенном выше примере это выглядит так: ng-include="'Table.html'". Письмо ng-include="Table.html" заставляет AngularJS выполняться Table В качестве свойства области видимости ничего не найти и оставить элемент пустым.
Почему ng-include создает новую дочернюю область видимости
Директива не вставляет разметку в окружающую область видимости. Каждое включение создает новый дочерний элемент. сфера что прототипически наследуется от области применения, в которой оно было заявлено, и что один факт объясняет большинство неожиданных моментов, определяющих его юридическую силу.
Чтение работает как ожидалось. Приведённый выше фрагмент текста выглядит следующим образом: tutorial прямо от родителей, поэтому ng-repeat Находит массив. Проблема возникает при записи: когда частичное присваивание значения примитивному типу, как в случае с ng-model="topic"AngularJS создает topic в дочерней области видимости, а родительская копия никогда не изменяется.
Две привычки помогают избежать этой ловушки:
- Привязка осуществляется через объект, например:
ng-model="data.topic"Таким образом, родитель и ребенок достигают одной и той же точки отсчета. - Храните состояние в контроллере или сервисе и предоставляйте доступ к функциям вместо простых примитивов.
Включаемый файл также генерирует $includeContentRequested, $includeContentLoaded и $includeContentError, поэтому родитель может отреагировать через $scope.$on без какого-либо доступа к дочерним элементам.
Как исправить пустой или некорректный ng-include
Включение, которое ничего не отображает, обычно завершается ошибкой по одной из нескольких причин. Прорабатывайте их в следующем порядке.
- Проверьте цитаты. Для указания имени файла в значении атрибута необходимо использовать одинарные кавычки. Без них выражение будет считаться неопределенным, и запрос не будет отправлен.
- Отправлять страницу по протоколу HTTP. Директива отправляет XHR-запрос для частичного файла, поэтому открытие файла Main.html напрямую с диска по его адресу не удается в большинстве браузеров. Любой локальный веб-сервер устраняет эту проблему.
- Убедитесь, что путь распознан. Следите за панелью «Сеть» для получения информации о запросе. Ошибка 404 означает, что путь является относительным к странице, на которой размещен включаемый файл, а не к частичному шаблону, который на него ссылается.
- Соблюдайте правило одинакового происхождения. По умолчанию шаблон URL Должно соответствовать домену и протоколу документа приложения, поскольку AngularJS передает их дальше. $sce.getTrustedResourceUrlШаблон, взятый из другого источника, должен быть внесен в список доверенных ресурсов. URL Если используется список или явная обертка trustAsResourceUrl, удаленный сервер все равно должен будет отправлять заголовки CORS.
- Прислушивайтесь к неудачам. Ошибка $includeContentError возникает всякий раз, когда статус ответа выходит за пределы диапазона от 200 до 299, превращая незаметную пустую область в сообщение, заслуживающее внимания.
Ещё одна причина, которую легко упустить из виду. AngularJS хранит каждый загруженный частичный шаблон в $templateCache, поэтому отредактированный файл может продолжать отображать устаревшую разметку до тех пор, пока запись в кэше не будет удалена или страница не будет перезагружена из исходного кода. Когда фрагменту требуется собственное поведение, а не только разметка, пользовательская директива Инструмент с собственным шаблоном и изолированной областью применения является более предпочтительным.
