Шта су темплатеУрлс и стилеУрлс у Ангулару?

Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.

Користећи Ангулар, можете да одвојите странице, дијалоге или друге делове апликације у компоненте. Компоненте у Ангулар апликацији се углавном састоје од ХТМЛ, ЦСС и ТипеСцрипт датотека.

У ТипеСцрипт датотеци можете додати било коју логику потребну за рад корисничког интерфејса, као што је преузимање података са сервера.

Такође можете да прикажете ХТМЛ и ЦСС компоненте користећи ТипеСцрипт, тако што ћете навести њене атрибуте шаблона и стила. Можете да користите темплатеУрл или стилеУрлс за повезивање са спољним ХТМЛ или ЦСС датотекама.

Шта је шаблон и темплатеУрл у Ангулар-у?

Када ти креирајте сопствену компоненту у Ангулару, можете да прикажете ХТМЛ за њега користећи шаблон. Постоје два начина на које можете написати свој ХТМЛ шаблон:

• Можете написати свој ХТМЛ код унутар шаблона у самој датотеци ТипеСцрипт.
instagram viewer
• Можете да упишете свој ХТМЛ код у спољну датотеку и повежете ТипеСцрипт датотеку са овом ХТМЛ датотеком.

У новој компоненти можете подесити атрибуте "темплате" или "темплатеУрл" у зависности од тога где пишете свој ХТМЛ.

1. Створити нова апликација Ангулар.
2. У терминалу ваше апликације покрените нг генератор компонента команду за креирање нове компоненте. Позовите нову компоненту „абоут-паге“.

   нг генерише компоненту о страници

3. У апп.цомпонент.хтмл, замените тренутни код са ознакама за вашу нову компоненту:

   <апп-абоут-паге></app-about-page>

4. Отвори абоут-паге.цомпонент.тс фајл. Ако немате пуно ХТМЛ кода, можете користити атрибут шаблона да га упишете директно у ТипеСцрипт датотеку. Замените @Цомпонент декоратер са следећим:

   @Саставни део({
    селектор: 'апп-абоут-паге',
    шаблон: '<х2>Абоут Паге</h2><бр><стр>Ово је приказивање ХТМЛ-а из ТипеСцрипт датотеке!</п>'
   })
   

5. Ако желите да укључите шаблон са више редова, уместо њега можете да користите наводнике:

   @Саставни део({
    селектор: 'апп-абоут-паге',
    шаблон: `<х2>Абоут Паге</h2>
   <бр>
   <стр>Ово је приказивање ХТМЛ-а из ТипеСцрипт датотеке!</п>`
   })

6. У терминалу откуцајте нг служе да компајлирате свој код и покренете га у веб претраживачу. Отворите апликацију на http://localhost: 4200/. Ваш ХТМЛ код из ТипеСцрипт датотеке ће се приказати на страници.
7. У абоут-паге.цомпонент.тс, замените "темплате" са "темплатеУрл". Укључите везу до спољне ХТМЛ датотеке компоненте. Можете да користите „темплатеУрл“ ако имате сложенији ХТМЛ код који захтева сопствену датотеку.

   @Саставни део({
    селектор: 'апп-абоут-паге',
    темплатеУрл: './абоут-паге.цомпонент.хтмл'
   })

8. Додајте неки ХТМЛ код у абоут-паге.цомпонент.хтмл фајл:

   <х2>Абоут Паге</h2>
   <стр>Ово је приказивање ХТМЛ-а из ХТМЛ датотеке!</п>

9. Вратите се у прегледач или поново покрените нг служе да поново компајлирате свој код. Отворите апликацију на http://localhost: 4200/. Прегледач сада приказује ХТМЛ из абоут-паге.цомпонент.хтмл фајл.

Шта су стилови и стилеУрл-ови у Ангулару?

Слично ХТМЛ-у, можете користити или "стиле" или "стилеУрлс" у зависности од тога где одлучите да чувате свој ЦСС.

Можете укључити ЦСС унутар ТипеСцрипт кода ако имате врло једноставне ЦСС декларације. У супротном, можете користити „стилеУрлс“ да повежете ТипеСцрипт датотеку са спољним ЦСС-ом који садржи више стилова.

1. У вашој претходно креираној Ангулар апликацији, отворите абоут-паге.цомпонент.тс фајл. Додајте атрибут "стилес" компоненти. Унутар „стилова“, додајте свој ЦСС стил за страницу:

   @Саставни део({
    селектор: 'апп-абоут-паге',
    темплатеУрл: './абоут-паге.цомпонент.хтмл',
    стилови: ['х2 {боја: црвена}','п {боја: зелена}']
   })

2. У терминалу откуцајте нг служе да компајлирате свој код и покренете га у веб претраживачу. Отворите апликацију на http://localhost: 4200/ да бисте видели стил наведен у датотеци ТипеСцрипт.
3. Ако имате пуно ЦСС-а, користите „стилеУрлс“ уместо „стилес“ да бисте повезали ТипеСцрипт датотеку са спољном ЦСС датотеком. У абоут-паге.цомпонент.тс, замените @Цомпонент декоратер са следећим:

   @Саставни део({
    селектор: 'апп-абоут-паге',
    темплатеУрл: './абоут-паге.цомпонент.хтмл',
    стилеУрлс: ['./абоут-паге.цомпонент.цсс']
   })

4. Додајте неки ЦСС стил абоут-паге.цомпонент.цсс:

   х2 {
    боја: плава
   }
   п {
    боја: тамно наранџаста
   }

5. Вратите се у прегледач или поново покрените нг служе да поново компајлирате свој код. Отворите апликацију на http://localhost: 4200/ за преглед стилова који се користе из спољне ЦСС датотеке.

Рендеровање ХТМЛ-а компоненте у Ангулар-у

Сада знате на које различите начине можете да прикажете свој ХТМЛ и ЦСС садржај у Ангулар апликацији. Можете одредити који приступ желите да користите на основу сложености вашег ХТМЛ-а и ЦСС-а.

Ако сте заинтересовани, можете истражити како да пренесете податке између ХТМЛ и ТипеСцрипт датотека Ангулар компоненте.