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

Conceptes Bàsics d'Angular

Següent ►
►

Introducció a Angular

Angular és un framework de desenvolupament web de codi obert mantingut per Google. És utilitzat per construir aplicacions web dinàmiques i de gran escala. Angular proporciona una arquitectura robusta basada en components, que facilita la creació i manteniment de codi.

Característiques Clau d'Angular

  • Arquitectura basada en components: Angular utilitza components per construir la interfície d'usuari.
  • Data Binding bidireccional: Permet la sincronització automàtica entre el model i la vista.
  • Dependency Injection: Facilita la gestió de dependències i la reutilització de codi.
  • Directives: Permet estendre el comportament dels elements HTML.
  • Routing: Facilita la navegació entre diferents vistes de l'aplicació.
  • RxJS: Utilitza observables per gestionar operacions asíncrones.

Configuració de l'Entorn

Instal·lació de Node.js i npm

Angular requereix Node.js i npm (Node Package Manager) per gestionar les dependències.

  1. Descarrega i instal·la Node.js des del lloc oficial.
  2. Verifica la instal·lació executant les següents comandes en la terminal: 
    node -v
npm -v

Instal·lació de l'Angular CLI

L'Angular CLI (Command Line Interface) és una eina que facilita la creació i gestió de projectes Angular.

  1. Instal·la l'Angular CLI globalment:

    npm install -g @angular/cli

  2. Verifica la instal·lació:

    ng version

Creació d'un Nou Projecte Angular

  1. Crea un nou projecte:

    ng new my-angular-app

  2. Navega al directori del projecte:

    cd my-angular-app

  3. Inicia el servidor de desenvolupament:

    ng serve

  4. Obre el navegador i visita http://localhost:4200/ per veure l'aplicació en funcionament.

Estructura d'un Projecte Angular

Un projecte Angular té una estructura de directoris específica. A continuació es mostra una estructura típica:

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── ...
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
│   └── ...
├── angular.json
├── package.json
└── ...

Fitxers i Directories Clau

  • src/app: Conté els components, serveis i altres fitxers de l'aplicació.
  • app.component.ts: Component principal de l'aplicació.
  • app.module.ts: Mòdul principal de l'aplicació.
  • main.ts: Punt d'entrada de l'aplicació.
  • angular.json: Configuració del projecte Angular.
  • package.json: Llista de dependències del projecte.

Creació de Components

Definició d'un Component

Un component Angular es defineix mitjançant una classe TypeScript decorada amb @Component.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
}

Creació d'un Nou Component

  1. Utilitza l'Angular CLI per generar un nou component:

    ng generate component my-new-component

  2. Això crearà els següents fitxers:

    src/app/my-new-component/
├── my-new-component.component.css
├── my-new-component.component.html
├── my-new-component.component.spec.ts
└── my-new-component.component.ts

Utilització d'un Component

Per utilitzar un component en un altre component, simplement afegeix el selector del component fill al fitxer HTML del component pare.

<!-- app.component.html -->
<app-my-new-component></app-my-new-component>

Data Binding

Interpolació

Permet mostrar dades del component en la vista.

<!-- app.component.html -->
<h1>{{ title }}</h1>

Property Binding

Permet establir propietats dels elements HTML.

<!-- app.component.html -->
<img [src]="imageUrl">

Event Binding

Permet gestionar esdeveniments dels elements HTML.

<!-- app.component.html -->
<button (click)="onClick()">Click me</button>

Two-Way Data Binding

Permet la sincronització bidireccional entre el model i la vista.

<!-- app.component.html -->
<input [(ngModel)]="name">
<p>Hello, {{ name }}!</p>

Directives

Directives Estructurals

Les directives estructurals canvien la disposició del DOM.

  • ngIf: Mostra o amaga elements.

    <div *ngIf="isVisible">This is visible</div>

  • ngFor: Itera sobre una col·lecció.

    <ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Directives d'Atribut

Les directives d'atribut canvien l'aparença o el comportament dels elements.

  • ngClass: Afegeix o elimina classes CSS.

    <div [ngClass]="{'active': isActive}">This is active</div>

  • ngStyle: Aplica estils CSS.

    <div [ngStyle]="{'color': color}">This is colored</div>

Exercici Pràctic

Objectiu

Crear una aplicació Angular que mostri una llista de tasques i permeti afegir-ne de noves.

Passos

  1. Crea un nou projecte Angular.
  2. Genera un component task-list.
  3. Defineix un array de tasques en el component task-list.
  4. Mostra les tasques utilitzant ngFor.
  5. Afegeix un formulari per afegir noves tasques.
  6. Implementa la lògica per afegir tasques al array.

Solució

1. Crea un nou projecte Angular

ng new task-manager
cd task-manager
ng serve

2. Genera un component task-list

ng generate component task-list

3. Defineix un array de tasques en el component task-list

// src/app/task-list/task-list.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
  tasks: string[] = ['Task 1', 'Task 2', 'Task 3'];
}

4. Mostra les tasques utilitzant ngFor

<!-- src/app/task-list/task-list.component.html -->
<ul>
  <li *ngFor="let task of tasks">{{ task }}</li>
</ul>

5. Afegeix un formulari per afegir noves tasques

<!-- src/app/task-list/task-list.component.html -->
<input [(ngModel)]="newTask" placeholder="New task">
<button (click)="addTask()">Add Task</button>

<ul>
  <li *ngFor="let task of tasks">{{ task }}</li>
</ul>

6. Implementa la lògica per afegir tasques al array

// src/app/task-list/task-list.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
  tasks: string[] = ['Task 1', 'Task 2', 'Task 3'];
  newTask: string = '';

  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }
}

Resum

En aquesta secció, hem après els conceptes bàsics d'Angular, incloent la configuració de l'entorn, la creació de components, el data binding, i les directives. També hem realitzat un exercici pràctic per reforçar els conceptes apresos. Amb aquests coneixements, estàs preparat per explorar temes més avançats d'Angular i construir aplicacions web dinàmiques i robustes.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

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