AngularJS ng-include: Включване на HTML файлове с пример
Джеймс Хартман
⚡ Умно обобщение
ng-include в AngularJS извлича, компилира и инжектира външен HTML фрагмент в главната страница, така че споделената маркировка, като например таблица, заглавка или долен колонтитул, се намира в един многократно използваем частичен файл.
По подразбиране HTML не предоставя възможност за включване на клиентски код от други файлове. Обикновено е добра практика във всеки език за програмиране да се разпределят функционалности в различни файлове за всяко приложение.
Например, ако имате логика за числови операции, обикновено бихте искали тази функционалност да е дефинирана в един отделен файл. След това този отделен файл може да се използва повторно в множество приложения само чрез включване на този файл.
Това обикновено е концепцията за Включете изявления които са налични в програмни езици като например .Net и Java.
Този урок разглежда други начини за работа с файлове (файлове, които съдържат външни HTML код) може да бъде включен в основния HTML файл.
Включва от страна на клиента
Един от най-често срещаните начини за включване на HTML код е чрез JavaСценарий. JavaСценарий е език за програмиране, който може да се използва за манипулиране на съдържанието в HTML страница в движение. следователно JavaСкриптът може да се използва и за включване на код от други файлове.
Стъпките по-долу показват как това може да се постигне.
Стъпка 1) Дефинирайте файл, наречен Sub.html, и добавете следния код към файла.
<div> This is an included file </div>
Стъпка 2) Създайте файл, наречен Sample.html, който е вашият основен файл на приложението, и добавете кодовия фрагмент по-долу.
По-долу са основните аспекти, които трябва да се отбележат относно кода по-долу,
- В етикета body има етикет div, който има id на Content. Това е мястото, където ще бъде вмъкнат кодът от външния файл 'Sub.html'.
- Има препратка към jQuery скрипт. jQuery е скриптов език, изграден върху JavaСкрипт, който прави манипулацията на DOM още по-лесна.
- в JavaФункция на скрипта, има оператор '$(“#Content”).load(“Sub.html”);', който кара кода от файла Sub.html да бъде инжектиран в тага div, който има идентификатор на 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 документ.
- Заглавка на страницата
- Долен колонтитул на страница
- Навигационно меню.
За да може уеб сървърът да разпознае Server Side Include, имената на файловете имат специални разширения. Те обикновено се приемат от уеб сървъра, като например .shtml, .stm, .shtm, .cgi.
Директивата, използвана за включване на съдържание, е „include директива“. Пример за include директива е показан по-долу:
<!--#include virtual="navigation.cgi" -->
- Горната директива позволява съдържанието на един документ да бъде включено в друг.
- „Виртуалната“ команда по-горе код се използва за указване на целта спрямо корена на домейна на приложението.
- Освен това към виртуалния параметър има и файлов параметър, който може да се използва. Параметрите „файл“ се използват, когато трябва да се укаже пътят спрямо директорията на текущия файл.
Забележка:
Виртуалният параметър се използва за указване на файла (HTML страница, текстов файл, скрипт и т.н.), който трябва да бъде включен. Ако процесът на уеб сървъра няма достъп за четене на файла или изпълнение на скрипта, командата за включване ще бъде неуспешна. „Виртуалната“ дума е ключова дума, която трябва да бъде поставена в директивата за включване.
Как да включите HTML файл в AngularJS
AngularJS предоставя функцията за включване на функционалността от други AngularJS файлове чрез използване на ng-include Директива.
Основната цел на директивата „ng-include“ е да извлече, компилира и включи външен HTML фрагмент в основното AngularJS приложение.
Бележка към версията: AngularJS 1.x напусна дългосрочната поддръжка на 31 декември 2021 г. и екипът на рамката заявява, че Поддръжката на AngularJS официално приключи през януари 2022 г., така че не следват издания или корекции за сигурност. Всяка стъпка и блок от код по-долу остават точно както са публикувани, като историческата справка. Modern Angular не предлага директен заместител: маркировката е съставена от компоненти и фрагмент, избран по време на изпълнение, се рендира с ng-контейнер и ngComponentOutlet.
Нека разгледаме кодовата база по-долу и да обясним как това може да се постигне с помощта на AngularJS.
Стъпка 1) нека напишем кода по-долу във файл, наречен Table.html. Това е файлът, който ще бъде инжектиран в нашия основен файл на приложението с помощта на директивата ng-include.
Следният фрагмент от код предполага, че има променлива в обхвата, наречена „tutorial“. След това се използва ng-повтаряне директива, която преминава през всяка тема в променливата „tutorial“ и показва стойностите за „Name“ и „Descriptдвойка ключ-стойност „ion“.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Стъпка 2) Нека напишем кода по-долу във файл, наречен Main.html. Това е просто AngularJS приложение, което има следните аспекти
- Използвайте директивата „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>
Когато изпълните горния код, ще получите следния изход.
Продукция:
Снимката по-долу показва рендирания резултат: разделът на браузъра носи заглавието „Регистрация на събитие“, заглавието се намира над инжектираната таблица, а трите реда са извлечени от масива на урока в Main.html чрез частичния елемент. Анотираната екранна снимка изписва заглавието Gur99, докато кодът пише Guru99.
ng-include Атрибути: src, onload и autoscroll
Освен името на файла, директивата приема два незадължителни атрибута и може да бъде записана по три начина: като атрибут на всеки елемент, като <ng-include> елемент или като CSS клас. Препратката по-долу следва официалния документация за ngInclude.
| Атрибут | Длъжен | Какво го прави |
|---|---|---|
| src или ng-include | Да | Израз, който се оценява като шаблон URL |
| при натоварване | Не | Изразът се оценява всеки път, когато завърши зареждането на нов частичен елемент. |
| автоматично превъртане | Не | Извиква $anchorScroll след зареждане на съдържанието; пропускането на атрибута деактивира скролирането |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Най-често срещаната грешка следва от първия ред: src взема изразяване, а не обикновен низ. Следователно, буквалният път се нуждае от собствени кавички вътре в атрибута, поради което примерът по-горе гласи ng-include="'Table.html'". Писане ng-include="Table.html" кара AngularJS да оценява Table като свойство на обхвата, не намирайте нищо и оставете елемента празен.
Защо ng-include създава нов дъщерен обхват
Директивата не поставя маркировка в обкръжаващата я област. Всяко включване създава ново дете. обхват което наследява прототипно от обхвата, в който е декларирано, и този един факт обяснява повечето изненади при обвързване.
Четенето работи както се очаква. Частичният код по-горе гласи tutorial директно от родителя, поради което ng-repeat намира масива. Записването е мястото, където нещата се прекъсват: когато частично присвоява на примитив, както е при ng-model="topic", AngularJS създава topic в дъщерния обхват и родителското копие никога не се променя.
Два навика ви предпазват от капана:
- Свързване чрез обект, както в
ng-model="data.topic", така че родителят и детето достигат до една и съща референция. - Запазете състоянието в контролер или услуга и изложете функции вместо голи примитиви.
Включването също излъчва $includeContentRequested, $includeContentLoaded намлява $includeContentError, така че родителят може да реагира чрез $scope.$on без изобщо да се достига до обхвата на детето.
Как да поправите празен или неуспешен ng-include
Включване, което не рендира нищо, обикновено се проваля поради една от няколко причини. Разгледайте ги в този ред.
- Проверете цитатите. Литералното име на файл се нуждае от единични кавички в стойността на атрибута. Без тях изразът се разрешава като неопределен и никога не се изпраща заявка.
- Обслужвайте страницата през HTTP. Директивата издава XHR за частичния код, така че отварянето на Main.html директно от диск чрез файлов адрес е неуспешно в повечето браузъри. Всеки локален уеб сървър изчиства това.
- Потвърдете, че пътят е решен. Следете мрежовия панел за заявката. Код 404 означава, че пътят е относителен към страницата, която хоства включването, а не към частта, която го препраща.
- Спазвайте правилото за един и същ произход. По подразбиране шаблонът URL трябва да съответства на домейна и протокола на документа на приложението, защото AngularJS го предава през $sce.getTrustedResourceUrlШаблон от другаде се нуждае от запис в надеждния ресурс. URL списък или изрична обвивка trustAsResourceUrl и отдалеченият сървър все още трябва да изпраща CORS заглавки.
- Ослушайте се за провала. $includeContentError се задейства, когато статусът на отговора падне извън диапазона от 200 до 299, превръщайки безшумно празна област в съобщение, което си струва да се запише в регистрационен файл.
Още една причина е лесна за пропускане. AngularJS съхранява всяка извлечена част в $templateCache, така че редактиран файл може да продължи да показва остаряла маркировка, докато записът в кеша не бъде премахнат или страницата не бъде презаредена от изходния код. Когато даден фрагмент се нуждае от собствено поведение, а не само от маркировка, персонализирана директива със собствен шаблон и изолиран обхват е по-добрият инструмент.
