Š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.

tekstualno besplatno slanje i primanje tekstualnih poruka na mreži

MAKEUSEOF VIDEO DANA

Š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.
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.

Stvoriti nova aplikacija Angular .
U terminalu svoje aplikacije pokrenite generirane komponente naredba za stvaranje nove komponente. Nazovite novu komponentu 'about-page'.
```
ng generate component about-page
```
U app.component.html, zamijenite trenutni kod oznakama za svoju novu komponentu:
```
<app-about-page></app-about-page>
```
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 sljedećim:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

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

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

U terminalu upišite od služiti da kompajlirate svoj kod i pokrenete ga u web pregledniku. Otvorite svoju aplikaciju na http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
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.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

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

<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>

Vratite se u preglednik ili ponovno pokrenite od služiti za ponovno kompajliranje vašeg koda. Otvorite svoju aplikaciju na http://localhost:4200/. The browser now renders the HTML from the 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.

kako ukloniti događaje iz kalendara za iPhone

U svojoj prethodno stvorenoj Angular aplikaciji otvorite about-page.component.ts datoteka. Komponenti dodajte atribut 'styles'. Unutar 'stilova' dodajte svoj CSS stil za stranicu:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
U terminalu upišite od služiti da kompajlirate svoj kod i pokrenete ga u web pregledniku. Otvorite svoju aplikaciju na http://localhost:4200/ to view the styling specified in the TypeScript file.
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 sa sljedećim:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```

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

h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}

Vratite se u preglednik ili ponovno pokrenite od služiti za ponovno kompajliranje vašeg koda. Otvorite svoju aplikaciju na http://localhost:4200/ to view the styles used from the external CSS file.

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.