Plantillas de Angular gratis

Un componente controla una parte en pantalla llamada vista.

Por ejemplo, los componentes individuales definen y controlan cada una de las siguientes vistas del tutorial Tour of Héroes:

1. La raíz de la aplicación con los enlaces de navegación.
2. La lista de héroes.
3. El editor de héroe.

Tu defines la lógica de aplicación de un componente lo que hace para apoyar la vista dentro de una clase.

La clase interactúa con la vista a través de una API de propiedades y métodos.

Por ejemplo, HeroListComponent tiene una propiedad héroes que contiene un array de héroes. Tu método selectHero() establece una propiedad selectedHero cuando el usuario hace clic para elegir un héroe de esa lista.

El componente adquiere los héroes desde un servicio, que es una propiedad de parámetro de TypeScript en el constructor.

El servicio es proporcionado al componente a través del sistema de inyección de dependencias.

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Angular crea, actualiza y destruye componentes a medida que el usuario se mueve por la aplicación. Tu aplicación puede tomar medidas en cada momento de este ciclo de vida a través de enlaces de ciclo de vida opcionales, como ngOnInit().

Metadatos de componentes

Metadatos

El decorador @Component identifica la clase inmediatamente debajo de ella como una clase de componente y especifica sus metadatos.

En el código de ejemplo a continuación, puedes ver que HeroListComponent es solo una clase, sin ninguna notación o sintaxis de angular especial. No es un componente hasta que lo marcas como uno con el decorador @Component.

Los metadatos de un componente le dicen a Angular dónde obtener los bloques de construcción principales que necesita para crear y presentar el componente y su vista. En particular, asocia una plantilla con el componente, ya sea directamente con el código en línea o por referencia. Juntos, el componente y su plantilla describen una vista.

Además de contener o apuntar a la plantilla, los metadatos de @Component configuran, por ejemplo, cómo puede ser referenciado en HTML el componente y qué servicios requiere.

Aquí hay un ejemplo de metadatos básicos para HeroListComponent.

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Este ejemplo muestra algunas de las opciones de configuración de @Component más útiles:

Selector: Un selector de CSS que le dice a Angular que cree e inserte una instancia de este componente siempre que encuentre la etiqueta correspondiente en la plantilla HTML. Por ejemplo, si el HTML de una aplicación contiene, entonces Angular inserta una instancia de la vista HeroListComponent entre esas etiquetas.

TemplateUrl: La dirección relativa al módulo de la plantilla HTML de este componente. Alternativamente, puede proporcionar la plantilla HTML en línea, como el valor de la propiedad template. Esta plantilla define la vista host del componente.

Proveedores: Un array de proveedores para los servicios que requiere el componente. En el ejemplo, esto le dice a Angular cómo proporcionar la instancia de HeroService que el constructor del componente usa para obtener la lista de héroes para mostrar.

via GIPHY

Plantillas

En Angular, una plantilla es un fragmento de HTML. Dentro de una plantilla, puedes usar una sintaxis especial para aprovechar muchas de las características de Angular.

Prerrequisitos

Antes de aprender la sintaxis de la plantilla, debes estar familiarizado con lo siguiente:

1. Conceptos de Angular
2. JavaScript
3. HTML
4. CSS

Tu defines la vista de un componente con su plantilla complementaria. Una plantilla es una forma de HTML que le dice a Angular cómo renderizar el componente.

Las vistas generalmente se organizan jerárquicamente, lo que le permite modificar o mostrar y ocultar secciones enteras de UI o páginas como una unidad. La plantilla asociada inmediatamente con un componente define la vista host de ese componente. El componente también puede definir una jerarquía de vistas, que contiene vistas incrustadas, alojadas por otros componentes.

Una jerarquía de vistas puede incluir vistas de componentes en el mismo NgModule, pero también puede (y a menudo lo hace) incluir vistas de componentes que están definidos en diferentes NgModules.

Sintaxis de plantilla

Una plantilla se ve como HTML normal, excepto que también contiene sintaxis de plantilla de Angular, que altera el HTML según la lógica de su aplicación y el estado de la aplicación y datos del DOM. Tu plantilla puede usar el enlace de datos para coordinar la aplicación y los datos del DOM, pipes para transformar los datos antes de que se muestren y directivas para aplicar lógica de aplicación a lo que es mostrado.

Por ejemplo, aquí hay una plantilla para el HeroListComponent del Tutorial.

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

Esta plantilla utiliza elementos HTML típicos como <h2> y <p>, y también incluye elementos de sintaxis de plantilla angular, *ngFor, {{hero.name}}, (click), [heroe] y <app-hero-detail>. Los elementos de sintaxis de plantilla le dicen a Angular cómo representar el HTML en la pantalla, utilizando la lógica y los datos del programa.

• La directiva *ngFor le dice a Angular que itere una lista.
• {{hero.name}}, (click), y [hero] enlazan los datos del programa hacia y desde el DOM, respondiendo a entradas del usuario. Obtenga más información sobre enlace de datos.
• La etiqueta <app-hero-detail> en el ejemplo es un elemento que representa un nuevo componente, HeroDetailComponent. HeroDetailComponent (código no mostrado) define la vista del [PENDIENTE]hijo hero-detail HeroListComponent. Observe cómo los componentes personalizados como este se combinan a la perfección con HTML nativo en los mismos diseños.

Importante

Cada plantilla Angular de tu aplicación es una sección de HTML que puedes incluir como parte de la página que muestra el navegador. Una plantilla HTML Angular muestra una vista, o interfaz de usuario, en el navegador, como HTML normal, pero con mucha más funcionalidad.

Cuando generas una aplicación Angular con Angular CLI, el archivo app.component.html es la plantilla predeterminada que contiene HTML de marcador de posición.

Las guías de sintaxis de la plantilla te muestran cómo puedes controlar la UX/UI coordinando los datos entre la clase y la plantilla.