Corrector Control Dfa s1 2022

CORRECTOR CONTROL
Desarrollo Frontend con Angular – Otoño 2022

Profesor Luis Gajardo
viernes 29 de julio de 2022
Parte 1 (2 pts = 0,4 c/u)
1. ¿Qué es Angular?, Responda indicando 4 características
• (0,1) Angular es un framework de JavaScript

• (0,1) Es de código abierto (open source)
• (0,1) Es mantenido por Google
• (0,1) Permite crear aplicaciones de una sola página o SPA
2. ¿Cómo se reconstruye un proyecto cuando no existe la carpeta node_modules?. ¿Qué

archivos es clave en este proceso?
• (0,2) Se utiliza el comando npm install para reconstruir la carpeta node_modules

• (0,2) El archivo clave es package.json contiene las referencias alas librerías y módulos utilizados
por el proyecto
3. ¿Qué es el Angular CLI?
Es una herramienta de línea de comandos que facilita la construcción de un proyecto Angular

(0,2) (0,2)
4. ¿Por qué es necesaria la programación asíncrona en Angular? ¿Qué técnicas permite utilizar
Angular para realizar este tipo de programación?
• (0,2) Es necesaria porque las aplicaciones que consumen servicios fuera de la máquina local
deben esperar la respuesta del servidor, la que puede variar mucho dependiendo de varios
factores. En estos casos la aplicación podría quedar bloqueada a la espera de la respuesta.
• Angular provee dos mecanismos principales, que en realidad son proveídos por javascript, estos
son:
o (0,2) Observables: es un objeto, que llamaremos sujeto (subject), que gestiona una lista de
suscriptores, llamados observadores (observers), y automáticamente les notifica cualquier
cambio de estado.
o Promesas: corresponde a un valor que se espera en un tiempo futuro no definido
después de ejecutar, de forma asíncrona, una operación.
5. Indique 3 características/diferencias para los formularios reactivos (reactive form) y formularios

controlados por plantilla (template driven) que provee Angular.
• Reactive Form - Más flexible, pero necesita más práctica.

• Reactive Form - Adecuado en escenarios complejos
• Reactive Form - No se realiza ningún data binding (inmutable data model preferido por la
mayoría de los desarrolladores)
Parte 2 (2 pts = 0,4 c/u)
1. ¿Para qué sirve un decorador?
a) Para extender una función mediante otra función, pero sin tocar la original, que se está
extendiendo.
b) Para modificar HTML mediante funciones JS.
c) Para modificar CSS mediante funciones JS.
2. ¿Cuál es la diferencia entre un componente y una directiva?
a) Las directivas son piezas de negocio, mientras que los componentes se suelen usar para
presentación y problemas estructurales.
b) Los componentes son piezas de negocio, mientras que las directivas se suelen usar para
presentación y problemas estructurales.
c) Son prácticamente lo mismo.
3. ¿Qué comando de Angular CLI debo utilizar para crear un componente llamado mi-componente?
a) ng make component mi-componente

b) ng extend component mi-componente
c) ng create component mi-componente
d) ng generate component mi-componente
4. ¿Cómo sirvo/ejecuto una aplicación en Angular, gracias a su servidor web integrado?
a) angular-cli serve
b) angular serve
c) node serve
d) ng serve
5. Respecto de los módulos de Angular
a) Todo servicio debe pertenecer a un módulo

b) Todo componente debe pertenecer a un módulo
c) Toda aplicación Angular debe tener al menos un módulo
d) Toda directiva debe pertenecer a un módulo
Parte 3 (2 pts)
1) (1 pt = 0,25 c/u) ¿Qué técnica se aplica en cada una de las siguientes operaciones?, Explique:
a) <button (click)=’clic()’></button>
Event Binding ( )
Permite escuchar eventos gatillados por el usuario o navegador.
b) <img [src]=’foto’>
Property Binding [ ]
Permite pasar datos desde la clase al template.
c) {{contador}}
Interpolación {{ }} - “One-Way Binding”

Enlace que crea un canal de comunicación en una sola dirección, desde la lógica (class) a la vista
(template).
d) <input [(ngmodel)]=’dato’ />
Two Way Binding [( )]

Permite vincular datos en los dos sentidos.
2) (1 pt = 0,25 c/u) Se tiene un formulario reactivo en el cual se debe hacer validación usando
FormBuilder para un campo llamado email con las siguientes características:
a) Valor inicial para mostrar al usuario: correo@dominio.cl

b) No debe ser vacío
c) Debe ser un email válido (bien formado)
d) No debe existir previamente en la base de datos
Utilice el código que se presenta a continuación y agregue sólo las líneas necesarias para la
validación solicitada.
formProduct: FormGroup;
constructor(private formBuilder: FormBuilder) {

this.formProduct = this.formBuilder.group({
/*agregue aquí su código*/ 0,25
email: ['correo@dominio.cl', [Validators.required, Validators.email],
0,25 0,25 this.emailValidator()],
}); 0,25
}
/* Este código no necesita ser preciso en sintáxis */

emailValidator(): AsyncValidatorFn {
return (control: AbstractControl): Observable<{ [key: string]: any } | null> => {
let code = control.value;
return this.userService.searchEmail(control.value)
.pipe(map(res => {
if (res && res.length) {
return { 'existe': true }; /*el email ya está registrado*/
}
return null; /*el email no existe*/
})
);
};
}

Corrector Control Dfa s1 2022

Cargado por

Copyright:

Formatos disponibles

Corrector Control Dfa s1 2022

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Corrector Control Dfa s1 2022

Cargado por

Copyright:

Formatos disponibles

CORRECTOR CONTROL

Desarrollo Frontend con Angular – Otoño 2022

viernes 29 de julio de 2022

Parte 1 (2 pts = 0,4 c/u)

1. ¿Qué es Angular?, Responda indicando 4 características

• (0,1) Angular es un framework de JavaScript

2. ¿Cómo se reconstruye un proyecto cuando no existe la carpeta node_modules?. ¿Qué

• (0,2) Se utiliza el comando npm install para reconstruir la carpeta node_modules

3. ¿Qué es el Angular CLI?

Es una herramienta de línea de comandos que facilita la construcción de un proyecto Angular

5. Indique 3 características/diferencias para los formularios reactivos (reactive form) y formularios

• Reactive Form - Más flexible, pero necesita más práctica.

1. ¿Para qué sirve un decorador?

2. ¿Cuál es la diferencia entre un componente y una directiva?

a) ng make component mi-componente

4. ¿Cómo sirvo/ejecuto una aplicación en Angular, gracias a su servidor web integrado?

5. Respecto de los módulos de Angular

a) Todo servicio debe pertenecer a un módulo

Interpolación {{ }} - “One-Way Binding”

d) <input [(ngmodel)]=’dato’ />

Two Way Binding [( )]

a) Valor inicial para mostrar al usuario: correo@dominio.cl

constructor(private formBuilder: FormBuilder) {

/* Este código no necesita ser preciso en sintáxis */

También podría gustarte