Što su templateUrls i styleUrls u Angularu?

Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.

Pomoću Angulara možete razdvojiti stranice, dijaloške okvire ili druge odjeljke svoje aplikacije u komponente. Komponente u Angular aplikaciji uglavnom se sastoje od HTML, CSS i TypeScript datoteka.

U TypeScript datoteku možete dodati bilo koju logiku potrebnu za rad korisničkog sučelja, kao što je dohvaćanje podataka s poslužitelja.

Također možete prikazati HTML i CSS komponente pomoću TypeScripta, navođenjem atributa predloška i stila. Možete koristiti templateUrl ili styleUrls za povezivanje s vanjskim HTML ili CSS datotekama.

Što je predložak i templateUrl u Angularu?

Kada ti izradite vlastitu komponentu u Angularu, možete prikazati HTML za njega pomoću predloška. Dva su načina na koje možete napisati svoj HTML predložak:

• Svoj HTML kod možete napisati unutar predloška u samoj TypeScript datoteci.
instagram viewer
• Možete napisati svoj HTML kod u vanjsku datoteku i povezati TypeScript datoteku s ovom HTML datotekom.

U novoj komponenti možete postaviti atribute "template" ili "templateUrl", ovisno o tome gdje pišete svoj HTML.

1. Stvoriti nova aplikacija Angular.
2. U terminalu svoje aplikacije pokrenite ng generirati komponentu naredba za stvaranje nove komponente. Nazovite novu komponentu "about-page".

   ng generiranje komponente About-page

3. U app.component.html, zamijenite trenutni kod oznakama za svoju novu komponentu:

   <stranica o aplikaciji></app-about-page>

4. Otvori about-page.component.ts datoteka. Ako nemate puno HTML koda, možete upotrijebiti atribut predloška da ga upišete izravno u datoteku TypeScript. Zamijenite dekorater @Component sa sljedećim:

   @Komponenta({
    selektor: 'stranica o aplikaciji',
    predložak: '<h2>O stranici</h2><br><str>Ovo je renderiranje HTML-a iz TypeScript datoteke!</str>'
   })
   

5. Ako želite uključiti predložak s više redaka, umjesto toga možete upotrijebiti navodnike:

   @Komponenta({
    selektor: 'stranica o aplikaciji',
    predložak: `<h2>O stranici</h2>
   <br>
   <str>Ovo je renderiranje HTML-a iz TypeScript datoteke!</str>`
   })

6. U terminalu upišite ng poslužiti da kompajlirate svoj kod i pokrenete ga u web pregledniku. Otvorite svoju aplikaciju na http://localhost: 4200/. Vaš HTML kod iz TypeScript datoteke prikazat će se na stranici.
7. U about-page.component.ts, zamijenite "template" s "templateUrl". Uključite vezu na vanjsku HTML datoteku komponente. Možete koristiti "templateUrl" ako imate složeniji HTML kod koji zahtijeva vlastitu datoteku.

   @Komponenta({
    selektor: 'stranica o aplikaciji',
    predložakUrl: './about-page.component.html'
   })

8. Dodajte neki HTML kod u about-page.component.html datoteka:

   <h2>O stranici</h2>
   <str>Ovo je renderiranje HTML-a iz HTML datoteke!</str>

9. Vratite se u preglednik ili ponovno pokrenite ng poslužiti za ponovno kompajliranje vašeg koda. Otvorite svoju aplikaciju na http://localhost: 4200/. Preglednik sada prikazuje HTML iz about-page.component.html datoteka.

Što su stilovi i styleUrls u Angularu?

Slično HTML-u, možete koristiti "style" ili "styleUrls", ovisno o tome gdje odaberete pohraniti svoj CSS.

Možete uključiti CSS unutar TypeScript koda ako imate vrlo jednostavne CSS deklaracije. Inače, možete koristiti "styleUrls" za povezivanje TypeScript datoteke s vanjskim CSS-om koji sadrži više stilova.

1. U svojoj prethodno stvorenoj Angular aplikaciji otvorite about-page.component.ts datoteka. Komponenti dodajte atribut "styles". Unutar "stilova" dodajte svoj CSS stil za stranicu:

   @Komponenta({
    selektor: 'stranica o aplikaciji',
    predložakUrl: './about-page.component.html',
    stilovi: ['h2 {boja: crvena}','p {boja: zelena}']
   })

2. U terminalu upišite ng poslužiti da kompajlirate svoj kod i pokrenete ga u web pregledniku. Otvorite svoju aplikaciju na http://localhost: 4200/ za pregled stila navedenog u TypeScript datoteci.
3. Ako imate puno CSS-a, upotrijebite "styleUrls" umjesto "styles", da povežete TypeScript datoteku s vanjskom CSS datotekom. U about-page.component.ts, zamijenite dekorater @Component sljedećim:

   @Komponenta({
    selektor: 'stranica o aplikaciji',
    predložakUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Dodajte malo CSS stila about-page.component.css:

   h2 {
    boja: plava
   }
   p {
    boja: tamnonarandžasta
   }

5. Vratite se u preglednik ili ponovno pokrenite ng poslužiti za ponovno kompajliranje vašeg koda. Otvorite svoju aplikaciju na http://localhost: 4200/ za prikaz korištenih stilova iz vanjske CSS datoteke.

Prikaz HTML-a komponente u Angularu

Sada znate različite načine na koje možete prikazati svoj HTML i CSS sadržaj u Angular aplikaciji. Možete odrediti koji pristup želite koristiti na temelju složenosti vašeg HTML-a i CSS-a.

Ako ste zainteresirani, možete istražiti kako prenijeti podatke između HTML i TypeScript datoteka Angular komponente.