9 Preguntas para entrevista de Trabajo sobre Angular – Programador Junior
Qué es Angular?
Angular es un front-end de código abierto basado en TypeScript que facilita la creación de aplicaciones en la web / móvil y de escritorio.
Algunas características de este framework, son las plantillas declarativas, la inyección de dependencias, y muchas otras características que facilitan el desarrollo.
Cuales son las diferencias entre AngularJS y Angular ?
Angular es un framework basado en componentes, completamente diferente a su predecesor.
Algunas de las principales diferencias en forma de tabla
ANGULAR JS
ANGULAR
Estaba basado en el patrón MVC
Está basado en Service / Controller
Usaba JavaScript para escribir las APPs
Está basado en TypeScript
Estaba basado en el concepto de Controllers
Está basado en componentes
NO era un framework mobile friendly
Y claro como Angular es totalmente nuevo a sintaxis a cambiado.
Qué son las directivas?
Las directivas añaden comportamiento a un elemento del DOM existente.
Qué es un componente?
Un componente controla un parte de pantalla, llamado vista.
Los componentes son bloques de construcción de interfaz de usuarios.
Estos componentes son subconjuntos de directivas. A diferencia de las directivas, los componentes siempre tienen una plantilla (html).
Qué es Angular CLI?
Angular CLI (Command Line Interface) es una interfaz de línea de comando para montar y construir aplicaciones de Angular.
Cuál es la diferencia entre constructor y ngOnInit?
Las clases de TypeScript tienen un método predeterminado llamado constructor que normalmente se usa con propósitos de inicialización.
Mientras que el método ngOnInit es específico de Angular, se usa especialmente para definir bindings.
El constructor se ejecuta primero que el ngOnInit.
Para usar ngOnInit, debe implementar la interfaz OnInit.
Digame algunas directivas estructurales?
Las directivas estructurales permiten añadir, manipular o eliminar elementos del DOM. Por ejemplo : *ngIf *ngFor *ngSwitch
Cuál es el propósito de la directiva *ngIf?
A veces, una aplicación necesita mostrar una vista u otra dependiendo de circunstancias específicas.
La directiva *ngIf inserta o elimina un elemento basado en una condición de true / false.
Qué es la interpolación?
La interpolación es una sintaxis especial de Angular, que permite hacer binding de una propiedad.
Es una alternativa al property binding. Y está representado por dobles llaves {{}}.
Heroku es una de las plataformas en la nube más populares. Podemos usarlo para implementar y administrar nuestra aplicación de manera simple y conveniente.
Este tutorial te enseña como desplegar tu aplicación Node.js, express y MySql en Heroku.
Utilizamos el add-on de ClearDB para la base de datos MySQL. El despliegue se realizará utilizando Git y Heroku CLI.
Para poder explicar la diferencia entre CSS y SCSS, debemos empezar por explicar qué es SASS.
Sass (Syntactically Awesome Stylesheets)
Es un metalenguaje de hoja de estilos. Basado en SassScript, que es un lenguaje de script simple.
Este es un lenguaje de script que es traducido a CSS. Y muchos lo definen como CSS con superpoderes. El intérprete de SASS traduce el código a CSS
En SASS tenemos dos sintaxis .sass y .scss
CSS : es un lenguaje de hojas de estilo, sirve para organizar la presentación y aspecto de una página web, ya sea en un ordenador / computadora, un móvil / celular, una Tablet, etc
SCSS: Es la sintaxis de CSS pero con todas las ventajas de SASS.
La sintaxis de SCSS a diferencia de la sintaxis de Sass usa archivos con extensión .scss, a pesar de esto nos provee de las mismas características.
Variables, nesting (anidamiento), mixins, y herencia de los selectores.
Esta sintaxis suele ser la más utilizada ya que es muy parecida a la sintaxis de CSS.
Tutorial para aprender formularios reactivos en Angular 8
Los formularios son parte esencial de nuestras aplicaciones. En Angular tenemos dos enfoques de formularios, Template forms y Reactive Forms.
Desde un login, un formulario para reservar un hotel, o formularios para realizar trámites gubernamentales. Cualquiera de estos formularios lo podríamos hacer con Reactive Forms.
Aunque en una primera instancia para formularios más sencillos podríamos usar template forms.
Y para casos más avanzados podemos usar reactive forms. Pero esto es solo son supuestos.
Los formularios reactivos utilizan un enfoque explícito e inmutable.
Los datos de dichos formularios están enlazados con nuestro objeto de manera sincrónica.
Ya sabemos que tenemos dos opciones para trabajar con formularios en Angular; En esta ocasión me voy a centrar en los formularios reactivos.
Los formularios reactivos son más robustos (escalables) que los formularios template driven.
Si tu aplicación está basada en formularios, te recomiendo que utilizes formularios reactivos.
Bueno, basta de hablarte de las bondades de los formularios reactivos y vamos a ver un ejemplo.
Vamos a crear un formulario de contacto básico. Y guardaremos cada consulta en Firebase Cloud Firestore.
Y por supuesto tendremos validaciones en nuestro formulario.
Empecemos creando un nuevo proyecto de Angular. Yo voy a utilizar Angular 8, pero este ejemplo es compatible prácticamente al 100% en otras versiones.
ng new reactiveForms
Para este ejemplo no necesitamos rutas.
Would you like to add Angular routing? (y/N)
Para los estilos escogemos SCSS
Asegurate de estar dentro de la carpeta del proyecto y vamos a crear un componente.
Creamos un componente para pintar nuestro formulario.
ng g c components/contact
Vamos al componente principal app.component.html
Sustituye todo lo que hay ahora por lo siguiente.
<app-contact></app-contact>
Luego de este cambio podemos arrancar nuestro server. ng serve
Verás algo como esto, es posible que tú lo veas distinto si no tienes ningún proyecto creado, como puedes ver yo tengo algunos proyectos.
Haz clic en AÑADIR PROYECTO
Elige un nombre para tu proyecto -> aceptas las condiciones y Hacemos clic en CREAR PROYECTO
Luego de varias preguntas llegarás al proyecto.
Podrás ver algo como esto.
En Firebase podemos trabajar con aplicaciones móviles Android e ios y por supuesto web.
Vamos a hacer clic en icono de aplicaciones web (el tercero del recuadro).
Elige un nombre para registrar tu app.
Finalmente ya tenemos nuestra app creada, lo que se puede ver en el pantallazo anterior, es la información que utilizaremos para conectarnos a Firebase.
La parte importante para nosotros es el contenido de la variable firebaseConfig
Asegurate de crear tu propia app.
Debemos crear una base de datos.
En el menú de las izquierda selecciona Database y luego haz clic en Crear base de datos.
Elige: Empezar con el modo de prueba Y por último haremos clic en Listo.
Una vez que ya tenemos los datos de configuración para conectarnos a firebase.
Vamos a nuestro proyecto y en el fichero environment.ts
Vamos a realizar la instalación de las dependencia de firebase y @angular/fire
Desde nuestra consola ejecutamos el siguiente comando.
Vamos a aprovechar las ventajas de los Schematics.
ng add @angular/fire
OJO, el proyecto debes estar creado en firebase console
Con este comando instalamos varios packages.
Nota: Este tutorial está realizado en la versión 5.5.7 de firebase y 5.3.0 de @angular/fire
Ahora vamos al fichero app.module para realizar unas importaciones.
Importamos dos módulos de @angular/fire, el fichero de environment y el module que nos va permitir trabajar con formularios reactivos.
En el apartado de imports inyectamos el módulo de formularios reactivos, el Firestore Module e inicializamos el AngularFire Module pasandole nuestro fichero de configuración.
Este sería el resultado final.
Necesitamos crear un service, para crear los métodos que vamos a utilizar para guardar las consultas de nuestro formulario.
Desde la consola ejecutamos el comando
ng g s services/data
Ahora abrimos el fichero data.service.ts
Y realizamos las siguientes importaciones.
A continuación declaramos una propiedad contactCollection
En el método constructor le asignamos nuestra colección contacts, que será donde guardaremos la información.
Creamos el método saveMessage, para guardar en nuestra colección.
Este sería el resultado final del data.service.ts
En el componente
En el componente contact.component.ts
Este sería el resultado final del fichero, a continuación paso a comentar los más destacado.
En la línea 2 & 3 hago las importaciones del DataService y también necesitamos importar FormControl, FormGroup & Validators para trabajar con el módulo de formulario reactivo.
Creamos una propiedad llamada contactFormde tipo FormGroup.
La propiedad emailPattern, es tan solo una Regex para validar si el usuario ha introducido una email válido.
Luego, lo más destacable puede el método createForm donde creamos la instancia del formulario y asignamos la validaciones pertinentes.
Las propias validaciones en sí, son muy descriptivas.
Todos nuestros campos serán requeridos y con el método minLength(), indicamos el número mínimo para este campo.
También tenemos un método para hacer el reset de nuestro formulario, y onSaveForm para llamar el método saveMessage y le pasamos todo nuestro formulario.
Procedemos a trabajar con el HTML.
En el fichero contact.component.html Vamos a tener el html. Aquí no hay mucho que explicar.
Los más reseñable es la linea 3 <form [formGroup]="contactForm" (ngSubmit)="onSaveForm()">
Donde enlazamos nuestra instancia con el formulario. Y cuando ocurre el evento onSubmit llamamos al método onSaveForm.
Si arrancas la aplicación verás que no luce muy bien.
Vamos a añadir estilos. Este será el resultado final y recuerda que tienes el repo, donde puedes copiar estos estilos.
Arranca el server y vamos a probar nuestra app.
Como puedes ver el resultado es un formulario básico, que guarda las consultas en Firebase.
Para bien o para mal, vivimos en un época donde el acceso a tanta información puede llegar a ser abrumador.
Y en el campo de la enseñanza online puede ser uno de los sectores donde existen más información y la verdad que muy buena información y a veces cuesta dar con el lugar preciso para empezar un curso de Angular en este caso.
Aprender desarrollo web con Angular, es una oportunidad para poder acceder a un mejor empleo.
Es por este motivo que voy a darte unos tips para que puedas empezar en el universo Angular.
No existe (de manera oficial) ninguna certificación Angular. Así que te tienes que organizar para empezar a aprender este framework.
Udemy, es una de las plataforma de enseñanza online más destacadas del mundo.
Existen cursos en casi todos los idiomas.
Aunque es una plataforma de pago, existen algunos curso online gratis. En este link te comparto algunos cursos de Angular 5 gratis en Udemy para aprender Angular desde cero.
Clica sobre la imagen
Ten en cuenta que estos cursos pueden variar su estado y dejar de ser gratis.
Otra fuente inagotable de conocimiento es Youtube, existen muchos canales enfocados a la enseñanza de desarrollo web.
Vamos a compartir un top 3, de canales donde puedes aprender Angular en Castellano.
Angular
Nicobytes
Nicolas molina, explica de manera clara y concisa.
Y los temas que suele tocar son muy difíciles de hallar de manera gratuita.
A parte del curso de Angular 7 desde cero a avanzado. También dominicode es un canal de Youtube donde se puede aprender de manera gratuita Angular y Firebase.
Existen muchas dudas sobre cual framework Javascript escoger para nuestro proyectos o incluso cual aprender.
No te imaginas la dicha que tenemos, al poder elegir entre muy buenos frameworks.
Hay una especie de “guerra” entre Angular, React y en menor medida Vue.js.
Es normal tener la duda de hacer un curso de React o un curso de Angular 7.
Yo, voy a destacar ventajas de Angular, eso no quiere decir que sea mejor a los otros.
Así qué lo primero que siempre recomiendo es : Si puedes aprende Vue, React y Angular.
¿Qué es Angular?
Angular es un framework Javascript que se utiliza para el desarrollo de aplicaciones web, escritorio y móviles.
El desarrollo de aplicaciones con Angular implica el uso de Typescript, que es un superconjunto de Javascript, junto con HTML, CSS, etc.
El código escrito en Typescript se compila en Javascript y se representa en el navegador.
Angular es uno de los framework de Javascript más populares para crear aplicaciones web.
Podríamos decir que existen dos Angular, su versión 1.x (AngularJS) y Angular a secas, que empezó en la versión 2.
AngularJS no tiene nada que ver con las 2, 4 5, 6, 7, 8. Son totalmente distintas.
Por el momento el equipo de Angular lanza dos versiones al año.
A partir de la versión de Angular 4, podríamos decir que Angular obtuve cierta madurez y ha ido recuperando la confianza de los desarrolladores.
Ventajas de usar Angular
Hay varias ventajas de usar Angular, vamos a enumerar algunas de ellas.
Single Page Application
Angular soporta aplicaciones de una sola página.
Las aplicaciones de una sola página son un tipo de aplicaciones web que cargan una sola página HTML, y la página se actualiza dinámicamente de acuerdo con la interacción del usuario con la aplicación web.
Las aplicaciones de una sola página, también conocidas como SPA, pueden comunicarse con los servidores back-end sin actualizar la página web completa, para cargar datos en la aplicación.
Los SPA proporcionan una mejor experiencia de usuario ya que a nadie le gusta esperar demasiado tiempo para volver a cargar la página web completa.
Two-way data binding
Desde la versión 2, tenemos el Two-way data binding, que podríamos decir, que es la manera en Angular conecta nuestro view con el model.
Son propiedades que podemos declarar en la lógica de nuestra aplicación. Y podemos actualizar desde la vista de app.
Cuando se actualiza el almacén de datos, la interfaz de usuario también se actualiza inmediatamente.
Para su implementación debemos usar la directiva ngModel.
Modularidad en angular
Piensa en la modularidad en Angular como si el código estuviera organizado en “bloques”. Estos bloques son conocidos como “módulos” en Angular. El código de la aplicación se divide en varios módulos reutilizables.
Un módulo tiene componentes, directivas, pipes y servicios, etc. Estos módulos se pueden combinar entre sí para crear una aplicación.
Los módulos también ofrecen varios beneficios. Una de ellas es la carga diferida (Lazy loading), es decir, una o más funciones de la aplicación se pueden cargar bajo demanda.
Si se usa correctamente, la carga diferida puede aumentar mucho la eficiencia de una aplicación.
Las aplicaciones empresariales pueden crecer mucho, y por lo tanto, dividir la mano de obra en varios equipos podría ser un desafío. Con los módulos, el código se puede mantener organizado y la división del trabajo se puede hacer correctamente manteniendo la consistencia del código.
Interfaz de usuario declarativa
Angular utiliza HTML para definir la interfaz de usuario de una aplicación. HTML es intuitivo, declarativo y menos complejo que Javascript.
En una interfaz de usuario declarativa, la lógica de presentación está separada de la lógica imperativa. No debemos preocuparnos por el flujo del programa ni por el orden de carga de los componentes en la página web. Simplemente podemos definir el diseño de la página, dejar claro dónde se están enlazando los datos y a qué se está enlazando. Angular se encargará del resto.
Fácil integración
La integración angular está pre-integrada en varios marcos, por ejemplo, Ionic, Kendo UI de Telerik, Wijmo, etc. Por lo tanto, la integración de funciones de terceros es fácil con Angular. Por lo tanto, si desea agregar algunos componentes de interfaz de usuario de alta calidad, puede hacerlo fácilmente utilizando cualquiera de los frameworks mencionados anteriormente.
Multi-plataforma
Angular se puede utilizar para realizar cualquiera de los siguientes tipos de aplicaciones:
Aplicaciones web: Angular se puede utilizar para el desarrollo web. Además, desde Angular 5 en adelante, también se pueden desarrollar aplicaciones web progresivas. Estas aplicaciones tienen un alto rendimiento y pueden funcionar fuera de línea también.
Aplicaciones móviles nativas: Las aplicaciones móviles nativas pueden construirse usando Angular.
Aplicaciones de escritorio: Angular se puede usar para crear aplicaciones instaladas en el escritorio para Mac, Windows y Linux.
Estas son algunas de las ventajas de realizar un Curso de Angular, al momento de escribir este artículo se acaba de lanzar la versión 8 de Angular, pero yo recomiendo que empieces por aprender la Angular 7.
Empezamos el año 2019 con una ¡gran noticia! Github siempre ha tenido repositorios privados como parte de suscripción de pago. Tenías repositorios gratis y si querías tener repositorios privados tenias que pagar.
¡Ahora, las cuentas gratuitas pueden crear repositorios privados de forma gratuita y puedes añadir hasta 3 colaboradores!
Cuando Microsoft adquirió Github, prácticamente todo el sector, se mostró nervioso. Ya que, no sabíamos qué pasaría o cuales cambios se avecinan.
Incluso antes de que Microsoft comprara GitHub, han estado realizando algunos movimientos impresionantes en un sólido compromiso con el código abierto.
He sido muy “hater” de Microsoft durante mucho tiempo. Pero debo reconocer la gran labor que está llevando acabo Microsoft para los desarrolladores.
Si eres de los que se mudó a Gitlab o Bitbucket, cuando Microsoft adquirió Github, ahora es un buen momento para volver.
Git es un software de control de versiones diseñado por el creador de Linux, (Linus Torvalds) pensando en la eficiencia y en el mantenimiento de versiones de aplicaciones cuando éstas tienen un gran número de archivos de código fuente.
No voy a entrar a explicar en detalle como Git, modela los datos.
Para que sirve git?
Podemos decir que Git, hace una “copia” del proyecto, cuando confirmas un cambio, o guardas el estado del proyecto en Git, básicamente hace una foto del aspecto de todos tus archivos en ese momento, y guarda una referencia a esa instantánea.
Tú decides cuando deseas hacer una foto a tu código, y esto se realiza mediante un “commit”.
Ventajas:
La fácil distribución del código.
Facilidad para coordinar el trabajo entre multiples desarrolladores.
Podemos saber quién y cuando se han hecho cambios.
Revertir a versiones anteriores
Git está disponible para los tres grandes sistemas operativos, Linux/Unix, Windows y Mac OS X. En esta breve introducción yo voy a utilizar Mac.
Postman nos ayuda a ser más eficientes durante todo el ciclo de vida de desarrollo de una API.
El apartado de testing y debugging, con Postman no lo vamos a ver en esta entrega.
Ya que esos dos apartados de Postman ameritan un entrega completa.
Hoy en día las API RESTful están en todas partes, no importa la tematica de la aplicación, ni su tamaño.
Y al mismo tiempo son cada vez más complejas: métodos HTTP, headers, cookies, autenticación, tokens, OAuth y mucho más.
