Think in Angular way

Hola a todos, este artículo va a tratar un poco de cómo pensar en “modo” Angular viniendo principalmente de JQuery, que es el Framework más extendido y conocido por la comunidad.

Pensar en “modo” Angular es algo diferente a lo que veníamos haciendo hasta ahora.

Primero repasamos lo esencial que tiene JQuery:

Manipulación del DOM, es decir, agregar elementos HTML y/o manipular estilos CSS.
Agregar y manejar eventos de la página.
Enviar y recibir datos al servidor.

Ahora lo básico de AngularJS:

Databinding bidireccional (rellenado de datos automatizado).
Manipulación del DOM a través de Directivas.
HTML extendido (AngularJS añade sus propias etiquetas).
Enviar y recibir datos del servidor.

Ahora que tenemos lo básico de ambos bandos, ahora pensaremos en “modo” AngularJS:

Acceso al DOM. Esto es lo que más nos va a costar de entender y aplicar en nuestro desarrollo diario.
El acceso a los datos simplificado gracias al $scope. Esto quiere decir, que ya se terminó el buscar dentro del DOM todos los valores del formulario para enviarlos al servidor.
Las vistas se manejan desde los bloques Controller.
AngularJs tiene modificadores en las vistas para establecer eventos y valores del formulario así como la posibilidad de modificar el comportamiento de la vista.

Modificar visibilidad de un elemento de un formulario:

Nota del Ejemplo: Mientras que con JQuery siempre nos tenemos que apoyar en el DOM, en AngularJs vemos que con solo establecer a true la variable Ocultar, la directiva estructural ng-hide ocultaría el elemento.

Recoger valores de un formulario:

Nota del ejemplo: Aquí la clave que los diferencia, es cuando pulsamos en el botón de guardar. Con JQuery, siempre tenemos que obtener vía DOM el valor introducido y con AngularJs ya lo tenemos almacenado dentro del $scope. En ejecución, en ambos casos si cambiamos el texto por teclado, la diferencia reside en que con AngularJs se cambia ya directamente en la variable y en JQuery tenemos que obtener otra vez el cambio de texto.

Estos dos ejemplos son las cosas más comunes que hacemos en nuestros desarrollos. Digamos que es lo básico para empezar a comprender la forma que tiene de hacer las cosas AngulaJs. Lo que debemos de hacer a partir de ahora es tener paciencia, cambiar un poco la manera de trabajar y leer la documentación, porque el resto hay que pensar que es JavaScript.

Happy Coding!

Descubre cómo desde SOGETI te ayudamos al desarrollo de proyectos IT adaptados a tus necesidades.