En primer lugar, el marco mismo ya no se conoce como AngularJS. La comunidad ha decidido llamar al nuevo marco solo como ‘Angular’ (sin parte de JS). El nuevo angular es un poco difícil de aprender si es nuevo en el desarrollo de Frontend y aún no ha trabajado con TypeScript. Pero no se preocupe, le proporcionaré una breve descripción de la arquitectura angular y cuáles son los componentes básicos de una aplicación angular junto con un video que puede consultar para comprenderlo.
Antes de entrar en estos tecnicismos, permítanme citar a Aristóteles aquí, ya que se adapta mejor a la situación actual y puede adherirse a él como un mantra para aprender angular:
“Para las cosas que tenemos que aprender antes de poder hacerlas, aprendemos haciéndolas”.
Bien entonces, espero que hayas entendido el punto que quiero hacer usando la cita anterior. Entonces, solo configure su entorno de desarrollo y luego, siga los videos tutoriales proporcionados en esta respuesta. Para instalar el entorno de desarrollo angular, puede ver el siguiente video:
La siguiente imagen muestra los diferentes bloques de construcción que componen una aplicación angular completa:
Básicamente, el diagrama anterior muestra la arquitectura completa de las aplicaciones angulares. Comprendamos la función de cada concepto o término que está presente aquí.
- Componentes y metadatos: piense en los componentes como un pequeño parche de pantalla de toda la interfaz de usuario de su aplicación web. Por ejemplo, la barra superior que tiene el botón de inicio y la sección de respuesta de esta interfaz de usuario web de quora puede ser un componente. Del mismo modo, la parte donde puede ver diferentes respuestas presentes como una lista desplazable puede ser otro componente. En términos simples, un componente es un bloque de interfaz de usuario independiente de toda la interfaz de usuario de la aplicación web que consta de dos partes: Ver / Plantilla ( la parte visual del componente que ve un usuario ) y la Lógica empresarial (la parte que contiene lógica para proporcionarle lo esperado Interacción). Los metadatos son algo que adjuntas a tu clase de componente para que angular pueda saber si esta clase es componente o no.
- Enlace de datos: espero usted entendió que un componente es esencialmente una combinación de plantilla y lógica empresarial. Ahora, la comunicación entre la plantilla y la lógica empresarial de un componente se realiza mediante un mecanismo denominado enlace de datos. Básicamente, le ayuda a vincular su lógica empresarial con la de su plantilla. Con respecto a la dirección del flujo de datos entre la plantilla y la lógica empresarial, el enlace de datos se clasifica en tres tipos: enlace de propiedades (desde la lógica comercial a la plantilla / DOM), enlace de eventos (desde DOM / plantilla a la lógica empresarial) y bidireccional Enlace de datos (de la lógica de negocios a DOM y viceversa). Para comprender estas formas de enlace de datos en detalle, vea el siguiente video:
- Directivas: las directivas le brindan formas de manipular el DOM: su estructura o atributos como el color de fuente, el color de fondo. Angular le proporciona varias directivas integradas para jugar (la descripción de tales directivas se muestra en el video a continuación junto con una demostración práctica). Además de eso angular también le da libertad para codificar sus propias directivas personalizadas.
- Módulo: puede considerar el módulo como un bloque de lego individual del que está compuesto un juguete de lego completo. Básicamente, el módulo le permite encapsular todas las funcionalidades comunes (componentes, directivas, etc.) juntas. Por ejemplo, puede tener un módulo separado para su página de inicio, para la página de inicio de sesión / registro, etc. Cada aplicación angular contiene un módulo raíz denominado AppModule. Este será el módulo en el que comenzará a trabajar inicialmente y registrará todos sus componentes. AppModule se inicia o puede decir que se carga al comienzo de la aplicación y luego carga el AppComponent, que es el primer componente que se procesará cuando inicie la aplicación.
- Enrutadores: el enrutador angular es uno de los aspectos más importantes de cualquier aplicación angular. Permite al usuario navegar a diferentes partes de su aplicación web con cualquier recarga de página. Para más detalles mira el siguiente video:
- Servicios: los servicios le permiten encapsular todas las funciones de no visualización que puede proporcionar a diferentes partes de la aplicación. Por ejemplo, supongamos que desea agregar funcionalidad de ordenamiento a algunas partes del código de la aplicación. Entonces, en lugar de escribir la lógica de clasificación en todos esos lugares una y otra vez, lo que debe hacer es colocar la lógica de clasificación dentro de una clase de servicio y luego proporcionarla a todos esos componentes donde sea necesario.
Nota: Algunos de los videos aún no han llegado a esta lista de reproducción angular 4 . Por lo tanto, siga buscando actualizaciones.
En caso de que prefiera blogs en lugar de video, puede consultar este blog tutorial angular.
Además de estos videos, le recomendaría que siga la guía de documentación oficial que está muy bien escrita y contiene también un tutorial para principiantes.
¡Espero eso ayude!
