Como sabemos, el decorador @Component es una función que acepta un objeto y ese objeto tiene muchas propiedades. Las dos propiedades más importantes son plantilla y URL de plantilla.
Hay varios métodos para crear plantillas en Angular
La plantilla es parte de un componente que se utiliza para la interfaz de usuario mediante la cual el usuario final puede interactuar fácilmente. Podemos crear una plantilla de dos maneras: –
- plantilla en línea
- Plantilla externa
Plantillas en línea:
Cuando definimos la plantilla para el componente en un archivo .ts , se conoce como plantilla en línea. Las plantillas en línea se definen en el decorador de componentes mediante la propiedad de plantilla. Se refiere a escribir el HTML requerido dentro del archivo TypeScript. Consideremos un ejemplo.
Abra el archivo app.component.ts y modifique el decorador de componentes que se muestra a continuación. Aquí, debe definir el contenido HTML con la ayuda de caracteres de inclinación.
HTML
<!--The content below is only a
placeholder and can be replaced.-->
import { Component } from '@angular/core';
@Component({
selector:'app-root',
template:`<h3>Hello World</h3>`
})
export class AppComponent {
title = 'MyAngularApp'
Además, abra el archivo app.module.ts y configure AppComponent en el componente de inicio en la array de arranque como se muestra a continuación.
HTML
<!--The content below is only a
placeholder and can be replaced.-->
@NgModule({
declaration:[
AppComponent,
MyComponentComponent,
];
imports: [
BrowseModule,
AppRoutingModule
],
providers: [],,
bootstrap : [AppComponent]
})
export class AppModule { }
Luego modifique la página index.html como se muestra a continuación.
HTML
<!--The content below is only a placeholder and can be replaced.--> <!Doctype html> <html lang ="en"> <head> <meta charset ="utf-8"> <title>MyAngularApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
Ahora, compile la aplicación y obtendrá el siguiente resultado.
¿No podemos incluir el código HTML entre comillas simples o dobles?
Sí, podemos incluir el código HTML anterior dentro de un par de comillas simples o dobles o hasta que el código HTML esté en una sola línea, como se muestra a continuación.
Aquí estamos usando comillas simples.
HTML
<!--The content below is only a
placeholder and can be replaced.-->
@Component({
selector: 'app-root',
template: '<h3>Hello World</h3>'
})
Cuando estemos usando comillas simples, la salida será:
Usando comillas dobles:
También puede reemplazar el código HTML anterior dentro de un par de comillas dobles como se muestra a continuación
HTML
<!--The content below is only a
placeholder and can be replaced.-->
@Component({
selector: 'app-root',
template: "<h3>Welcome to GeeksforGeeks</h3>"
})
Cuando estemos usando comillas dobles, la salida será:
¿Cuándo usaremos la inclinación en lugar de comillas simples o comillas dobles?
Cuando tenemos varias líneas de código HTML, necesitamos usar la inclinación; de lo contrario, obtendrá un error de tiempo de compilación.
Para deshacernos de este error, necesitamos usar acentos graves (inclinación) como se muestra a continuación .
HTML
<!--The content below is only a
placeholder and can be replaced.-->
@Component({
selector: 'app-root',
template:`<h3>Let’s learn About the Angularjs.
It is easy to understand.</h3>`
})
Cuando estemos usando backticks, la salida será:
Plantilla externa:
En la mayoría de los casos en tiempo real, necesitamos usar templateURL. Cuando definimos la plantilla en un archivo externo y luego la vinculamos con nuestro componente, se dice que es una plantilla externa.
En otras palabras, las plantillas externas definen el código HTML en un archivo separado y podemos referirnos a ese archivo usando la propiedad templateURL del decorador de componentes. El archivo TypeScript contiene la ruta del archivo de código HTML utilizando la propiedad «templateURL».
¿Cuándo necesitamos usar templateURL en angular?
Cuando estamos trabajando con una vista compleja, angular recomienda crear esa vista compleja en un archivo HTML externo en lugar de una plantilla en línea. El decorador de componentes angulares proporciona la propiedad de templateUrl y al usar esta propiedad podemos establecer la ruta del archivo de código HTML externo.
De forma predeterminada, Angular crea un archivo de código HTML con el nombre de app.component.html dentro de la carpeta de la aplicación cuando creamos cualquier proyecto angular nuevo. Consideremos un ejemplo para comprender cómo proporcionar esa ruta de código HTML en el decorador de componentes utilizando la propiedad templateUrl. Además, modifique el archivo app.component.ts como se muestra a continuación para usar la propiedad templateUrl para configurar un archivo HTML externo.
HTML
<!--The content below is only a
placeholder and can be replaced.-->
import { Component } from '@angular/core';
@Component({
selector:'app-root',
templateUrl:'app/app.Component.html'
})
export class AppComponent {
title = 'MyAngularApp';
}
Cuando referimos el código del archivo app.component.html al archivo app.component.ts usando TemplateURL, la salida será:
Plantilla vs TemplateUrl en Angular:
En AngularJS, podemos definir la vista dentro de las etiquetas HTML y existen varios métodos para definir las plantillas en componentes angulares.
Las plantillas son una de las partes más esenciales del componente angular porque nos permite definir la interfaz de usuario para el componente, podemos tener 2 formas de definir la plantilla.
- plantilla en línea
- Plantilla externa
No existen tales diferencias reales entre la plantilla y la propiedad templateUrl en términos de rendimiento de una aplicación. Pero desde el punto de vista del desarrollador, hay algunas diferencias que discutiremos aquí.
En Angular, cuando tenemos una vista compleja, debemos ir con templateUrl ( usando un archivo externo ); de lo contrario, podemos usar la propiedad de plantilla (HTML en línea) del decorador de componentes.
Cuando usamos una plantilla en línea, ya no tenemos el soporte de inteligencia, la finalización de código y las funciones de formato de Visual Studio. Pero con una plantilla externa, también tendremos el soporte de inteligencia, la finalización de código y las funciones de formato de Visual Studio. El código TypeScript no siempre es para estudiar y reconocer si lo combinamos con la plantilla HTML en línea. Hay algo conveniente en tener el código TypeScript y el HTML asociado en el mismo registro porque se vuelve mucho más fácil ver cómo se relacionan entre sí.
Publicación traducida automáticamente
Artículo escrito por Vishesh__Jha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA