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

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

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

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

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

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

Клиентска страна включва
Включва сървърната страна
Как да включите HTML файл в AngularJS

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

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

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

Стъпка 1) Дефинирайте файл, наречен Sub.html, и добавете следния код към файла.

Това е включен файл

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

По-долу са посочени основните аспекти за кода по-долу,

В маркера на тялото има div таг, който има идентификатор на Content. Това е мястото, където ще бъде вмъкнат кодът от външния файл „Sub.html“.
Има препратка към jquery скрипт. JQuery е скриптов език, изграден върху Javascript, който прави манипулацията с DOM още по-лесна.
Във функцията на Javascript има изявление '$ ("# Content"). Load ("Sub.html");' което води до инжектиране на кода във файла Sub.html в div тага, който има идентификатора на Content.
```
<скрипт>$ (функция () {$ ("# Content"). Load ("Sub.html");}); 
```

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

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

Заглавка на страницата
Долен колонтитул на страницата
Меню за навигация.

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

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

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

Забележка:

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

Как да включите 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, което има следните аспекти

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

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

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

Учебната променлива е достъпна и във файла „Table.html“.

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

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

Изход :

Резюме:

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