¿Por qué se introdujeron frameworks del lado del cliente como Angular?

En el pasado, los desarrolladores web usaban VanillaJS y jQuery para desarrollar sitios web
dinámicos pero, a medida que crecía la lógica del sitio web, el código se volvía cada vez más
tedioso de mantener. Para las aplicaciones que usan una lógica compleja, los desarrolladores
tuvieron que hacer un esfuerzo adicional para mantener la separación de preocupaciones para la
aplicación. Además, jQuery no proporcionó facilidades para el manejo de datos entre vistas.

Para abordar los problemas anteriores, los frameworks del lado del cliente como Angular
entraron en escena, lo que facilitó la vida de los desarrolladores al manejar la separación de
preocupaciones y dividir el código en bits de información más pequeños (en el caso de Angular,
llamados Componentes).

Los marcos del lado del cliente permiten desarrollar aplicaciones web avanzadas como la
aplicación de una sola página. No es que no podamos desarrollar SPA usando VanillaJS, pero al
hacerlo, el proceso de desarrollo se vuelve más lento.

Cómo funciona una aplicación Angular?

En el angular.json tenemos la configuración de la app. Si vemos en el apartado build en la
property main se define el punto de entrada de la aplicación que es el main.ts

El main.ts crea un browser environment y hace el bootstrap module que hace el bootstrap de
nuestra aplicación. Se carga el AppModule que hace el bootstrap del AppComponent que es el
componente que se carga en el body del index.html

Bootstrap: `correa de arranque`

una técnica de cargar un programa en una computadora por medio de unas pocas instrucciones
iniciales que permiten la introducción del resto del programa desde un dispositivo de entrada.

¿Cuáles son algunas de las ventajas de Angular sobre otros frameworks?

Angular proporciona una serie de funciones integradas como enrutamiento, state
management, biblioteca rxjs y servicios http directamente listas para usar. Esto significa que
no es necesario buscar las características mencionadas anteriormente por separado. Todas ellas
están provistas por angular.
Interfaz de usuario declarativa: Angular usa HTML para representar la interfaz de usuario de
una aplicación. HTML es un lenguaje declarativo y es mucho más fácil de usar que JavaScript.
Soporte de Google a largo plazo: Google anunció soporte a largo plazo para Angular. Esto
significa que Google planea quedarse con Angular y ampliar aún más su ecosistema.

¿En qué se diferencian las expresiones en angular de las expresiones de JavaScript?

La primera y quizás la mayor diferencia es que las expresiones en angular nos permiten escribir
JavaScript en HTML, lo que no es el caso cuando se trata de expresiones de JavaScript.

A continuación, las expresiones en angular se evalúan con respecto a un objeto de local scope,
mientras que las expresiones de JavaScript se comparan con un objeto de global scope o global
window también se le dice.
¿Qué son las aplicaciones de una sola página (SPA)? Las aplicaciones de una sola página son
aplicaciones web que solo necesitan cargarse una vez, con una nueva funcionalidad que consiste
en solo cambios menores en la interfaz de usuario. No carga nuevas páginas HTML para mostrar
el contenido de la nueva página, sino que lo genera dinámicamente. Esto es factible gracias a la
capacidad de JavaScript para alterar los componentes DOM en la página actual. Un método de
aplicación de una sola página es más rápido, lo que da como resultado una experiencia de
usuario más consistente.

¿Qué son los templates en Angular?

Un template es un tipo de HTML que le indica a Angular cómo mostrar un componente. Un
template HTML en angular, como el HTML convencional, produce una vista o interfaz de
usuario en el navegador, pero con muchas más capabilities. La API angular evalúa un template
HTML de un componente, crea HTML y lo renderiza.

Hay dos formas de crear una plantilla en un componente Angular: Inline Template y Linked
Template.

Inline Template: la configuración template del decorator component se utiliza para especificar
un template HTML en línea para un componente. La Plantilla se envolverá dentro de comillas
simples o dobles.
Linked Template: un componente puede incluir un template HTML en un archivo HTML
separado con la opción templateUrl que se usa para indicar la ruta del archivo de plantilla
HTML.

¿Qué son las directivas en Angular?

Una directiva es una clase en Angular que se declara con un decorador @Directive.
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appBlueBackground]'
})
export class BlueBackgroundDirective {
constructor(el:ElementRef) {
el.nativeElement.style.backgroundColor = "blue";
}
}
Cada directiva tiene su propio comportamiento y se puede importar a varios componentes de una
aplicación.

¿Cuándo usar una directiva?

