¿Qué son templateUrls y styleUrls en Angular?

Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.

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 de 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 la plantilla y templateUrl en Angular?

Cuando usted crea tu propio componente en Angular, puede representar el HTML mediante una plantilla. Hay dos maneras de escribir su plantilla HTML:

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

En un componente nuevo, puede establecer los atributos "plantilla" o "templateUrl" dependiendo de dónde escriba su HTML.

1. Crear un nueva aplicación angular.
2. En la terminal de su aplicación, ejecute el ng generar componente comando para crear un nuevo componente. Llame al nuevo componente "acerca de la página".

   ng generar componente sobre la página

3. En aplicación.componente.html, reemplace el código actual con etiquetas para su nuevo componente:

   <aplicación-acerca-de-la-página></app-about-page>

4. Abre el about-page.component.ts archivo. Si no tiene mucho código HTML, puede usar el atributo de plantilla para escribirlo directamente dentro del archivo TypeScript. Reemplace el decorador @Component con lo siguiente:

   @Componente({
    selector: 'aplicación-acerca-de-la-página',
    plantilla: '<h2>Acerca de la página</h2><hermano><pag>¡Esto representa el HTML del archivo TypeScript!</pag>'
   })
   

5. Si desea incluir una plantilla de varias líneas, puede usar comillas de verificación inversa en su lugar:

   @Componente({
    selector: 'aplicación-acerca-de-la-página',
    plantilla: `<h2>Acerca de la página</h2>
   <hermano>
   <pag>¡Esto representa el HTML del archivo TypeScript!</pag>`
   })

6. En la terminal, escriba ng servir para compilar su código y ejecutarlo en un navegador web. Abre tu aplicación en http://localhost: 4200/. Su código HTML del archivo TypeScript se mostrará en la página.
7. En 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 un código HTML más complejo que requiere su propio archivo.

   @Componente({
    selector: 'aplicación-acerca-de-la-página',
    URL de la plantilla: './acerca-de-la-pagina.componente.html'
   })

8. Agregue algo de código HTML al about-page.component.html archivo:

   <h2>Acerca de la página</h2>
   <pag>¡Esto representa el HTML del archivo HTML!</pag>

9. Regrese a su navegador o vuelva a ejecutar ng servir para volver a compilar su código. Abre tu aplicación en http://localhost: 4200/. El navegador ahora representa el HTML desde el about-page.component.html archivo.

¿Qué son los estilos y styleUrls en Angular?

De manera similar al HTML, puede usar "estilo" o "styleUrls" dependiendo de dónde elija almacenar su CSS.

Puede incluir CSS dentro del código TypeScript si tiene declaraciones CSS muy simples. De lo contrario, 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 archivo. Agregue un atributo de "estilos" al componente. Dentro de "estilos", agregue su estilo CSS para la página:

   @Componente({
    selector: 'aplicación-acerca-de-la-página',
    URL de la plantilla: './acerca-de-la-pagina.componente.html',
    estilos: ['h2 {color: rojo}','p {color: verde}']
   })

2. En la terminal, escriba ng servir para compilar su código y ejecutarlo en un navegador web. Abre tu aplicación en http://localhost: 4200/ para ver el estilo especificado en el archivo TypeScript.
3. Si tiene mucho CSS, use "styleUrls" en lugar de "estilos" para vincular el archivo TypeScript a un archivo CSS externo. En about-page.component.ts, reemplace el decorador @Component con lo siguiente:

   @Componente({
    selector: 'aplicación-acerca-de-la-página',
    URL de la plantilla: './acerca-de-la-pagina.componente.html',
    URL de estilo: ['./acerca-de-la-pagina.componente.css']
   })

4. Agregue un poco de estilo CSS a about-page.component.css:

   h2 {
    color azul
   }
   pag {
    color: naranja oscuro
   }

5. Regrese a su navegador o vuelva a ejecutar ng servir para volver a compilar su código. Abre tu aplicación en http://localhost: 4200/ para ver los estilos utilizados desde el archivo CSS externo.

Renderizar el HTML de un Componente en Angular

Ahora conoce las diferentes formas en que puede 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 HTML y CSS.

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