Ng-include в AngularJS: как включить HTML-файл (пример)

Содержание:

Anonim

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

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

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

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

В этом руководстве вы узнаете:

  • Клиентская сторона включает
  • Серверная сторона включает
  • Как включить HTML-файл в AngularJS

Клиентская сторона включает

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

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

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

Это включенный файл

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

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

  1. В теге body есть тег div с идентификатором Content. Это место, куда будет вставлен код из внешнего файла Sub.html.
  2. Есть ссылка на скрипт jquery. JQuery - это язык сценариев, построенный на основе Javascript, который еще больше упрощает манипуляции с DOM.
  3. В функции Javascript есть инструкция '$ ("# Content"). Load ("Sub.html");' что приводит к тому, что код в файле Sub.html будет вставлен в тег div с идентификатором Content. 
    <сценарий>$ (function () {$ ("# Content"). Load ("Sub.html");});

Серверная сторона включает

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

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

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

Директива, используемая для включения содержимого, - это «директива включения». Пример директивы include показан ниже;

  • Вышеупомянутая директива позволяет включать содержимое одного документа в другой.
  • Приведенная выше команда "virtual" используется для указания цели относительно корня домена приложения.
  • Кроме того, к виртуальному параметру есть также параметр файла, который можно использовать. Параметры «файл» используются, когда нужно указать путь относительно каталога текущего файла.

Примечание:

Параметр virtual используется для указания файла (HTML-страница, текстовый файл, сценарий и т. Д.), Который необходимо включить. Если процесс веб-сервера не имеет доступа для чтения файла или выполнения сценария, команда include завершится ошибкой. «Виртуальное» слово - это ключевое слово, которое необходимо поместить в директиву include.

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

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

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

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

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

В приведенном ниже фрагменте кода предполагается, что существует переменная области действия, называемая «учебник». Затем он использует директиву ng-repeat, которая проходит по каждой теме в переменной «Tutorial» и отображает значения для пары «ключ-значение» «имя» и «описание».

<таблица>
 {{Topic.Name}}  {{Topic.Country}}

Шаг 2) давайте напишем приведенный ниже код в файл с именем Main.html. Это простое приложение angular.JS, которое имеет следующие аспекты

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

В нашем примере пары ключ-значение:

  1. Имя - обозначает название темы, например, контроллеры, модели и директивы.
  2. Описание - дает описание каждой темы.

Переменная учебника также доступна в файле Table.html.

 Регистрация на мероприятие 


Глобальное событие Guru99


 
<сценарий>var sampleApp = angular.module ('sampleApp', []);sampleApp.controller ('AngularController', функция ($ scope) {$ scope.tutorial = [{Название: "Контроллеры", Описание: "Контроллеры в действии"},{Название: "Модели", Описание: "Модели и данные привязки"},{Название: «Директивы», Описание: «Гибкость директив»}];});

Когда вы выполните приведенный выше код, вы получите следующий результат.

Выход :

Резюме:

  • По умолчанию мы знаем, что HTML не предоставляет прямого способа включения HTML-содержимого из других файлов, таких как другие языки программирования.
  • Javascript вместе с JQuery - лучший вариант для встраивания HTML-содержимого из других файлов.
  • Другой способ включения HTML-содержимого из других файлов - использование директивы и ключевого слова виртуального параметра. Ключевое слово виртуального параметра используется для обозначения файла, который необходимо встроить. Это называется включением на стороне сервера.
  • Angular также предоставляет возможность включать файлы с помощью директивы ng-include. Эта директива может использоваться для вставки кода из внешних файлов непосредственно в основной файл HTML.