Búsqueda de sitios web

javascript - Angular2 - ¿Cómo es diferente un módulo de un componente?

En el siguiente código de ../src/app/app.module.ts,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

El componente consiste en:

  • ver(../src/app/app.component.html)

  • lógica(../src/app/app.component.ts)

  • estilo(../src/app/app.component.css)

Una aplicación Angular es un árbol de componentes. Los buenos componentes tienen alta cohesión, es decir, cada componente contiene solo elementos con funcionalidades relacionadas. También están bien encapsulados y débilmente acoplados.

¿Cómo se diferencian los módulos de los componentes?

Respuesta #1

Un componente es simplemente una clase con la anotación @Component(). Ten en cuenta que los archivos .html y .css podrían ser referenciados por el componente, ciertamente no es obligatorio. La plantilla del componente podría muy bien estar 'incrustada' directamente en la configuración del componente, o simplemente podría no haber ningún template html en absoluto para un componente dado.

Un módulo es un elemento estructural de una aplicación Angular (y quizá otras clases e interfaces). También es "simplemente una clase" con la anotación @NgModule().

Actúa como un 'contenedor' lógico para tus componentes, directivas, servicios, tuberías, etc., para ayudarte a estructurar mejor tu código fuente en general.

Puedes echar un vistazo a esta pregunta existente: ¿Cuál es la diferencia entre un componente y un módulo de Angular?

Respuesta #2

Un módulo es algo que tiene componentes. Los envuelve para que puedas importarlos y gestionarlos.

Nota que cuando creas un componente puedes poner cualquier cosa que esté decorada como @Injectable en tu constructor:

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor(private myService: MyService) { }

  ngOnInit() {
  }

}

Y mágicamente tendrás un myService para usar. Esto es inyección de dependencias, que está incorporada en Angular, pero se gestiona a nivel de Module. En tu módulo importas los demás módulos que quieras poder usar:

imports: [
  BrowserModule,
  FormsModule
],

define lo que incluye tu módulo:

declarations: [
  AppComponent,
  HeroesComponent,
  MyService
],

exportar cualquier componente (para que otros módulos puedan importarlos)

exports: [
  HeroesComponent
],

Ayudan a organizar una aplicación en bloques de funcionalidad. Los componentes son cosas que le dicen a Angular cómo renderizar algo. Los módulos componen Componentes, Pipes, Servicios, etc., en 'bloques' que pueden ser compilados por Angular o importados y usados por otros.

Editar para abordar el comentario

Tomando su pregunta específica sobre HttpClient. El HttpClient es el servicio que está utilizando para realizar las acciones. El HttpClientModule es el módulo que importa en su módulo, para que pueda usar el servicio que contiene.

Importas el módulo:

@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})

Y utiliza el servicio:

@Component(...)
export class MyComponent implements OnInit {
 
  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}

  ...
}

El HttpClientModule contiene todo lo que necesitas para que el HttpClient funcione, y lo empaqueta para que puedas usarlo en tus propios proyectos.

Este módulo en particular solo abarca ese único servicio, pero el módulo podría contener un montón de servicios, componentes, pipes o directivas relacionados. Por ejemplo, el RouterModule te permite usar las directivas RouterOutlet y RouterLink.

Artículos relacionados