Considere una aplicación, donde varios componentes deben tener funcionalidades similares. Lo
normal es agregar esta funcionalidad individualmente a cada componente, pero esta tarea es
tediosa de realizar. En tal situación, uno puede crear una directiva que tenga la funcionalidad
requerida y luego, importar la directiva a los componentes que requieren esta funcionalidad.

Tipos de directivas:
1. Directivas de componentes

Estos forman la clase principal en las directivas. En lugar del decorador @Directive, usamos el
decorador @Component para declarar estas directivas. Estas directivas tienen una vista, una hoja
de estilo y una propiedad de selector.

2. Directivas estructurales

Estas directivas generalmente se usan para manipular elementos DOM.

Cada directiva estructural tiene un signo '*' antes de ellos.
Podemos aplicar estas directivas a cualquier elemento del DOM.

3. Directivas de atributos

Estas directivas se utilizan para cambiar la apariencia y el comportamiento de un elemento del

DOM. La de Data-qa

Explicar componentes, módulos y servicios en Angular

Componentes
En Angular, los componentes son los bloques de construcción básicos, que controlan una parte
de la interfaz de usuario para cualquier aplicación.

Un componente se define utilizando el decorador @Component. Cada componente consta de tres

partes, el template que carga la vista del componente, una hoja de estilo que define la apariencia
del componente y una clase que contiene la lógica de negocio del componente.

Módulos
Un módulo es un lugar donde podemos agrupar componentes, directivas, servicios y pipes. El
módulo decide si los componentes, directivas, etc. pueden ser utilizados por otros módulos,
exportando u ocultando estos elementos. Cada módulo se define con un decorador @NgModule.

Por defecto, los módulos son de dos tipos: Root Module y Feature Module.
Cada aplicación puede tener solo un Root Module, mientras que puede tener uno o más Feature
Module.

El Root Module importa BrowserModule, mientras que un Feature Module importa

CommonModule.

Servicios
Los servicios son objetos que se instancian solo una vez durante la vida útil de una aplicación. El
objetivo principal de un servicio es compartir datos y funciones con diferentes componentes de
una aplicación Angular.
Un servicio se define usando un decorador @Injectable. Una función definida dentro de un
servicio se puede invocar desde cualquier componente o directiva.

¿Qué es el scope?
En Angular, el scope es un objeto que se refiere al modelo de aplicación. Es un contexto en el
que se pueden ejecutar expresiones. Estos scopes se agrupan jerárquicamente, de forma
comparable a la estructura DOM de la aplicación. Un scope ayuda en la propagación de varios
eventos y el seguimiento de las expresiones.

¿Qué es el data binding en Angular?

El data binding es uno de los elementos más significativos y efectivos para crear comunicación
entre el DOM y el componente. Hace que el diseño de aplicaciones interactivas sea más fácil al
reducir la necesidad de preocuparse por la transferencia y extracción de datos entre el
componente y el template.
Hay cuatro tipos de data binding en Angular: Property Binding, Event Binding, String
interpolation y Two way data binding.
Property Binding: En el Property Binding, conectamos la propiedad de un elemento del DOM a
un campo que es una propiedad declarada en nuestro código del componente de TypeScript. En
realidad, Angular transforma internamente la interpolación de strings en un Property Binding.

Event Binding: al usarlos se puede responder a eventos del DOM como clics de botones y
movimientos del mouse. Cuando se produce un evento del DOM (como un clic, un cambio o una
pulsación de tecla), se llama al método designado del componente.

String interpolation: para exportar datos de la clase del componente a la vista, la interpolación
de strings es un enfoque de data binding unidireccional. Los datos del componente se muestran
en la vista utilizando la expresión de template encerrada entre llaves dobles. El valor de una
propiedad del componente se agrega mediante la interpolación de strings.

¿Qué es el data binding bidireccional en Angular?

El intercambio de datos entre una clase de componente y su template se conoce como data
binding bidireccional. Si modifica los datos en un área, se reflejará inmediatamente en el otro
extremo. Esto sucede de forma instantánea y automática, lo que garantiza que el template HTML
y el código TypeScript estén siempre actualizados. El property binding y el event binding se
unen/acoplan en un data binding bidireccional.
Para que funcione el enlace de datos bidireccional, la propiedad @Output() debe usar el patrón,
inputChange, donde input es el nombre de la propiedad @Input(). Por ejemplo, si la propiedad
@Input() es size, la propiedad @Output() debe ser sizeChange.
¿Qué son los decoradores y sus tipos en Angular?
Los decoradores son un concepto fundamental en TypeScript, y debido a que Angular depende
en gran medida de TypeScript, los decoradores también se han convertido en un elemento
importante de Angular.

