El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Crear components

Següent ►
►

En aquest tema, aprendrem a crear components en Angular, que són les unitats bàsiques de construcció d'una aplicació Angular. Els components encapsulen la lògica, les dades i la presentació d'una part de la interfície d'usuari.

Objectius

  • Comprendre la importància dels components en Angular.
  • Aprendre a crear components utilitzant Angular CLI.
  • Entendre l'estructura d'un component Angular.
  • Veure exemples pràctics de components.

  1. Introducció als components

Els components són la pedra angular d'una aplicació Angular. Cada component està format per:

  • Una plantilla HTML que defineix la vista.
  • Una classe TypeScript que defineix la lògica.
  • Un fitxer CSS que defineix els estils.

  1. Creació de components amb Angular CLI

Angular CLI (Command Line Interface) és una eina poderosa que facilita la creació i gestió de components. Per crear un component, utilitzarem el següent comandament:

ng generate component nom-del-component

Per exemple, per crear un component anomenat usuari, executarem:

ng generate component usuari

Aquest comandament generarà els següents fitxers i actualitzarà el mòdul corresponent:

src/
  app/
    usuari/
      usuari.component.ts
      usuari.component.html
      usuari.component.css
      usuari.component.spec.ts
    app.module.ts

  1. Estructura d'un component

3.1. Fitxer TypeScript (usuari.component.ts)

Aquest fitxer conté la lògica del component. Aquí teniu un exemple bàsic:

import { Component } from '@angular/core';

@Component({
  selector: 'app-usuari',
  templateUrl: './usuari.component.html',
  styleUrls: ['./usuari.component.css']
})
export class UsuariComponent {
  nom: string = 'Joan';
}

3.2. Fitxer HTML (usuari.component.html)

Aquest fitxer defineix la vista del component:

<div>
  <h1>Benvingut, {{ nom }}!</h1>
</div>

3.3. Fitxer CSS (usuari.component.css)

Aquest fitxer conté els estils del component:

h1 {
  color: blue;
}

3.4. Fitxer de proves (usuari.component.spec.ts)

Aquest fitxer conté les proves unitàries per al component. No entrarem en detalls aquí, però és important saber que existeix per assegurar la qualitat del codi.

  1. Utilitzar el component

Per utilitzar el component usuari en una altra part de l'aplicació, simplement afegim el selector del component (app-usuari) a la plantilla HTML del component pare:

<app-usuari></app-usuari>

  1. Exercici pràctic

Exercici 1: Crear un component de producte

  1. Utilitza Angular CLI per crear un component anomenat producte.
  2. Defineix una propietat nom a la classe del component amb el valor Ordinador.
  3. Mostra el valor de nom a la plantilla HTML del component.
  4. Afegeix alguns estils al fitxer CSS del component.

Solució

  1. Crear el component:
ng generate component producte
  1. Editar producte.component.ts:
import { Component } from '@angular/core';

@Component({
  selector: 'app-producte',
  templateUrl: './producte.component.html',
  styleUrls: ['./producte.component.css']
})
export class ProducteComponent {
  nom: string = 'Ordinador';
}
  1. Editar producte.component.html:
<div>
  <h1>Producte: {{ nom }}</h1>
</div>
  1. Editar producte.component.css:
h1 {
  color: green;
}
  1. Utilitzar el component producte en la plantilla principal (app.component.html):
<app-producte></app-producte>

Conclusió

En aquest tema, hem après a crear components en Angular utilitzant Angular CLI, hem entès l'estructura d'un component i hem vist un exemple pràctic. Els components són fonamentals per a la construcció d'aplicacions Angular modulars i reutilitzables. En el següent tema, explorarem les plantilles de components en més detall.

◄ Anterior
◄
Següent ►
►

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats