Componentes en Angular

Componentes en Angular

componentes-angular-devsun-blog

En el art铆culo de hoy, nuestro equipo de DevSun Europe explica que es un componente (component) en Angular. Para ello analizamos en qu茅 consiste y como crear un componente a trav茅s de la interfaz de l铆nea de comando. Detallamos c贸mo crear una plantilla asociada al mismo y desarrollamos un breve ejemplo para agrupar todos los conceptos vistos.

驴C贸mo crear un componente en Angular?

En Angular, uno de los elementos m谩s importantes lo constituyen los Componentes. Una aplicaci贸n cuenta con al menos un componente ra铆z y este conecta todos los otros componentes de forma jer谩rquica con el DOM de la p谩gina.

Un componente se define como una clase que contiene los datos y la l贸gica de aplicaci贸n. Para expresar un componente se emplea el decorador (decorator) @Component encima de la declaraci贸n de la clase del componente. Este define sus metadatos, los que describen las partes necesarias para crear el componente y su vista asociada.

 @Component({
    selector: 'app-departamento-lista',
    templateUrl: './departamento-lista.component.html',
    styleUrls: ['./departamento-lista.component.css']
})

Como primer elemento encontramos el selector. Este especifica la etiqueta que usaremos en la plantilla HTML para crear e insertar una instancia del componente. Por ejemplo, ser铆a de la siguiente forma:

 <app-departamento-lista></app-departamento-lista>

Observamos tambi茅n la propiedad templateUrl. Este asocia el componente con una vista a trav茅s de un camino relativo. Adem谩s, es posible utilizar la propiedad template en vez de la anterior y situar directamente la plantilla en forma de cadena (template string), por ejemplo:

template: `
     <div>
        <img src="{{imagen}}">
        <span [style.text-decoration]="blue">
            Departamento
        </span>
        <button (click)="eliminar()">Eliminar</button>
      </div>`

A trav茅s de la propiedad styleUrls podemos asociar al componente una o varias hojas de estilos CSS, igualmente utilizando un camino relativo a los archivos.

Por 煤ltimo, para expresar la l贸gica de la aplicaci贸n creamos la clase del componente.

export class DepartamentoListaComponent {
    constructor() { }
}
Angular
Foto de Dribble por: Maggie Appleton

驴Qu茅 es una plantilla de un componente?

Las vistas en una aplicaci贸n Angular est谩n organizadas de forma jer谩rquica, permitiendo ocultar o mostrar secciones a trav茅s de los selectores del componente. Para ello, el componente tiene asociado una plantilla, que constituye la vista. Una plantilla constituye la manera de reflejar las propiedades y m茅todos de la clase del componente sobre la vista. Luce similar al HTML que usamos regularmente incluyendo elementos sint谩cticos de una plantilla de Angular, como mostramos a continuaci贸n:Las vistas en una aplicaci贸n Angular est谩n organizadas de forma jer谩rquica, permitiendo ocultar o mostrar secciones a trav茅s de los selectores del componente. Para ello, el componente tiene asociado una plantilla, que constituye la vista. Una plantilla constituye la manera de reflejar las propiedades y m茅todos de la clase del componente sobre la vista. Luce similar al HTML que usamos regularmente incluyendo elementos sint谩cticos de una plantilla de Angular, como mostramos a continuaci贸n:

 <h1>Departamento</h1>
<ul>
    <li *ngFor="let depto of departamentos" (click)="deptoSeleccionar(depto)">
        {{depto.nombre}}
    </li>
</ul>
<app-departamento-form *ngIf="deptoSeleccionado"></app-departamento- form>

Este ejemplo utiliza elementos relacionados con la sintaxis de una plantilla Angular, los cuales abordaremos con mayor profundidad en pr贸ximos art铆culos.

Ejemplo pr谩ctico de la creaci贸n de un componente en Angular

Para desarrollar este ejemplo retomaremos los comandos utilizados en los art铆culos anteriores y conoceremos otros.

Primero crearemos un nuevo proyecto UniversidadApp:

ng new UniversidadApp

Como vimos en el art铆culo anterior Mi primera aplicaci贸n Angular, este comando nos permite crear una aplicaci贸n y nos instala los paquetes de npm necesarios para ejecutarla.

A帽adiremos un m贸dulo Departamento que contendr谩 todos los componentes relacionados con este. Primero nos cambiamos a la carpeta ra铆z del proyecto y luego creamos el m贸dulo.

cd ./UniversidadApp
ng g module modulos/Departamento

Al hacer esto introducimos una nueva carpeta modulos dentro de la carpeta app y luego el m贸dulo Departamento. Esto nos permite colocar todos nuestros m贸dulos organizados, pero no es necesario.

Crearemos un componente DepartamentoLista, dentro de una nueva carpeta componentes en el m贸dulo Departamento de la siguiente manera:

ng g component modulos/departamentos/componentes/DepartamentoLista

Este comando nos agrega una carpeta departamento-lista y cuatro archivos del componente DepartamentoLista.

departamento-lista.component.css

departamento-lista.component.html

departamento-lista.component.spec.ts

departamento-lista.component.ts

Podemos decir que: ni la carpeta componentes, ni modulos son necesarios colocarlos en el camino al generar el m贸dulo o el componente, pero si recomendables para organizar nuestro c贸digo.

Con esto hemos podido aprender, los conceptos generales de un componente Angular. Hemos desarrollado un sencillo ejemplo de un componente, mostrando como crearlo seg煤n las necesidades de la aplicaci贸n. Todo esto nos permite ser capaces de introducir componentes propios, adaptados a la l贸gica de la aplicaci贸n. En los pr贸ximos art铆culos abordaremos m谩s detalles sobre componentes y c贸mo personalizarlos.


Total de Vistas: 384
Like
Like Love Haha Wow Sad Angry
32

You may also like

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Publicaci贸n recomendada
Scroll Up