Los decoradores son métodos o patrones de diseño que están etiquetados con un símbolo @
prefijado y precedidos por una clase, método o propiedad. Permiten la modificación de un
servicio, directiva o pipe antes de que se utilice. Un decorador, en esencia, proporciona
metadatos de configuración que especifican cómo se debe procesar, construir y utilizar un
componente, una clase o un método en tiempo de ejecución. Angular incluye una serie de
decoradores que adjuntan varios tipos de metadatos a las clases, lo que permite que el sistema
entienda qué significan todas estas clases y cómo deberían funcionar.

Tipos de decoradores:

Decorador de métodos: los decoradores de métodos, como su nombre lo indica, se utilizan para
agregar funcionalidad a los métodos definidos dentro de nuestra clase. @HostListener
Decorador de clase: los decoradores de clase son los decoradores de más alto nivel que
determinan el propósito de las clases. Le indican a Angular que una clase específica es un
componente o módulo. Y el decorador nos permite declarar este efecto sin tener que escribir
ningún código dentro de la clase. @Component
Decorador de parámetros: los argumentos de los constructores de su clase se decoran con
decoradores de parámetros.
Decorador de propiedades: estos son los segundos tipos de decoradores más populares. Nos
permiten mejorar algunas de las propiedades en nuestras clases. @Input

¿Qué son las anotaciones en Angular?

Estas son características del lenguaje que están codificadas de forma rígida. Las anotaciones son
simplemente metadatos que se establecen en una clase para reflejar la biblioteca de metadatos.
Cuando un usuario anota una clase, el compilador agrega una propiedad de anotaciones a
la clase, guarda una matriz de anotaciones en ella y luego intenta crear una instancia de un
objeto con el mismo nombre que la anotación, proporcionando los metadatos al
constructor. Las anotaciones en AngularJs no están predefinidas, por lo que podemos
nombrarlas nosotros mismos.
¿Qué son los pipes puros?
Estos son pipelines que solo emplean funciones puras. Como resultado, un pipe puro no emplea
ningún estado interno y la salida permanece constante mientras los parámetros proporcionados
permanezcan constantes. Angular llama al pipe solo cuando cambian los parámetros
proporcionados. Se utiliza una única instancia del pipe puro en todos los componentes.

¿Qué son los pipes impuros?

Angular llama a un pipe impuro para cada ciclo de detección de cambios, independientemente
del cambio en los campos de entrada. Para cada uno de estos pipes, se producen varias instancias
del pipe. Los inputs de estos pipes se pueden modificar.

Por default, todos los pipelines son puros. Se puede especificar pipes impuros utilizando la
propiedad pure.

@Pipe({
   name: 'impurePipe',
   pure: false/true   
})
export class ImpurePipe {}

¿Qué es la interfaz PipeTransform de los pipes en Angular?

Una interfaz utilizada por los pipes para lograr una transformación. Angular llama a la función
transform con el valor de un enlace como primer argumento y cualquier argumento como
segundo parámetro en forma de lista. Esta interfaz se utiliza para implementar custom pipes.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'tranformpipe'
})
export class TranformpipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
   return null;
 }
}

Angular por defecto, utiliza client-side rendering para sus aplicaciones.

¿Se puede hacer una aplicación angular para renderizar en el lado del servidor?

Sí, angular proporciona una tecnología llamada Angular Universal, que se puede usar para
representar aplicaciones en el lado del servidor.

Las ventajas de usar Angular Universal son:

Los usuarios pueden ver instantáneamente una vista de la aplicación. Con esto se logra
proporcionar una mejor experiencia de usuario.
Muchos motores de búsqueda esperan páginas en HTML simple, por lo tanto, Universal puede
asegurarse de que su contenido esté disponible en todos los motores de búsqueda, lo que
conduce a un mejor SEO.
Cualquier aplicación renderizada del lado del servidor se carga más rápido ya que las páginas
renderizadas están disponibles para el navegador antes.

¿Qué es la carga Eager(ansiosa) y Lazy(perezosa)?

Cargando: La técnica de Eager Loading es la estrategia predeterminada de carga de módulos.
Los Feature Modules con Eager Loading se cargan antes de que comience el programa. Esto se
utiliza principalmente para aplicaciones a pequeña escala.
Lazy Loading: Lazy loading carga los Feature Modules dinámicamente según sea necesario. Esto
acelera la aplicación. Se utiliza para proyectos más grandes donde no se requieren todos los
módulos al principio. En el AppRountingModule se usa el loadChildren que carga el modulo
en vez de usar directo el component: y en el routing de ese modulo si se usa el component:.

