ХТМЛ подразумевано не пружа могућност укључивања кода на страни клијента из других датотека. Обично је добра пракса у било ком програмском језику дистрибуција функционалности у различитим датотекама за било коју апликацију.
На пример, ако имате логику за нумеричке операције, обично бисте желели да та функционалност буде дефинисана у једној одвојеној датотеци. Тада би се та одвојена датотека могла поново користити у више апликација само укључивањем те датотеке.
То је обично концепт наредби Инцлуде који су доступни у програмским језицима као што су .Нет и Јава.
Ово упутство ће размотрити друге начине на које се датотеке (датотеке које садрже спољни ХТМЛ код) могу укључити у главну ХТМЛ датотеку.
У овом упутству ћете научити-
- Клијентска страна укључује
- На страни сервера је укључено
- Како укључити ХТМЛ датотеку у АнгуларЈС
Клијентска страна укључује
Један од најчешћих начина је укључивање ХТМЛ кода путем Јавасцрипта. ЈаваСцрипт је програмски језик који се у ходу може користити за манипулацију садржајем на ХТМЛ страници. Дакле, Јавасцрипт се такође може користити за укључивање кода из других датотека.
Следећи кораци показују како се то може постићи.
Корак 1) Дефинишите датотеку под називом Суб.хтмл и додајте јој следећи код.
<див>Ово је укључена датотека
Корак 2) Направите датотеку звану Сампле.хтмл, која је ваша главна датотека апликације, и додајте доњи исечак кода.
Испод су главни аспекти које треба приметити у вези са доњим кодом,
- У ознаци тела налази се див ознака која има ид Садржаја. Ово је место где ће бити уметнут код из спољне датотеке „Суб.хтмл“.
- Постоји референца на јкуери скрипту. ЈКуери је скриптни језик изграђен на врху Јавасцрипта који чини ДОМ манипулацију још лакшом.
- У Јавасцрипт функцији постоји израз '$ ("# Цонтент"). Лоад ("Суб.хтмл");' због чега се код у датотеци Суб.хтмл убацује у див ознаку која има ид Садржаја.
<хтмл><хеад><сцрипт срц = "/ јкуери.јс"> <сцрипт>$ (функција () {$ ("# Цонтент"). Лоад ("Суб.хтмл");});<боди><див>
На страни сервера је укључено
Сервер Инцлудес су такође доступни за укључивање уобичајеног дела кода на целој локацији. То се обично ради за укључивање садржаја у доле наведене делове ХТМЛ документа.
- Заглавље странице
- Подножје странице
- Мени за навигацију.
Да би веб сервер препознао Сервер Сиде Инцлудес, имена датотека имају посебне наставке. Обично их прихвата веб сервер као што су .схтмл, .стм, .схтм, .цги.
Директива која се користи за укључивање садржаја је „укључи директиву“. Пример директиве инцлуде је приказан у наставку;
- Горња директива омогућава да се садржај једног документа уврсти у други.
- Команда „виртуелна“ изнад се користи за одређивање циља у односу на корен домена апликације.
- Такође, уз виртуелни параметар постоји и параметар датотеке који се може користити. Параметри „датотека“ се користе када треба одредити путању у односу на директоријум тренутне датотеке.
Белешка:
Виртуелни параметар се користи за одређивање датотеке (ХТМЛ страница, текстуална датотека, скрипта итд.) Коју треба укључити. Ако процес веб сервера нема приступ за читање датотеке или извршавање скрипте, наредба укључи неће успети. „Виртуелна“ реч је кључна реч која се мора ставити у директиву укључивања.
Како укључити ХТМЛ датотеку у АнгуларЈС
Ангулар пружа функцију за укључивање функционалности из других датотека АнгуларЈС помоћу нг-инцлуде директиве.
Примарна сврха „нг-инцлуде директиве“ користи се за дохватање, компајлирање и укључивање спољног ХТМЛ фрагмента у главну апликацију АнгуларЈС.
Погледајмо доњу основу кода и објаснимо како се то може постићи коришћењем Ангулар-а.
Корак 1) напишимо доњи код у датотеку која се зове Табле.хтмл. Ово је датотека која ће бити убачена у нашу главну датотеку апликације помоћу директиве нг-инцлуде.
Доле наведени фрагмент кода претпоставља да постоји променљива опсега која се назива „туториал“. Затим користи директиву нг-репеат која пролази кроз сваку тему у променљивој „Водич“ и приказује вредности за пар кључ-вредност „име“ и „опис“.
<табле><тр нг-репеат = "Тема у водичу"><тд> {{Топиц.Наме}} <тд> {{Топиц.Цоунтри}}
Корак 2) напишимо доњи код у датотеку под називом Маин.хтмл. Ово је једноставна ангулар.ЈС апликација која има следеће аспекте
- Користите „нг-инцлуде директиву“ за убризгавање кода у спољну датотеку „Табле.хтмл“. Изјава је у доњем коду истакнута подебљаним словима. Дакле, див ознака ' <див нг-инцлуде = "' Табле.хтмл '"> ' биће замењена целим кодом у датотеци 'Табле.хтмл'.
- У контролеру се креира променљива „туториал“ као део објекта опсега $. Ова променљива садржи листу парова кључ / вредност.
У нашем примеру, парови кључних вредности су
- Име - Ово означава назив теме као што су контролери, модели и директиве.
- Опис - Ово даје опис сваке теме
Водичу променљива се такође приступа у датотеци „Табле.хтмл“.
<хтмл><хеад><мета цхарсет = "УТФ-8"><титле> Регистрација догађаја <сцрипт срц = "хттп://ајак.гооглеапис.цом/ајак/либс/ангуларјс/1.6.4/ангулар.мин.јс"> <боди нг-апп = "самплеАпп"><див нг-цонтроллер = "АнгуларЦонтроллер"><х3> Гуру99 глобални догађај <див нг-инцлуде = "'Табле.хтмл'"> <сцрипт>вар самплеАпп = ангулар.модуле ('самплеАпп', []);самплеАпп.цонтроллер ('АнгуларЦонтроллер', функција ($ опсег) {$ сцопе.туториал = [{Име: "Цонтроллерс", Опис: "Цонтроллерс ин ацтион"},{Име: "Модели", Опис: "Модели и подаци о везивању"},{Назив: "Директиве", Опис: "Флексибилност директива"}];});
Када извршите горњи код, добићете следећи излаз.
Излаз :
Резиме:
- Подразумевано знамо да ХТМЛ не пружа директан начин за укључивање ХТМЛ садржаја из других датотека, попут других програмских језика.
- Јавасцрипт је заједно са ЈКуери-јем најпожељнија опција за уграђивање ХТМЛ садржаја из других датотека.
- Други начин укључивања ХТМЛ садржаја из других датотека је коришћење директиве <инцлуде> и кључне речи виртуелног параметра. Кључна реч виртуелни параметар користи се за означавање датотеке коју треба уградити. Ово је познато под називом „страна укључује сервер“.
- Ангулар такође пружа могућност укључивања датотека помоћу нг-инцлуде директиве. Ова директива се може користити за убризгавање кода из спољних датотека директно у главну ХТМЛ датотеку.