Angular v18: Servicios y Dependencias

Servicios y Dependencias en Angular v18

Servicios en Angular son clases que se utilizan para encapsular lógica y datos que se pueden compartir entre diferentes componentes de la aplicación. Los servicios permiten la separación de preocupaciones y fomentan la reutilización del código.

Dependencias en Angular se refieren a los objetos que una clase necesita para funcionar. La Inyección de Dependencias (DI) es un patrón de diseño que Angular utiliza para proporcionar instancias de servicios a los componentes y otras clases.

DataService: Es un tipo de servicio específico que se utiliza para manejar la comunicación con fuentes de datos, como APIs REST, bases de datos locales, etc.

Componentes de Servicios y Dependencias en Angular v18

  1. Service Class: Clase que contiene lógica y datos compartidos.
  2. Injectable Decorator: Decorador que marca una clase como elegible para la inyección de dependencias.
  3. Injector: Mecanismo que proporciona las instancias de las dependencias.
  4. Provider: Configuración que define cómo se crea o encuentra una dependencia.
  5. Dependency Injection: Sistema que Angular usa para inyectar dependencias en componentes y otros servicios.
  6. HttpClient: Servicio que facilita la comunicación HTTP con servidores remotos.

Videotutoriales: 

  1. Curso Angular 2023 #7 Servicios En Angular: https://youtu.be/I1O7PALWzxo
  2. Angular (v18): Servicios  https://youtu.be/e4U6EVCnjFY
  3. Servicios e Inyección de Dependencias https://youtu.be/aWroeRO3bRQ 
  4. Servicios en Angular: https://youtu.be/Lez9ZAEAYsM
  5. Servicios e Inyección de Dependencias https://youtu.be/MVR4VmbiEzo
  6. Inyección de dependencias | Angular https://youtu.be/ONtQ8r0sxCw

 

Interpretación de cada componente

  1. Service Class:

    • Define la lógica que se compartirá entre componentes: contiene lógica y datos compartidos. 
// typescript
export class DataService {
  getData() {
    return ['data1', 'data2', 'data3'];
  }
}

 

2- Injectable Decorator:

  • Marca una clase como elegible para la inyección de dependencias.

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return ['data1', 'data2', 'data3'];
  }
}

 

Injector:

  • Mecanismo utilizado por Angular para crear y proporcionar instancias de dependencias.
  • Generalmente no se usa directamente por los desarrolladores, se maneja automáticamente por Angular.

Provider:

  • Registra el servicio para la inyección de dependencias.
  • Configuración que indica cómo Angular debe crear o buscar una dependencia.
  • Puede ser configurado en módulos, componentes o servicios.

@NgModule({
  providers: [DataService]
})

 

Inject Decorator:

  • Especifica qué dependencia inyectar.

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

constructor(@Inject(DataService) private dataService) {}

 

Dependency Injection:

  • Mecanismo para inyectar dependencias en clases. 

constructor(private myService: MyService) {}

HttpClient::

Servicio para realizar peticiones HTTP. 


constructor(private http: HttpClient) {}

getData() {
  return this.http.get('https://api.example.com/data');
}

 

Ejemplo de Servicios y Dependencias en Angular v18

Este ejemplo muestra cómo definir un servicio en Angular, cómo inyectarlo en un componente y cómo utilizarlo para manejar datos compartidos. La clase DataService encapsula la lógica para gestionar los datos, mientras que el componente AppComponent consume el servicio para mostrar y añadir datos. 

Configuración del servicio:


// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private data: string[] = ['data1', 'data2', 'data3'];

  getData(): string[] {
    return this.data;
  }

  addData(newData: string): void {
    this.data.push(newData);
  }
}

Componente Angular que consume el servicio: 


// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  data: string[];
  users: any[] = [];
  newUser = { name: '', email: '' };

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.data = this.dataService.getData();
    this.loadUsers();
  }

  addData(newData: string): void {
    this.dataService.addData(newData);
    this.data = this.dataService.getData();
  }
  
  loadUsers() {
    this.dataService.getUsers().subscribe((data) => {
      this.users = data;
    });
  }

  addUser() {
    this.dataService.addUser(this.newUser).subscribe((user) => {
      this.users.push(user);
      this.newUser = { name: '', email: '' };
    });
  }
  
}

Plantilla HTML del componente: 

<!-- app.component.html -->

<div>

<h1>Data List</h1>

<ul>

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

</ul>

<input #newDataInput type="text" placeholder="Add new data">

<button (click)="addData(newDataInput.value)">Add Data</button>

</div>
 
<!-- app.component.html -->

<div>
  <h1>User List</h1>

<ul>

<li *ngFor="let user of users">{{ user.name }} ({{ user.email }})</li>

</ul>
<h2>Add New User</h2>

<form (ngSubmit)="addUser()">

<label for="name">Name:</label>

<input id="name" [(ngModel)]="newUser.name" name="name" required>


<label for="email">Email:</label>

<input id="email" [(ngModel)]="newUser.email" name="email" required>


<button type="submit">Add User</button>

</form>

</div>

Configuración del módulo:


// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [DataService],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

Servicio Angular:


// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'http://localhost:3000/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable {
    return this.http.get(this.apiUrl);
  }

  addUser(user: any): Observable {
    return this.http.post(this.apiUrl, user);
  }
}

 

Configuración del servidor backend con JSON Server:

Este código de Angular junto con el JSON Server permite crear y gestionar un formulario reactivo que guarda los datos en una base de datos local simulada.

1- Instala JSON Server:

// bash
npm install -g json-server

2- Crea un archivo db.json en la raíz de tu proyecto con el siguiente contenido: 

// json
{ "users": [] }

3- Inicia JSON Server:

// bash
json-server --watch db.json --port 3000

 

 

mmm