Si estás empezando a programar con Angular, probablemente te preguntes qué diferencia hay en Angular entre utilizar el constructor y el ngOnInit, que como sabes es una función o hook del ciclo de vida de los componentes de Angular. Sin más, ¡Vamos a ello!
¿Qué es un constructor?
El constructor, cómo sabrás, no es algo propio de Angular, sino del estándar EcmaScript 12 (ES12). El ES12 no es otra cosa que el estándar que sigue JavaScript, siendo publicado el ES12 en junio de 2021. Te dejo más información sobre JavaScript, TypeScript, ES12 etc. en este artículo.
Pues bien, el constructor siempre se ejecuta cuando creas una instancia de una clase. Y, aquí, es dónde le vamos a indicar a Angular qué dependencias queremos que cargue esa instancia de la clase, mediante la conocida como inyección de dependencias. Veamos como se hace:
constructor (private _lineUpService: LineUpService) {}
Digamos que estoy desarrollando una aplicación de fútbol y quiero consumir el servicio de LineUpService, que es un servicio dónde llamo a los endpoints de la API que estoy consumiendo para recoger toda la información relacionada con las alineaciones de los equipos. Pues bien, la propiedad la inyecto como privada y le indico que es de la clase LineUpService. Al escribir ese código, Angular me debería importar de forma automática el fichero del servicio en mi componente de TypeScript. Algo similar a esto:
import { LineUpService } from 'src/app/lineup/line-up.service'
También podríamos utilizarlo si necesitamos algún tipo de inicialización antes de que el componente sea construido, es decir, el constructor básicamente se encarga de preparar todo lo que necesitamos para que el componente (con su HTML, TS etc.) se pueda construir.
¿Qué es ngOnInit?
El hook del ciclo de vida de los componentes de Angular ngOnInit es un hook o función que se llama una vez que el componente ya está inicializado y ya podemos tener acceso al HTML.
Aquí podemos inicializar valores que queramos mostrar en nuestro HTML, llamar a funciones que queremos que se disparen una vez que nuestro componente ya está montado etc. Se implementa de la siguiente forma.
Primero, hemos de importar OnInit de la carpeta de Angular Core, ya que ngOnInit sí que es algo específico de Angular.
import { Component, OnInit } from '@angular/core';
Tras ello, en mi fichero de TypeScript de mi componente he de implementar el OnInit:
export class LineUpComponent implements OnInit
Y, tras ello, ya escribo mi ngOnInit para que dispare lo que yo quiero, en este caso me va a devolver la información de la alineación de un determinado partido de fútbol:
ngOnInit(): void {
this._lineUp=_lineUpService.getLineUp();
}
El ngOnInit por convención se escribe después del constructor en un componente de Angular, lo cual además es intuitivo porque el constructor siempre se ejecutará antes que el ngOnInit.
¿En qué se diferencian el constructor y ngOnInit en Angular?
Pues bien, en resumidas cuentas, y aplicando este ejemplo, si yo necesito poder cargar las alineaciones de mi partido de fútbol, mi componente tiene que tener cargado ese servicio para poder usarlo. Y esa carga se dará mediante la inyección de dependencias que hacemos en el constructor.
Una vez que el componente se ejecuta, Angular ejecuta siempre primero el constructor que se encargará de darnos todo lo que le hemos pedido para que el componente pueda funcionar. Y luego, una vez con el componente ya construido, se ejecutará el ngOnInit. Y, ahí, utilizaremos aquello que hemos cargado en el constructor para poder utilizarlo en nuestro componente (por ejemplo, el servicio de alineaciones que tiene el método que me devuelve las alineaciones de un partido, que consumo de una API).
Como metáfora, el constructor es el cocinero que te cocina un plato en un restaurante y el ngOnInit eres tú usando la comida que te ha cocinado el cocinero (comiéndotela, en este caso).
Te puede interesar
Clean JavaScript es un libro escrito por Miguel Ángel Gómez Álvarez, un ingeniero de software español senior que trabaja actualmente para una compañía de EEUU, tiene experiencia como CTO, más de 10 años de experiencia en el sector etc. En resumen, una persona de la que cualquier junior querría aprender. Además, es el fundador de Software Crafters, una comunidad de aprendizaje sobre artesanía del software, DevOps…
Considero que Clean JavaScript es un libro muy potente si vas a desarrollar tu carrera como desarrollador en el ecosistema de JavaScript: podrás aprender con este libro acerca de cómo crear el código más limpio posible, la aplicación de los principios SOLID, testing unitario, TDD… Yo, sinceramente, lo tengo en mi lista de libros pendientes de leer y no lo he leído aún por falta de tiempo, pero tan pronto como lo lea haré una review y la compartiré con todos los lectores del blog.
Creo que es muy importante para cualquier desarrollador (y más si es junior y está empezando, como es mi caso y probablemente el tuyo si estás leyendo este artículo) el ir adquiriendo buenas prácticas de programación, que te permitan hacer software de calidad y ofrecer más valor con tu trabajo. Y creo que Clean JavaScript puede ayudarte a ello.
Espero que este artículo te haya resultado clarificador y te haya ayudado a entender mejor la diferencia entre constructor y ngOnInit y, por tanto, te haya ayudado a entender mejor Angular.
Además, me gustaría comentarte que si quieres practicar para consolidar tus conocimientos sobre Angular, aquí te dejo un artículo que cambiará tu forma de hacer proyectos personales, hará que nunca te quedes sin ideas de cómo hacer este tipo de proyectos, te permitirá hacer proyectos que mejoren aún más tu portfolio y, además, te dejo 10 ideas de proyecto. Espero que te sea de utilidad.
Recuerda que puedes contactar con nosotros por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en el siguiente artículo.