ng-include в AngularJS: Как да включите HTML файл [Пример]
По подразбиране HTML не предоставя възможност за включване на клиентски код от други файлове. Обикновено е добра практика във всеки език за програмиране да се разпределят функционалности в различни файлове за всяко приложение.
Например, ако имате логика за числови операции, обикновено бихте искали тази функционалност да е дефинирана в един отделен файл. След това този отделен файл може да се използва повторно в множество приложения само чрез включване на този файл.
Това обикновено е концепцията за Включете изявления които се предлагат в езици за програмиране като .Net и Java.
Този урок разглежда други начини, по които файлове (файлове, които съдържат външен HTML код) могат да бъдат включени в основния HTML файл.
Страната на клиента включва
Един от най-често срещаните начини е да включите HTML код е чрез Javascript. JavaСценарий е език за програмиране, който може да се използва за манипулиране на съдържанието в HTML страница в движение. следователно Javascript може да се използва и за включване на код от други файлове.
Стъпките по-долу показват как може да се постигне това.
Етап 1) Дефинирайте файл, наречен Sub.html, и добавете следния код към файла.
<div> This is an included file </div>
Стъпка 2) Създайте файл, наречен Sample.html, който е вашият основен файл на приложението, и добавете кодовия фрагмент по-долу.
По-долу са основните аспекти, които трябва да се отбележат относно кода по-долу,
- В етикета body има етикет div, който има id на Content. Това е мястото, където ще бъде вмъкнат кодът от външния файл 'Sub.html'.
- Има препратка към jquery скрипт. JQuery е скриптов език, изграден върху Javascript което прави манипулирането на DOM още по-лесно.
- в Javascript функция, има израз '$(“#Content”).load(“Sub.html”);' което кара кода във файла Sub.html да бъде инжектиран в тага div, който има id на Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Server Side Includes
Включванията от страна на сървъра също са достъпни за включване на обща част от кода в целия сайт. Това обикновено се прави за включване на съдържание в долните части на HTML документ.
- Заглавка на страницата
- Долен колонтитул на страница
- Навигационно меню.
За да може уеб сървърът да разпознае включеното от страната на сървъра, имената на файловете имат специални разширения. Те обикновено се приемат от уеб сървъра като .shtml, .stm, .shtm, .cgi.
Директивата, използвана за включване на съдържание, е „директивата за включване“. Пример за директива за включване е показан по-долу;
<!--#include virtual="navigation.cgi" -->
- Горната директива позволява съдържанието на един документ да бъде включено в друг.
- „Виртуалната“ команда по-горе код се използва за указване на целта спрямо корена на домейна на приложението.
- Освен това към виртуалния параметър има и файлов параметър, който може да се използва. Параметрите „файл“ се използват, когато трябва да се укаже пътят спрямо директорията на текущия файл.
Забележка:
Виртуалният параметър се използва за указване на файла (HTML страница, текстов файл, скрипт и т.н.), който трябва да бъде включен. Ако процесът на уеб сървъра няма достъп за четене на файла или изпълнение на скрипта, командата за включване ще бъде неуспешна. „Виртуалната“ дума е ключова дума, която трябва да бъде поставена в директивата за включване.
Как да включите HTML файл в AngularJS
Angular предоставя функцията за включване на функционалността от други AngularJS файлове чрез използване на директивата ng-include.
Основната цел на директивата „ng-include“ се използва за извличане, компилиране и включване на външен HTML фрагмент в основното AngularJS приложение.
Нека да разгледаме кодовата база по-долу и да обясним как това може да се постигне с помощта на Angular.
Стъпка 1) нека напишем кода по-долу във файл, наречен Table.html. Това е файлът, който ще бъде инжектиран в нашия основен файл на приложението с помощта на директивата ng-include.
Кодовият фрагмент по-долу предполага, че има променлива на обхвата, наречена „урок“. След това използва директивата 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 приложение, което има следните аспекти
- Използвайте директивата „ng-include“, за да инжектирате кода във външния файл „Table.html“. Изявлението е подчертано с удебелен шрифт в кода по-долу. Така че етикетът div ' ' ще бъде заменен от целия код във файла „Table.html“.
- В контролера се създава променлива „урок“ като част от обекта $scope. Тази променлива съдържа списък от двойки ключ-стойност.
В нашия пример двойките ключ стойност са
- Име – Това обозначава името на тема като контролери, модели и директиви.
- 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>
Когато изпълните горния код, ще получите следния изход.
Продукция:
Oбобщение
- По подразбиране знаем, че HTML не предоставя директен начин за включване на HTML съдържание от други файлове като други програмни езици.
- Javascript заедно с JQuery е най-предпочитаната опция за вграждане на HTML съдържание от други файлове.
- Друг начин за включване HTML съдържание от други файлове е да използвате директива и ключовата дума за виртуален параметър. Ключовата дума за виртуален параметър се използва за обозначаване на файла, който трябва да бъде вграден. Това е известно като включвания от страна на сървъра.
- Angular също предоставя възможност за включване на файлове чрез използване на директивата ng-include. Тази директива може да се използва за инжектиране на код от външни файлове директно в основния HTML файл.