Preguntas comunes en entrevistas para Angular 🅰 Primera parte

Voy a comenzar un hilo de artículos sobre algunas de las preguntas más frecuentes en entrevistas para desarrollador frontend de Angular.

No quiero hacer los artículos muy pesados, así que iré haciendo artículos de unas 5 preguntas más o menos, todo dependerá de lo que me lleve responder cada pregunta.

Al lío🧵

¿Qué es el two way Data Binding?

El two way Data Bindind es un mecanismo que nos permite modificar el módelo desde la vista y viceversa.

El ejemplo más clásico es utilizar un input en HTML (vista del componente) y enlazarlo con el modelo (fichero de typescript del componente).

En el siguiente artículo te muestro cómo hacer un enlazado de datos bidireccionales en Angular de dos formas.

Envía el valor de un input al fichero de TypeScript

Aprende a obtener el valor de un input en el fichero HTML desde el fichero de TypeScript de la forma más fácil y rápida

¿Qué arquitectura usa Angular, MVVM o MVC?

Hablar de arquitectura de software es equivalente a hablar de patrones de diseño.

Respondiendo escrupulosamente a la pregunta, Angular se basa en el patrón Modelo-Vista-Vista-Modelo (MVVM).

Este patrón deriva del MVP que a su vez deriva del famoso patrón MVC (Modelo-Vista-Controlador), pero no me voy a retrotaer tanto y explicaré excrupulosamente el patrón MVVM.

La característica directamente responsable de que a Angular se la incluya dentro de MVVM es el two way data bindind.

Como te he explicado en el punto anterior, es que la vista puede modificar directamente el modelo y viceversa.

Aunque si la pregunta no estuviera cerrada a elegir entre MVVM y MVC yo diría que Angular se basa en una arquitectura basada en componentes.

¿Qué hace el fichero angular.json?

El fichero angular.json es el fichero de configuración de nuestra aplicación de Angular.

En este fichero es donde definiremos los puntos de entradas de la aplicación web, de la aplicación de Angular, del compilador, del fichero de configuración del TypeScript, de los recursos que serán públicos (assets), de los estilos CSS...

¿Cuál es el punto de entrada de una aplicación Angular?

Esta pregunta lo que busca es saber si realmente conoces cómo o dónde el navegador "engancha" con el código que tú programas en Angular.

La respuesta rápida y directa es que para encontar el punto de entrada de nuestra aplicación de Angular hay que analizar el fichero angular.json.

Me voy a apoyar en el fichero angular.json de mi proyecto de crear un lector de códigos QR que puedes encontrar 👉 aquí

Si te fijas, en la línea 21 puedes leer el parámetro en el cuál definiremos el punto de entrada para nuestra aplicación web, que como casi siempre será un fichero index.html

En la línea 22 puedes leer el parámetro que será el punto de entrada para la aplicación de Angular propiamente dicha, que casi siempre será el main.ts.

Si seguimos tirando del hilo, vemos que en el fichero main.ts hay una línea que carga un módulo, el módulo por defecto de Angular, el AppModule (app.module.ts) que será el módulo de arranque.

  //FICHERO main.ts 👇

  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  👉👉👉platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  
        

Si abrimos el fichero app.module.ts, de un proyecto Angular creado desde 0, nos encontramos

//FICHERO app.module.ts 👇

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

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

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

Vemos que hay una propiedad bootstrap dentro del decorador @NgModule

Esta propiedad bootstrap indica sobre qué componente voy a arrancar mi aplicación, es decir, el componente raíz de mi aplicación Angular.

¿Cuáles son las diferencias entre el constructor de un componente y el ngOnInit?¿Cuál se llama primero?

Como en toda clase de programación orientado a objetos, el contructor es el primer método que se lanza al instanciar la clase.

El contructor sería el lugar correcto para indicar a la clase qué dependencias necesitamos cargar.

El método ngOnInit es un método propio de Angular y que forma parte del ciclo de vida de un componente.

El método ngOnInit se dispara cuando el componente ya está listo para usarse.

Actualización 26.03.2023 👇

Preguntas comunes en entrevistas Angular 🅰 Segunda parte

¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la segunda parte.

Preguntas comunes en entrevistas Angular 🅰 Tercera parte

¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la tercera parte.

Preguntas comunes en entrevistas Angular 🅰 Cuarta parte

¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la cuarta parte.

Hasta luego 🖖