Componenti intelligenti e stupidi in angolare

Diversi tipi di componenti in Angular

Quando inizi a creare app con framework UI come Angular e React, la prima cosa con cui ti troverai faccia a faccia è il concetto di componenti. I componenti potrebbero sembrare abbastanza semplici, ma c'è molto di più di quanto sembri. La struttura dei componenti suddivide la pagina in blocchi e ti aiuta a gestire la tua pagina in modo molto flessibile incapsulando tutti gli stili, i markup e la logica aziendale in ogni singolo componente, quindi li unisci per creare la tua app.

Detto questo, quando ti immergi nei componenti, potresti chiedere:

Esistono diversi tipi di componenti?

Sì, ci sono due tipi o meglio concetti di componenti.

• Componenti intelligenti
• Componenti stupidi

Componenti stupidi

Nel mondo reale, spesso consideriamo stupide quelle persone che non hanno un senso di scopo o dipendono dagli altri per andare avanti o ottenere le cose in quel momento. Questo è esattamente ciò che è un componente stupido anche nel mondo della programmazione. Un componente che non fa assolutamente nulla da solo e dipende da componenti più intelligenti.

Tutto ciò che Dumb Components fa è presentarsi al DOM. Quindi vengono anche denominati " Componenti di presentazione " o qualcosa chiamato " Componenti isolati ".

import{ Component, Input, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-book-list’,
templateUrl: ‘./book-list.component.html’,
styleUrls: [‘./book-list.component.css’]
})
export class BookListComponent implements OnInit {
@Input(‘book’) book: any[];
constructor() { }
ngOnInit() {
}
}

<div class="books-list-container">
<h3>{{book.volumeInfo.title}}</h3>
<p>{{book.volumeInfo.authors[0]}}</p>
<p>{{book.description}}</p>
</div>

Componenti più intelligenti

I componenti intelligenti sono quei componenti che sanno come gestire i dati, come recuperare i dati dai servizi, come interagire con i servizi e tenere traccia dello stato e preoccuparsi di come funziona l'app nel suo complesso. Sono chiamati contenitori poiché inviano dati a Dumb Components tramite associazioni di proprietà.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import {map} from 'rxjs/operators';
import { Observable } from 'rxjs';
@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
private API_KEY:string = 'API_KEY';
book: Observable<any[]>;
constructor(private _http: HttpClient) { }
ngOnInit() {
const URL = 'https://www.googleapis.com/books/v1';
//Fetch All Books from API
//@Params = URL: String
this.fetchBooks(URL);
}
fetchBooks(URL: string){
this.book = this._http.get<any>(`${URL}/q=&key=${this.API_KEY}`,             {headers}).pipe(
   map(resp=>{
    return resp.items;
   });
 );
}}

<app-book-list [book]="book | async"></app-book-list>

Conclusione

Utilizzando questi concetti, abbiamo separato il codice della logica aziendale e il codice di presentazione tra componenti intelligenti e stupidi. Questo stagista consente a un componente di fare tutto il lavoro pesante lasciando gli altri a visualizzare i dati senza problemi.

Questo è tutto, spero che questo post abbia aiutato a costruire una certa comprensione di questi concetti se fosse non dimenticare di premere il pulsante di applauso. Ecco il collegamento Github per il codice:

Puoi anche leggere il mio altro articolo sul componente Web, se lo desideri.

Un'analisi approfondita dei componenti Web

Finalmente! Grazie per la lettura e buona programmazione!