Cosa sono templateUrls e styleUrls in Angular?

I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.

Utilizzando Angular, puoi separare pagine, finestre di dialogo o altre sezioni della tua app in componenti. I componenti in un'applicazione Angular sono costituiti principalmente da file HTML, CSS e TypeScript.

Nel file TypeScript, puoi aggiungere qualsiasi logica richiesta per il funzionamento dell'interfaccia utente, ad esempio il recupero di dati da un server.

Puoi anche eseguire il rendering dell'HTML e del CSS del componente utilizzando TypeScript, specificando i suoi attributi di template e style. Puoi utilizzare templateUrl o styleUrls per collegarti a file HTML o CSS esterni.

Che cos'è il template e il templateUrl in Angular?

Quando tu crea il tuo componente in Angular, puoi eseguire il rendering dell'HTML utilizzando un modello. Esistono due modi per scrivere il modello HTML:

• Puoi scrivere il tuo codice HTML all'interno di un modello nel file TypeScript stesso.
• Puoi scrivere il tuo codice HTML in un file esterno e collegare il file TypeScript a questo file HTML.

In un nuovo componente, puoi impostare gli attributi "template" o "templateUrl" a seconda di dove scrivi il codice HTML.

1. Creare un nuova app angolare.
2. Nel terminale della tua applicazione, esegui il file ng generare componente comando per creare un nuovo componente. Chiama il nuovo componente "about-page".

   ng genera componente about-page

3. In app.component.html, sostituisci il codice corrente con i tag per il tuo nuovo componente:

   <app-about-page></app-about-page>

4. Apri il about-page.component.ts file. Se non disponi di molto codice HTML, puoi utilizzare l'attributo template per scriverlo direttamente all'interno del file TypeScript. Sostituisci il decoratore @Component con quanto segue:

   @Componente({
    selettore: 'app-about-page',
    modello: '<h2>Informazioni sulla pagina</h2><fratello><P>Questo sta rendendo l'HTML dal file TypeScript!</P>'
   })
   

5. Se desideri includere un modello con più righe, puoi invece utilizzare le virgolette di apice inverso:

   @Componente({
    selettore: 'app-about-page',
    modello: `<h2>Informazioni sulla pagina</h2>
   <fratello>
   <P>Questo sta rendendo l'HTML dal file TypeScript!</P>`
   })

6. Nel terminale, digita ng servire per compilare il codice ed eseguirlo in un browser web. Apri la tua app su http://localhost: 4200/. Il tuo codice HTML dal file TypeScript verrà visualizzato sulla pagina.
7. In about-page.component.ts, sostituisci invece "template" con "templateUrl". Includere il collegamento al file HTML esterno del componente. Puoi utilizzare "templateUrl" se hai un codice HTML più complesso che richiede il proprio file.

   @Componente({
    selettore: 'app-about-page',
    modelloURL: './about-page.component.html'
   })

8. Aggiungi del codice HTML al file about-page.component.html file:

   <h2>Informazioni sulla pagina</h2>
   <P>Questo sta rendendo l'HTML dal file HTML!</P>

9. Torna al tuo browser o riesegui ng servire per ricompilare il codice. Apri la tua app su http://localhost: 4200/. Il browser ora esegue il rendering dell'HTML dal file about-page.component.html file.

Cosa sono gli stili e gli styleUrl in Angular?

Analogamente all'HTML, puoi utilizzare "style" o "styleUrls" a seconda di dove scegli di archiviare il tuo CSS.

Puoi includere CSS all'interno del codice TypeScript se hai dichiarazioni CSS molto semplici. Altrimenti, puoi utilizzare "styleUrls" per collegare il file TypeScript a un CSS esterno che contiene più stili.

1. Nell'applicazione Angular creata in precedenza, apri il file about-page.component.ts file. Aggiungi un attributo "styles" al componente. All'interno di "stili", aggiungi il tuo stile CSS per la pagina:

   @Componente({
    selettore: 'app-about-page',
    modelloURL: './about-page.component.html',
    stili: ['h2 {colore: rosso}','p {colore: verde}']
   })

2. Nel terminale, digita ng servire per compilare il codice ed eseguirlo in un browser web. Apri la tua app su http://localhost: 4200/ per visualizzare lo stile specificato nel file TypeScript.
3. Se hai molti CSS, usa "styleUrls" invece di "styles", per collegare il file TypeScript a un file CSS esterno. In about-page.component.ts, sostituire il decoratore @Component con quanto segue:

   @Componente({
    selettore: 'app-about-page',
    modelloURL: './about-page.component.html',
    stileUrl: ['./about-page.component.css']
   })

4. Aggiungi un po' di stile CSS a about-page.component.css:

   h2 {
    colore blu
   }
   P {
    colore: arancione scuro
   }

5. Torna al tuo browser o riesegui ng servire per ricompilare il codice. Apri la tua app su http://localhost: 4200/ per visualizzare gli stili utilizzati dal file CSS esterno.

Rendering dell'HTML di un componente in Angular

Ora conosci i diversi modi in cui puoi rendere i tuoi contenuti HTML e CSS in un'applicazione Angular. Puoi determinare quale approccio desideri utilizzare in base alla complessità del tuo HTML e CSS.

Se sei interessato, puoi esplorare come passare i dati tra i file HTML e TypeScript di un componente Angular.