Guía para principiantes para crear aplicaciones web con AngularJS

página de inicio de angularjs

Sube a bordo con el marco de aplicaciones web de Google

Si es un desarrollador de JavaScript profesional, probablemente haya oído hablar Ember.js (un marco JavaScript de código abierto) y Backbone.js (una biblioteca de JavaScript con una interfaz JSON RESTful). Pero si no está familiarizado con AngularJS sin embargo, se perderá algunas de sus características muy atractivas que realmente pueden mejorar su HTML para aplicaciones web.

Aquí le daremos una muestra de AngularJS, un marco MVW de JavaScript súper heroico, que incluye sus características destacadas y el proceso para comenzar con él.



Con suerte, esto no solo lo ayudará a desarrollar aplicaciones web ricas con buena arquitectura y mantenimiento, sino que también le dará algunas razones sólidas para elegir AngularJS para sus próximos proyectos. ¡Vamos a empezar!

cómo estar en la portada de una revista

01. ¿Qué es AngularJS?

AngularJS, creado por Google, es un marco de aplicación web de código abierto que está diseñado para facilitar el desarrollo y las pruebas de front-end para los desarrolladores web. El objetivo principal de AngularJS es alargar las aplicaciones web con la capacidad MVC (Modelo-vista-controlador). Es un marco de JavaScript MVC / MVVM del lado del cliente que es completamente extensible, se ejecuta sin dependencias de biblioteca y también funciona muy bien con otras bibliotecas. Incluso, también puede modificar o reemplazar todas sus funciones para satisfacer sus necesidades específicas.

AngularJS fue desarrollado en 2009 por Adam Abrons y Mi & scaron; ko Heverym, que eran ingenieros de Google en ese momento. Como se menciona en el sitio web oficial, es un 'marco estructural para aplicaciones web dinámicas' que se adapta mejor a la creación de aplicaciones web de una página que solo requieren JavaScript, CSS y HTML en el lado del cliente.

Le permite utilizar HTML como su lenguaje de plantilla y le permite expandir la sintaxis de HTML para expresar los componentes de su aplicación web de forma clara y concisa. AngularJS le ayuda a estructurar mejor su código JavaScript y facilita la prueba, enseñándole al navegador cómo hacer uso de la inyección de dependencias para cualquier tecnología de servidor.

Cómo usar AngularJS

Comenzar con AngularJS es bastante fácil. Puede tener una aplicación Angular simple en solo cinco minutos colocando algunos atributos en sus scripts HTML. Estos son:

1. Incluya la directiva 'ng-app' en la etiqueta. Hará que AngularJS se ejecute en la página, definiendo la página como una aplicación Angular.

|_+_|

2. Coloque la etiqueta Angular en la parte inferior de su página, donde termina la etiqueta.

|_+_|

3. Agregue HTML normal. Los atributos HTML se utilizan para acceder a las directivas AngularJS, mientras que la evaluación de expresiones se realiza con notación de doble corchete.

cómo un diseño web se va directo al infierno
|_+_|

Aquí, la directiva ng-controller define un espacio de nombres, donde puede colocar su Angular JS para controlar los datos y evaluar las expresiones en su HTML. Mientras que la directiva ng-repeat es un objeto repetidor angular, que le pide a Angular que cree elementos de lista siempre que tenga tareas para mostrar.

Si bien la mayoría de los marcos de hoy son solo un paquete de herramientas existentes, AngularJS es un marco de próxima generación, que tiene algunas características muy atractivas que son útiles no solo para los desarrolladores, sino también igualmente útiles para los diseñadores. A continuación se presentan algunas características increíbles de AngularJS, que ayudarán a los desarrolladores a hacer que sus futuras aplicaciones web sean increíbles ...

Directivas

Las directivas son una de las características más poderosas y atractivas de AngularJS. Le permiten extender su HTML y AngularJS los usa para conectar su acción a la página. Le permiten especificar etiquetas HTML personalizadas y reutilizables, que pueden usarse para manipular atributos DOM y moderar el comportamiento de elementos específicos. Todas las Directivas están precedidas por ng-, diseñadas para ser elementos independientes separados de su aplicación MVC y colocados en atributos HTML.

Algunas de las directivas AngularJS notables son:

  • ng-app: esta directiva le dice a Angular dónde obtener la activación. Para definir una página como una aplicación Angular, necesita usar un código simple:.
  • ng-bind: esta directiva le dice a Angular que cambie el contenido de texto de un elemento HTML con el valor de la expresión dada, y que actualice el texto a medida que el valor de esa expresión cambie.
  • ng-model: es muy similar a ng-bind, pero vincula la vista al modelo, lo que requieren otras directivas como select, textarea o input.
  • ng-class: permite la carga dinámica de atributos de clase.
  • ng-controller: esta directiva le permite especificar una clase de controlador JavaScript para evaluar expresiones HTML.
  • ng-repeat: recorre sin esfuerzo un elemento, en el que se establece la variable de bucle dada, en una colección.
  • ng-hide y ng-show: utilizando el valor de una expresión booleana, esta directiva decide si el elemento se mostrará o no.
  • ngIf: Es una directiva de instrucción if básica que permite volver a insertar un clon del elemento compilado en el DOM, si las condiciones son verdaderas. Si la condición es falsa, elimina el elemento del DOM.

A continuación se muestra un ejemplo de una directiva que escucha un evento y, en consecuencia, actualiza su $ scope.

|_+_|

Esta directiva personalizada se puede utilizar de la siguiente manera:

|_+_|

Enlace de datos bidireccional

El enlace de datos es probablemente la característica más dominante y notable de AngularJS. Evita que los desarrolladores escriban una cantidad considerable de código al reducir gran parte de la carga en el backend del servidor. En una aplicación web típica, el 80% del código base está dedicado a manipular, atravesar y escuchar el DOM. El enlace de datos hace que este código sea invisible, por lo que puede concentrarse en otras cosas importantes de su aplicación.

Tradicionalmente, la mayoría de los sistemas de plantillas tienen enlace de datos unidireccional: fusionan el modelo y los componentes de la plantilla en una vista. Después de la fusión, los cambios en el modelo no se reflejan automáticamente en la vista. Para reflejar estos cambios, el desarrollador debe manipular manualmente los elementos y atributos DOM. Este proceso se vuelve más complicado y engorroso cuando un usuario realiza cambios en la vista. Porque el desarrollador necesita interpretar las interacciones, fusionarlas en el modelo y actualizar la vista.

Diagrama de enlace de datos unidireccional

Imagen cortesía de http://docs.angularjs.org

Por el contrario, AngularJS realiza el enlace de datos de una manera mejor y diferente al manejar la sincronización de datos entre el modelo y el DOM, y viceversa.

Diagrama de enlace de datos bidireccional

Imagen cortesía de http://docs.angularjs.org

A continuación se muestra un ejemplo sencillo que explica la vinculación de un valor de entrada a un

etiqueta.

cómo hacer perspectiva en ilustrador
|_+_|

Inyección de dependencia

AngularJS tiene un subsistema de inyector incorporado que facilita a los desarrolladores desarrollar, comprender y probar aplicaciones. La inyección de dependencias en AngularJS es responsable de crear componentes, tratar cómo se apoderan de sus dependencias y ponerlos a disposición de otros componentes cuando se soliciten.

Al hacer uso de la inyección de dependencias, AngularJS lleva los servicios tradicionales del lado del servidor a las aplicaciones web del lado del cliente, lo que reduce la carga en el backend y hace que la aplicación web sea mucho más liviana.

Si desea obtener acceso a los servicios principales de AngularJS, debe agregar un servicio en particular como parámetro. AngularJS notará automáticamente que desea utilizar ese servicio y pondrá una instancia a su disposición.



|_+_|

Además de esto, puede definir sus propios servicios personalizados y hacerlos accesibles para inyección.

|_+_|

Plantillas

En AngularJS, una plantilla está escrita con HTML que contiene atributos y elementos específicos de Angular. Al combinar la plantilla con información del controlador y el modelo, AngularJS renderiza la vista dinámica en los navegadores.

A continuación se muestran los elementos y atributos angulares que se pueden utilizar:

  • Filtro: este elemento realiza el formateo de los datos para su visualización.
  • Controles de formulario: se utiliza para la validación de la entrada del usuario.
  • Marcado: para vincular expresiones a elementos, utilizando la notación de doble llave {{}}.
  • Directiva: un elemento o atributo que genera un componente DOM reutilizable o alarga un elemento DOM existente.

El código que se proporciona a continuación muestra una plantilla con directivas y marcado:

cómo dibujar líneas suaves en papel
|_+_|

En una aplicación típica, la plantilla tiene directivas CSS, HTML y Angular en un solo archivo HTML (generalmente index.html).

Pruebas

Como JavaScript es dinámico y se interpreta con gran poder de expresión, casi no necesita ayuda del compilador. Por lo tanto, el equipo de AngularJS entiende bien que cualquier código JavaScript debe pasar por un conjunto de pruebas severas. Así que han diseñado AngularJS desde cero para que sea comprobable, lo que hace que las pruebas de sus aplicaciones web sean lo más fáciles posible.

AngularJS aprovecha al máximo la inyección de dependencia, viene preempaquetado con simulacros y fomenta la separación de vistas de comportamiento. Para las pruebas de extremo a extremo, AngularJS tiene un ejecutor de prueba de extremo a extremo, llamado Transportador, que comprende el funcionamiento interno de AngularJS para eliminar la escasez de prueba y simula las interacciones del usuario con su aplicación.

Otro tipo de prueba en AngularJS es la prueba unitaria a través de la cual puede probar unidades individuales de código. Además, el equipo de Angular también creó una extensión de Chrome, llamada AngularJS Batarang , que permite a los desarrolladores detectar fácilmente los cuellos de botella en el rendimiento y les permite depurar sus aplicaciones en el navegador.

Ajeet Yadav es un desarrollador web profesional, asociado con wordpressintegration.com , una empresa de desarrollo web de renombre que ofrece un servicio de conversión de temas / plantillas de Photoshop a WordPress de alta calidad. Seguir @Wordpress_INT en Twitter.