Componentes Inteligentes e Estúpidos em Angular

Diferentes tipos de componentes em Angular

Quando você começa a construir aplicativos com estruturas de IU como Angular e React, a primeira coisa que você vai enfrentar é o conceito de componentes. Os componentes podem parecer bastante simples, mas há muito mais do que aparenta. A estrutura de componentes divide a página em pedaços e ajuda a gerenciar sua página de uma maneira muito flexível, encapsulando todos os estilos, marcações e lógica de negócios em cada componente individual e, em seguida, mesclá-los para construir seu aplicativo.

Com isso dito, ao mergulhar nos componentes, você pode perguntar:

Existem diferentes tipos de componentes?

Sim, existem dois tipos ou melhor, conceitos de componentes.

• Componentes Inteligentes
• Componentes mudos

Componentes mudos

No mundo real, muitas vezes consideramos idiotas aquelas pessoas que não têm um propósito ou dependem de outras para seguir em frente ou conseguir as coisas. Isso é exatamente o que um Dumb Component é no mundo da programação também. Um componente que não faz absolutamente nada por conta própria e depende de componentes mais inteligentes.

Tudo o que o Dumb Components faz é se apresentar ao DOM. Portanto, eles também são chamados de “ Componentes de apresentação ” ou algo chamado de “ Componentes isolados ”.

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>

Componentes mais inteligentes

Componentes inteligentes são aqueles componentes que sabem como lidar com dados, como buscar dados de serviços, como interagir com serviços e controlar o estado e se preocupam com o funcionamento do aplicativo como um todo. Eles são chamados de contêineres, pois enviam dados para Dumb Components por meio de associações de propriedade.

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>

Conclusão

Usando esses conceitos, separamos o código de lógica de negócios e o código de apresentação entre componentes inteligentes e burros. Este estagiário permite que um componente faça todo o trabalho pesado, enquanto os outros exibem os dados sem problemas.

É isso, espero que este post tenha ajudado a construir um pouco de compreensão desses conceitos, se não fosse não se esqueça de apertar o botão de gonorréia. Aqui está o link do Github para o código:

Você também pode ler meu outro artigo sobre o componente da Web, se quiser.

Um mergulho profundo nos componentes da Web

Finalmente! Obrigado por ler e boa codificação!