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

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

По умолчанию HTML не предоставляет возможности включать клиентский код из других файлов. Обычно в любом языке программирования хорошей практикой является распределение функциональных возможностей по различным файлам для любого приложения.

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

Обычно это концепция Включить утверждения которые доступны на таких языках программирования, как .Net и Java.

В этом руководстве рассматриваются другие способы включения файлов (файлов, содержащих внешний HTML-код) в основной HTML-файл.

Клиентская часть включает в себя

Одним из наиболее распространенных способов включения HTML-кода является использование Javascript. JavaСценарий — это язык программирования, который можно использовать для оперативного управления содержимым HTML-страницы. Следовательно, Javascript также может использоваться для включения кода из других файлов.

Следующие шаги показывают, как это можно сделать.

Шаг 1) Определите файл с именем Sub.html и добавьте в него следующий код.

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

Шаг 2) Создайте файл Sample.html, который является основным файлом вашего приложения, и добавьте приведенный ниже фрагмент кода.

Ниже приведены основные аспекты приведенного ниже кода, на которые следует обратить внимание.

  1. В теге body есть тег div с идентификатором Content. Это место, куда будет вставлен код из внешнего файла 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.

Как включить HTML-файл в AngularJS

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

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

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

Шаг 1) давайте напишем приведенный ниже код в файле Table.html. Это файл, который будет добавлен в наш основной файл приложения с помощью директивы ng-include.

В приведенном ниже фрагменте кода предполагается, что существует переменная области действия, называемая «tutorial». Затем он использует директиву 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, которое имеет следующие аспекты:

  1. Используйте «директиву ng-include», чтобы внедрить код во внешний файл «Table.html». Это утверждение выделено жирным шрифтом в приведенном ниже коде. Итак, тег div ' ' будет заменен всем кодом в файле Table.html.
  2. В контроллере переменная «учебник» создается как часть объекта $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.

Вы могли бы: