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.

angular

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.

angularjs2

Modificar visibilidad de un elemento de un formulario:

visibilidad-de-un-elemento-de-un-formulario2

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:

recoger-valores-de-un-formulario

recoger-valores-de-un-formulario2

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.

fco-javier-gonzalez-blog

Javier González

.NET  Senior Developer  and  Technical Leader | Soluciones Microsoft | SOGETI ESPAÑA

Autor: ITblogsogeti

Sogeti es una compañía tecnológica perteneciente al Grupo Capgemini y especialista en: Testing y Calidad de Software; Soluciones Microsoft y High Tech Consulting. En Sogeti entendemos la importancia de obtener el máximo valor empresarial de sus sistemas de IT, por ello somos líderes mundiales en Testing & QA.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s