¿Qué son templateUrls y styleUrls en Angular?

Aprenda los conceptos básicos de la representación de HTML y CSS, al estilo Angular.


Con Angular, puede separar páginas, cuadros de diálogo u otras secciones de su aplicación en componentes. Los componentes de una aplicación Angular se componen principalmente de archivos HTML, CSS y TypeScript.


En el archivo TypeScript, puede agregar cualquier lógica necesaria para que funcione la interfaz de usuario, como la recuperación de datos de un servidor.

También puede representar el HTML y CSS del componente utilizando TypeScript, especificando su plantilla y atributos de estilo. Puede usar templateUrl o styleUrls para vincular a archivos HTML o CSS externos.


¿Qué es template y templateUrl en Angular?

Cuando crea su propio componente en Angular, puede representar el HTML usando una plantilla. Puede escribir su plantilla HTML de dos maneras:

  • Puede escribir su código HTML en una plantilla dentro del mismo archivo TypeScript.
  • Puede escribir su código HTML en un archivo externo y vincular el archivo TypeScript a este archivo HTML.

En un nuevo componente, puede establecer los atributos “plantilla” o “templateUrl” según dónde escriba su código HTML.

  1. Cree una nueva aplicación angular.
  2. En la terminal de su aplicación, inicie el ng generar componente comando para crear un nuevo componente. Llame al nuevo componente “acerca de la página”.
    ng generate component about-page
  3. Dentro aplicación.componente.html, reemplace el código actual con marcado para su nuevo componente:
    <app-about-page></app-about-page>
  4. Abre el about-page.component.ts carpetas. Si no tiene mucho código HTML, puede usar el atributo de plantilla para escribirlo directamente en el archivo TypeScript. Reemplace el decorador @Component con lo siguiente:
    @Component({
    selector: 'app-about-page',
    template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>'
    })
  5. Si desea incluir un patrón de varias líneas, puede usar comillas inversas en su lugar:
    @Component({
    selector: 'app-about-page',
    template: `<h2>About Page</h2>
    <br>
    <p>This is rendering the HTML from the TypeScript file!</p>`
    })
  6. En la terminal, escriba ng servir para compilar su código y ejecutarlo en un navegador web. Abra su aplicación en http://localhost:4200/. Su HTML del archivo TypeScript se mostrará en la página.
    Navegador con componentes que representan HTML usando un archivo TS

  7. Dentro about-page.component.ts, reemplace “plantilla” con “templateUrl” en su lugar. Incluya el enlace al archivo HTML externo del componente. Puede usar “templateUrl” si tiene HTML más complejo que requiere su propio archivo.
    @Component({
    selector: 'app-about-page',
    templateUrl: './about-page.component.html'
    })
  8. Agregar código HTML a about-page.component.html carpetas:
    <h2>About Page</h2>
    <p>This is rendering the HTML from the HTML file!</p>
  9. Vuelva a su navegador o reinicie ng servir para recompilar su código. Abra su aplicación en http://localhost:4200/. El navegador ahora muestra HTML desde el about-page.component.html carpetas.
    Navegador con componentes que representan HTML usando un archivo HTML

¿Qué son los estilos y styleUrls en Angular?

Al igual que con HTML, puede usar “estilo” o “styleUrls” dependiendo de dónde elija almacenar su CSS.

Puede incluir CSS en código TypeScript si tiene declaraciones CSS muy simples. Alternativamente, puede usar “styleUrls” para vincular el archivo TypeScript a un CSS externo que contenga más estilos.

  1. En su aplicación Angular creada anteriormente, abra el about-page.component.ts carpetas. Agregue un atributo de “estilos” al componente. En “estilos”, agregue su estilo CSS para la página:
    @Component({
    selector: 'app-about-page',
    templateUrl: './about-page.component.html',
    styles: ['h2 {color:red}','p {color:green}']
    })
  2. En la terminal, escriba ng servir para compilar su código y ejecutarlo en un navegador web. Abra su aplicación en http://localhost:4200/ para ver el estilo especificado en el archivo TypeScript.
    Navegador con estilo de contenido rojo y verde.

  3. Si tiene mucho CSS, use “styleUrls” en lugar de “estilos” para vincular el archivo TypeScript a un archivo CSS externo. Dentro about-page.component.tsreemplace el decorador @Component con lo siguiente:
    @Component({
    selector: 'app-about-page',
    templateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
    })
  4. Agregar estilo CSS a about-page.component.css:
    h2 {
    color: blue
    }
    p {
    color: darkorange
    }
  5. Vuelva a su navegador o reinicie ng servir para recompilar su código. Abra su aplicación en http://localhost:4200/ para ver los estilos utilizados desde el archivo CSS externo.
    Navegador con estilo de contenido azul y naranja.

Renderizar el HTML de un componente en Angular

Ahora conoce las diferentes formas de representar su contenido HTML y CSS en una aplicación Angular. Puede determinar qué enfoque desea utilizar en función de la complejidad de su código HTML y CSS.

Si está interesado, puede explorar cómo pasar datos entre archivos HTML y TypeScript de un componente Angular.

Leave a Reply

Your email address will not be published. Required fields are marked *