Ng-include у AngularJS: Як включити файл HTML (Приклад)

Зміст:

Anonim

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

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

Зазвичай така концепція включає оператори, які доступні такими мовами програмування, як .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, який має ідентифікатор вмісту. 
    <сценарій>$ (function () {$ ("# Content"). Load ("Sub.html");});

Включає сторону сервера

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

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

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

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

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

Примітка:

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

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

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

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

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

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

У наведеному нижче фрагменті коду передбачається, що існує змінна області, яка називається "навчальний посібник". Потім він використовує директиву ng-repeat, яка проходить кожну тему у змінній "Підручник" і відображає значення для пари ключ-значення "ім'я" та "опис".

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

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

  1. Використовуйте директиву ng-include, щоб ввести код у зовнішній файл 'Table.html'. Заява була виділена жирним шрифтом у нижченаведеному коді. Тож тег div '
    '     буде замінений на весь код у файлі 'Table.html'.
  2. У контролері змінна "tutorial" створюється як частина об'єкта $ 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.