ng-include в AngularJS: Як включити файл HTML [Приклад]

Автор: Джеймс Гартман Джеймс Гартман
Hours оновлений

За замовчуванням HTML не надає можливості включати клієнтський код з інших файлів. Зазвичай у будь-якій мові програмування є хорошою практикою розподіляти функції між різними файлами для будь-якої програми.

Наприклад, якби у вас була логіка для числових операцій, ви, як правило, хотіли б мати цю функціональність визначену в одному окремому файлі. Цей окремий файл можна було б повторно використовувати в кількох програмах, просто включивши цей файл.

Зазвичай це концепція Включайте заяви які доступні в таких мовах програмування, як .Net і Java.

У цьому підручнику розглядаються інші способи включення файлів (файлів, які містять зовнішній код HTML) до основного файлу HTML.

Клієнтська сторона включає

Одним із найпоширеніших способів є додавання HTML-коду через Javascript. JavaScript це мова програмування, яка може бути використана для маніпулювання вмістом сторінки HTML на льоту. Отже, Javascript також можна використовувати для включення коду з інших файлів.

Наведені нижче кроки показують, як це можна зробити.

Крок 1) Визначте файл під назвою Sub.html і додайте до нього наступний код.

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

Крок 2) Створіть файл під назвою Sample.html, який є основним файлом програми, і додайте наведений нижче фрагмент коду.

Нижче наведено основні аспекти коду, на які слід звернути увагу.

  1. У тегу body є тег div, який має ідентифікатор вмісту. Це місце, куди буде вставлено код із зовнішнього файлу "Sub.html".
  2. Є посилання на сценарій jquery. JQuery — це мова сценаріїв, побудована на основі Javascript що робить роботу з DOM ще простішою.
  3. У 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.

  1. Заголовок сторінки
  2. Нижній колонтитул сторінки
  3. Навігаційне меню.

Щоб веб-сервер міг розпізнавати серверні включення, імена файлів мають спеціальні розширення. Зазвичай вони приймаються веб-сервером, наприклад .shtml, .stm, .shtm, .cgi.

Директива, яка використовується для включення вмісту, є «директива включення». Приклад директиви include наведено нижче;

<!--#include virtual="navigation.cgi" -->
  • Наведена вище директива дозволяє включати вміст одного документа в інший.
  • Наведена вище команда «віртуальна» використовується для вказівки цілі відносно кореня домену програми.
  • Окрім віртуального параметра, є також параметр файлу, який можна використовувати. Параметри «файл» використовуються, коли потрібно вказати шлях відносно каталогу поточного файлу.

Примітка:

Віртуальний параметр використовується для визначення файлу (сторінки HTML, текстового файлу, сценарію тощо), який необхідно включити. Якщо процес веб-сервера не має доступу для читання файлу або виконання сценарію, команда include не вдасться виконати. «Віртуальне» слово — це ключове слово, яке необхідно розмістити в директиві include.

Як включити файл HTML в AngularJS

Angular надає функцію для включення функцій з інших файлів AngularJS за допомогою директиви ng-include.

Основне призначення «директиви ng-include» використовується для отримання, компіляції та включення зовнішнього HTML-фрагмента в основну програму AngularJS.

Давайте розглянемо наведену нижче базу коду та пояснимо, як цього можна досягти за допомогою Angular.

Крок 1) запишемо наведений нижче код у файлі під назвою Table.html. Це файл, який буде вставлено в наш основний файл програми за допомогою директиви ng-include.

Наведений нижче фрагмент коду припускає, що існує змінна області видимості під назвою «tutorial». Потім він використовує директиву ng-repeat, яка переглядає кожну тему в змінній «Навчальний посібник» і відображає значення для пари ключ-значення «ім’я» та «опис».

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

Крок 2) запишемо наведений нижче код у файлі під назвою Main.html. Це проста програма angular.JS, яка має такі аспекти

  1. Використовуйте директиву «ng-include», щоб додати код у зовнішній файл «Table.html». Заява виділена жирним шрифтом у коді нижче. Тож тег div ' ' буде замінено на весь код у файлі 'Table.html'.
  2. У контролері змінна «tutorial» створюється як частина об’єкта $scope. Ця змінна містить список пар ключ-значення.

У нашому прикладі пари ключ-значення є

  1. Назва – це вказує на назву теми, як-от контролери, моделі та директиви.
  2. 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>

Коли ви виконаєте наведений вище код, ви отримаєте наступний результат.

Вихід:

Включити файл HTML в AngularJS

Підсумки

  • За замовчуванням ми знаємо, що HTML не надає прямого способу включення вмісту HTML з інших файлів, як інші мови програмування.
  • Javascript разом із JQuery є найкращим варіантом для вбудовування вмісту HTML з інших файлів.
  • Інший спосіб включення HTML вміст з інших файлів — використовувати директива та ключове слово віртуального параметра. Ключове слово віртуального параметра використовується для позначення файлу, який потрібно вставити. Це відомо як включення на стороні сервера.
  • Angular також надає можливість включати файли за допомогою директиви ng-include. Цю директиву можна використовувати для введення коду із зовнішніх файлів безпосередньо в основний файл HTML.

Вам може сподобатися: