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

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

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

Обикновено това е концепцията за Включете изявления които са достъпни в езици за програмиране като .Net и Java.

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

В този урок ще научите-

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

Един от най -често срещаните начини е да включите HTML код чрез Javascript. JavaScript е език за програмиране, който може да се използва за манипулиране на съдържанието в HTML страница в движение. Следователно Javascript може да се използва и за включване на код от други файлове.

Стъпките по -долу показват как това може да се постигне.

Етап 1) Определете файл, наречен Sub.html и добавете следния код към файла. | _+_ |

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

По -долу са основните аспекти, които трябва да се вземат предвид по -долу кода,

  1. В body tag има div tag, който има идентификатор на Content. Това е мястото, където ще бъде вмъкнат кодът от външния файл „Sub.html“.
  2. Има препратка към скрипт jquery. JQuery е скриптов език, изграден върху Javascript, което прави манипулирането с DOM още по -лесно.
  3. Във функцията Javascript има израз '$ ('#Content '). Load (' Sub.html ');' което води до инжектиране на кода във файла Sub.html в маркера div, който има идентификатора на Content. | _+_ |

Сървърна страна Включва

Налични са и странични сървъри за включване на общ код в целия сайт. Това обикновено се прави за включване на съдържание в долните части на HTML документ.

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

За да може уеб сървърът да разпознава Server Side Includes, имената на файловете имат специални разширения. Те обикновено се приемат от уеб сървъра като .shtml, .stm, .shtm, .cgi.

Директивата, използвана за включване на съдържание, е „директивата за включване“. Пример за директивата за включване е показан по -долу; | _+_ |

  • Горната директива позволява съдържанието на един документ да бъде включено в друг.
  • Кодът „виртуален“ по -горе се използва за определяне на целта спрямо корена на домейна на приложението.
  • Също така към виртуалния параметър има и параметърът на файла, който може да се използва. Параметрите „файл“ се използват, когато човек трябва да посочи пътя спрямо директорията на текущия файл.

Забележка:

Виртуалният параметър се използва за определяне на файла (HTML страница, текстов файл, скрипт и т.н.), който трябва да бъде включен. Ако процесът на уеб сървъра няма достъп за четене на файла или изпълнение на скрипта, командата include ще се провали. „Виртуалната“ дума е ключова дума, която трябва да бъде поставена в директивата include.

Как да включите HTML файл в AngularJS

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

Основната цел на 'ng-include директивата' се използва за извличане, компилиране и включване на външен HTML фрагмент в основното приложение AngularJS.

Нека да разгледаме кодовата база по -долу и да обясним как това може да бъде постигнато с помощта на Angular.

Етап 1) нека напишем кода по -долу във файл, наречен Table.html. Това е файлът, който ще бъде инжектиран в основния ни файл с приложението, използвайки директивата ng-include.

Кодът по -долу предполага, че има променлива за обхват, наречена „tutorial“. След това използва директивата ng-repeat, която преминава през всяка тема в променливата „Урок“ и показва стойностите за двойката ключ-стойност „име“ и „описание“. | _+_ |

Стъпка 2) нека напишем кода по -долу във файл, наречен Main.html. Това е просто приложение angular.JS, което има следните аспекти

  1. Използвайте 'ng-include директивата', за да инжектирате кода във външния файл 'Table.html'. Изявлението е подчертано с удебелен шрифт в кода по -долу. Така че div tag ' ' ще бъде заменен от целия код във файла „Table.html“.
  2. В контролера се създава променлива „tutorial“ като част от обекта $ scope. Тази променлива съдържа списък с двойки ключ-стойност.

В нашия пример двойките ключови стойности са

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

Учебната променлива също е достъпна във файла 'Table.html'. | _+_ |

Когато изпълните горния код, ще получите следния изход.

Изход :

Резюме:

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