AngularJS ng-include: Включення HTML-файлів з прикладом
Джеймс Гартман
⚡ Розумний підсумок
ng-include в AngularJS отримує, компілює та вставляє зовнішній фрагмент HTML на головну сторінку, тому спільна розмітка, така як таблиця, заголовок або нижній колонтитул, зберігається в одному частковому файлі, який можна використовувати повторно.
За замовчуванням HTML не надає можливості включати клієнтський код з інших файлів. Зазвичай у будь-якій мові програмування є хорошою практикою розподіляти функції між різними файлами для будь-якої програми.
Наприклад, якби у вас була логіка для числових операцій, ви, як правило, хотіли б мати цю функціональність визначену в одному окремому файлі. Цей окремий файл можна було б повторно використовувати в кількох програмах, просто включивши цей файл.
Зазвичай це концепція Включайте заяви які доступні в мови програмування такі як .Net та Java.
У цьому посібнику розглядаються інші способи роботи з файлами (файлами, що містять зовнішні HTML код) можна включити до основного HTML-файлу.
Включає сторону клієнта
Один з найпоширеніших способів включення HTML-коду – це через JavaСценарій. JavaScript це мова програмування, яка може бути використана для маніпулювання вмістом сторінки HTML на льоту. Отже, JavaСкрипт також можна використовувати для включення коду з інших файлів.
Наведені нижче кроки показують, як цього можна досягти.
Крок 1) Визначте файл під назвою Sub.html і додайте до нього наступний код.
<div> This is an included file </div>
Крок 2) Створіть файл під назвою Sample.html, який є основним файлом програми, і додайте наведений нижче фрагмент коду.
Нижче наведено основні аспекти коду, на які слід звернути увагу.
- У тегу body є тег div, який має ідентифікатор вмісту. Це місце, куди буде вставлено код із зовнішнього файлу "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 не вдасться виконати. «Віртуальне» слово — це ключове слово, яке необхідно розмістити в директиві 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». Потім використовується ng-повтор директива, яка переглядає кожну тему у змінній «tutorial» та відображає значення для «Name» та «Descriptпара ключ-значення ion.
<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 створюється змінна-"підручник". Ця змінна містить список пар ключ-значення.
У нашому прикладі пари ключ-значення є
- Назва – це вказує на назву теми, як-от контролери, моделі та директиви.
- 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>
Коли ви виконаєте наведений вище код, ви отримаєте наступний результат.
Вихід:
Знімок екрана нижче показує відображений результат: вкладка браузера має заголовок «Реєстрація події», заголовок розташований над вставленою таблицею, а три рядки витягуються з масиву навчального посібника в 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
Включення, яке нічого не відображає, зазвичай не спрацьовує з однієї з кількох причин. Розгляньте їх у такому порядку.
- Перевірте цитати. Літеральне ім'я файлу потребує одинарних лапок всередині значення атрибута. Без них вираз приймає значення undefined, і запит ніколи не надсилається.
- Обслуговувати сторінку через HTTP. Директива видає XHR для часткового коду, тому відкриття Main.html безпосередньо з диска через адресу файлу не вдається у більшості браузерів. Будь-який локальний веб-сервер очищує це.
- Переконайтеся, що шлях вирішено. Слідкуйте за мережевою панеллю для запиту. Код 404 означає, що шлях вказано відносно сторінки, на якій розміщено включення, а не відносно часткового елемента, який на нього посилається.
- Дотримуйтесь правила однакового походження. За замовчуванням шаблон URL має збігатися з доменом та протоколом документа програми, оскільки AngularJS передає його через $sce.getTrustedResourceUrlШаблон з іншого джерела потребує запису в надійному ресурсі. URL список або явну обгортку trustAsResourceUrl, і віддалений сервер все одно має надсилати заголовки CORS.
- Прислухайтеся до невдачі. $includeContentError спрацьовує щоразу, коли статус відповіді виходить за межі від 200 до 299, перетворюючи мовчазно порожню область на повідомлення, яке варто записати в журнал.
Ще одну причину легко пропустити. AngularJS зберігає кожен отриманий фрагмент у $templateCache, тому відредагований файл може продовжувати обслуговувати застарілу розмітку, доки запис кешу не буде видалено або сторінка не буде перезавантажена з вихідного коду. Коли фрагмент потребує власної поведінки, а не лише розмітки, користувацька директива з власним шаблоном та ізольованою областю застосування є кращим інструментом.