¿Qué es la encapsulación de vistas(View Encapsulation) en Angular?

La View Encapsulation especifica si el template y los estilos del componente pueden afectar a
todo el programa o viceversa.

Angular ofrece tres métodos de encapsulación:

Native: el componente no hereda estilos del HTML principal. Los estilos definidos en el
decorador @Component de este componente solo se aplican a este componente.
Emulated (Default): el componente hereda estilos del HTML principal. Los estilos establecidos
en el decorador @Component solo se aplican a este componente.
None: los estilos del componente se propagan al HTML principal y, por lo tanto, son accesibles
para todos los componentes de la página. Tenga cuidado con los programas que tienen
componentes Ninguno y Nativo. Los estilos se repetirán en todos los componentes con
encapsulación Nativa si no tienen encapsulación.

¿Qué es RxJs en Angular?

RxJS es un acrónimo que significa Extensiones reactivas para JavaScript. Se utiliza para habilitar
el uso de observables en nuestro proyecto de JavaScript, lo que nos permite hacer programación
reactiva. RxJS se utiliza en muchos marcos populares, incluido Angular, ya que nos permite
componer nuestro código asincrónico o basado en devolución de llamada en una secuencia de
operaciones ejecutadas en un flujo de datos que libera valores de un editor a un suscriptor. Otros
lenguajes de programación, como Java y Python, ofrecen paquetes que les permiten desarrollar
programas reactivos utilizando observables.

La mayoría de las veces, rxJs se usa en llamadas HTTP con angular. Debido a que las
transmisiones http son datos asincrónicos, podemos suscribirnos a ellos y aplicarles filtros.

Explicar String interpolation y property binding en Angular.

String interpolation y el property binding son partes del data binding en Angular.
Data binding es una característica de angular, que proporciona una forma de comunicación entre
el componente y su vista.
La vinculación de datos se puede realizar de dos formas, One way binding y two way binding.
En Angular, los datos del componente se pueden insertar dentro del template HTML. En el one
way binding, cualquier cambio en el componente se reflejará directamente dentro de la vista
HTML, pero no es posible viceversa. Es posible con two way data binding.
String interpolation y el property binding solo permiten One way binding.
La String interpolation utiliza las llaves dobles {{ }} para mostrar los datos del componente.
Angular ejecuta automáticamente la expresión escrita dentro de las llaves, por ejemplo, {{ 2 +
2 }} será evaluado por Angular y la salida 4 se mostrará dentro de la plantilla HTML. Usando el
property binding, podemos enlazar las propiedades del DOM de un elemento HTML a la
propiedad de un componente. El property binding utiliza la sintaxis de corchetes [ ].

CATEGOR
TYPE SYNTAX
Y

Interpolation
Property
Attribute
content_copy{{expression}}
Class One-way from
Style [target]="expression" data source to
view target

One-way from
content_copy(target)="statement" view target to
Event data source

content_copy[(target)]="expression
"
Two-way Two-way

¿En qué se diferencian los observables de las promesas?

La primera diferencia es que un Observable es perezoso mientras que una Promesa es ansiosa.

Promesa: Emite un solo valor, No Lazy, No se puede cancelar.

Observable: Emite múltiples valores durante un período de tiempo. Lazy: Un observable no se
llama hasta que nos suscribimos al observable. Se puede cancelar usando el método
unsubscribe()
Observable proporciona operadores como map, forEach, filter, reduce, retry, retryWhen, etc.

Explique el concepto de Inyección de Dependencia?

La inyección de dependencia es un patrón de diseño de aplicaciones implementado por Angular.

También forma uno de los conceptos centrales de Angular.

Entonces, ¿qué es la inyección de dependencia en términos simples?

Analicémoslo, las dependencias en angular no son más que servicios (@Injectable) que tienen
funcionalidad. La funcionalidad de un servicio puede ser necesaria para varios componentes y
directivas en una aplicación. Angular proporciona un mecanismo fluido mediante el cual
podemos inyectar estas dependencias en nuestros componentes y directivas.
constructor(private testService:TestService) { }
Básicamente, solo estamos creando dependencias que se pueden inyectar en todos los
componentes de una aplicación.

¿Qué son los lifecycle hooks en Angular? Explique algunos ganchos del ciclo de vida.
Cada componente en Angular tiene un ciclo de vida y diferentes fases por las que pasa desde el
momento de la creación hasta el momento en que se destruye. Angular proporciona ganchos para
aprovechar estas fases y desencadenar cambios en fases específicas de un ciclo de vida.

https://docs.angular.lat/guide/glossary#lifecycle-hook

https://docs.angular.lat/guide/router#preventing-unauthorized-access