Quiero aprender AngularJS

AngularJS (comúnmente conocidos como Angular) es un framework de desarrollo front-end excepcionalmente poderoso para la construcción de aplicaciones sofisticadas en JavaScript. Aunque el aprender AngularJS es muy gratificante, estoy seguro que muchos ven frustrados sus intentos al encontrarse con la complicada documentación de AngularJS.

Aprender AngularJS

Esto es una lástima, porque Angular tiene mucho que ofrecer:

• La modularidad permite que un equipo de desarrolladores pueda trabajar en partes específicas de una aplicación al mismo tiempo.
• La capacidad de prueba y mantenimiento de varias piezas de la aplicación.
• Una comunidad gigantesca de desarrolladores y organizaciones, que aman Angular.
• La posibilidad de separar la interfaz de usuario de la lógica de la aplicación.
• Dos vías de enlace de datos que actualiza la interfaz de usuario cada vez que un modelo cambia (y viceversa).
• Una gran cantidad de módulos listos tales como filtros y servicios que pueden realizar tareas de procesamiento de datos, plantillas de interfaces de usuario, manejo de peticiones HTTP, validación, animación, y (mucho, mucho) más.

Y esto es sólo la punta del iceberg!

Si decides aprender AngularJS, obtendrás los conocimientos necesarios para desarrollar aplicaciones multiplataforma que serán muy valiosos y rentables en los próximos años.

Lo que sigue es una guía (lo llamo una hoja de ruta) diseñada para ayudarte a aprender AngularJS de manera efectiva. Mi objetivo con esta hoja de ruta es trazar un plan de estudios cuidadosamente elaborado para introducirte en el mundo de la Angular.

Requisito para aprender AngularJS: JavaScript

Para poder aprender AngularJS es necesario que conozcas JavaScript de antemano.

No recomiendo aprender AngularJS sin al menos un conocimiento básico de JavaScript. La tarea será, por decir lo menos, 100 veces más difícil si no sabes JavaScript.

Otros frameworks de desarrollo web son un poco más tolerante hacia las personas que no tienen una comprensión sólida de JavaScript. Por ejemplo, jQuery esconde algunos de los conceptos más complicados de JavaScript de los usuarios. Ahora bien, esto no es algo malo, es realmente excelente para muchos desarrolladores y ciertos tipos de proyectos de desarrollo.

(Para subrayar aún más mi argumento anterior, jQuery fue construida usando el patrón de diseño de software Facade, definido por el reconocido desarrollador de JavaScript e ingeniero de Google Addy Osmani en su libro como un patrón de diseño que «proporciona una interfaz de alto nivel conveniente a un grupo mayor de código , ocultando su verdadera complejidad subyacente. «)

Angular, por el contrario, expone la fuerza de Javascript – pero a menudo difíciles de entender -. Angular no se asusta de las complejidades de JavaScript sino que las aprovecha y las empuja a sus límites.

Sin más, lo que sigue es mi hoja de ruta hacia el aprendizaje Angular.

Plan de trabajo para aprender AngularJS

A continuación he creado un proceso de cinco pasos para aprender AngularJS utilizando recursos gratuitos y en línea.

Paso 1: Introducción

Objetivo: Obtener una introducción práctica al mundo de Angular.

Siempre que trato de aprender algo, mi objetivo inicial es conseguir una vista rápida de lo que estoy tratando de aprender, y para obtener experiencias prácticas con él lo más rápido posible. Quiero evitar en la medida de lo posible tener que lidiar con instalaciones y configuración.

Shaping Up With AngularJS (título original del curso) – es un curso gratuito de Code School patrocinado por Google, el desarrollador y mantenedor de Angular.

Este curso en línea es una introducción bien estructurada y eficiente a Angular. En este curso vas a construir una aplicación sencilla utilizando Angular. Hay desafíos de codificación intercalados en el curso para ayudarte a revisar los conceptos clave que se discuten. A medida que desarrollas la aplicación, aprenderás acerca de algunas de las características avanzadas de Angular, como las Directivas, doble vía de enlace de datos, servicios, etcétera.

Paso 2: Fundamentos angular por ScriptyBooks

Objetivo: Conocer los principales conceptos de Angular y características.

La documentación oficial de AngularJS (de la que hablaremos más adelante) es extremadamente detallada y exhaustiva. Para mí, el problema con la documentación oficial es que es increíblemente seca e intimidante.

Entiendo la necesidad del equipo de Angular de ser detallado y exhaustivos en la documentación de su proyecto. Al ser integral y técnica, eluden los problemas de ambigüedad y permiten a sus usuarios encontrar toda la información que necesitan.

Pero para la mayoría de la gente será más sencillo para aprender AngularJS si se comienza con guías de terceros. Hay varios recursos de aprendizaje que son más accesibles para los recién llegados.

Existe un libro gratuito online llamado Angular Basics que se ajusta perfectamente a este tipo de recursos.

En Angular Basics, aprenderás acerca de los conceptos vitales Angular: Controladores, directivas, Servicios, el Scope, la inyección de dependencias, y así sucesivamente. Este libro es interactivo – a medida que vayas leyendo el libro, te pedirá que interactúes con los ejemplos de código – lo que hace que sea una lectura divertida e interesante.

Los tres pasos siguientes se ocuparán de integridad y mejores prácticas en Angular.

Paso 3: AngularJS PhoneCat Tutorial App

Objetivo: Para aprender cómo construir aplicaciones al estilo AngularJS

Después de ver los dos primeros pasos para aprender AngularJS, ya estarás bien encaminado hacia el desarrollo de aplicaciones en Angular.

Nada es mejor que la documentación oficial de Angular en términos de integridad. En mi opinión, simplemente no puedes aprender Angular adecuadamente sin tener que gastar algún tiempo en los documentos oficiales.

En el Tutorial Aplicación PhoneCat, crearás una aplicación para manejar el directorio de teléfonos inteligentes. Aprenderás los conceptos Angular de nivel intermedio/avanzado como pueden ser las pruebas unitarias, pruebas E2E, la forma de organizar los archivos y directorios de aplicaciones, plantillas, las mejores prácticas para la modularización del código de la aplicación, y más.

Tómate tu tiempo con este tutorial. Resiste la tentación de brincarte esta parte cuando consigas obstáculos. Si perseveras a través de este tutorial, te garantizo que lograrás una verdadera comprensión de Angular.

El escritor del tutorial PhoneCat dice que «puedes ir a través de todo el tutorial en un par de horas o puede que quiera pasar un día agradable indagando en el mismo.» Para mí, me tomó casi una semana llegar hasta el final, dedicando dos horas al día a su estudio.

Paso 4: AngularJS Guía del Desarrollador

Objetivo: Para obtener una comprensión profunda de los conceptos fundamentales, las características y las terminologías de Angular.

En este punto, ahora deberías estar bien preparado con el conocimiento de Angular. Ahora es el momento de profundizar en los detalles. La Guía Oficial de Desarrollo en AngularJS es tu próxima parada.

En la Guía Oficial de Desarrollo en AngularJS podrás encontrar muchas características y capacidades de Angular con infinidad de detalles. Muchos recién llegados AngularJS probablemente comenzaron con esta guía (o el PhoneCat tutorial) y puede ser que los han disuadido de seguir aprendiendo Angular debido a la actitud de enormes proporciones de la guía. Pero después de los pasos anteriores, ahora deberías tener más confianza para abordar esta guía.

En esta guía, aprenderás todas las cosas que necesitas saber acerca Angular. La guía cubre cosas como proveedores, decoradores, interpolación, seguridad, accesibilidad, corriendo Angular en producción, etc.

Mi consejo con esta guía es el mismo que te di para el tutorial PhoneCat: Tome las cosas con calma. Resiste la tentación de saltar secciones.

Paso 5: Guía de estilo Angular por John Papa

Objetivo: Para conocer las mejores prácticas Angular tales como la forma de escribir, organizar y estructurar tu código para que sea más fácil de mantener y testear.

Podemos aprender mucho leyendo codificación guías de estilo , incluso si no las usamos en nuestros proyectos. Una guía de estilo es una documentación de directrices y mejores prácticas para la producción de código legible y de alta calidad.

Hay varios guías de estilo Angular por ahí, pero ésta es de destacar porque está respaldada por el equipo Angular.

Esta guía de estilo Angular fue revisada por Igor Minar, el líder del equipo principal del Angular y un ingeniero de software de Google.

La Guía de Estilo Angular explica una extensa gama de mejores prácticas para Angular (y JavaScript) tales como:

• Responsabilidad única de tus componentes.
• Usando IIFEs.
• Cómo escribir tus directivas, controladores, módulos, servicios, etc. de una manera legible, comprobable, y mantenible.
• Convenciones de nombres sugeridos.
• Cómo comentar tu código.
• Ajustes para JS Hint (un popular comprobador de calidad de código) para trabajar eficazmente con Angular.

Después de leer esta guía de estilo, sugiero elegir una de las siguientes cuatro líneas de acción:

1. Aplicar esta guía de estilo como está en tus proyectos Angular.
2. Retocarlo (es decir, descargala y luego modificarla) para que se alinee con tu estilo personal y filosofías.
3. Buscar una guía de estilo alternativo, como angular Styleguide 1.x por el desarrollador de Google, Todd Motto.
4. Crea tu propia guía de estilo Angular.

En cualquier caso, antes de trabajar en tu gran aplicación Angular, es importante contar con un conjunto de mejores prácticas que te ayuden en el camino hacia la realización del proyecto y promover la alta calidad del códigos. De lo contrario, tus aplicaciones Angular quedarán rápidamente muy desordenadas y difíciles de mantener.

Si has logrado completar la hoja de ruta, felicitaciones ya que estás ahora equipado con el conocimiento necesario para construir aplicaciones en Angular!

En las siguientes secciones, voy a hablar de algunas de las estrategias generales de aprendizaje y más recursos para el aprendizaje de Angular.

Estrategias de aprendizaje eficaces

• Tómete tu tiempo. Algunos de los recursos anteriores te dirán una estimación de cuánto tiempo te tomará para completarlos. No te sientas presionado por estas estimaciones. Tómete todo el tiempo que necesite, porque todos tenemos diferentes formas de aprendizaje. En mi experiencia, casi siempre me tomó el doble del tiempo para acabar con ellos en comparación con los tiempos de finalización sugeridos.
• Aparte tiempo para el aprendizaje libre de distracciones. Para dominar algo requieres práctica deliberada . La práctica deliberada es un método de aprendizaje conceptualizado por el psicólogo K. Anders Ericsson durante su investigación sobre los atletas de élite. Los resultados de los estudios de Ericsson en la práctica deliberada sugieren que el máximo rendimiento durante una sesión de aprendizaje / formación sólo puede ser sostenida durante 1 hora. 

Por encima y más allá: Más recursos para aprender AngularJS

Aquí hay otros recursos angular excelentes. Ellos demuestran ser útiles a lo largo de su viaje hacia la iluminación angular.

• Lecciones 1.x de Angular por egghead.io
  Aprende sobre temas específicos de Angular como el uso de Gulp con Angular, y el modelado de datos con Angular a través de cursos en vídeo.
• Thinkster AngularJS tutoriales y cursos
  Aprender AngularJS y los temas relacionados al mismo, como puede ser integrar tus proyectos Angular con Rails.
• Hecho con Angular
  Revisa ejemplos reales de aplicaciones Angular creados por grandes empresas y organizaciones como Amazon, PayPal, y Apple.
• AngularJS Referencia API
  Encuentra información detallada y definitiva en las características específicas Angular a través de la documentación oficial de la API.
• Documentación DevDocs angularjs
  Se trata de una interfaz de usuario de terceros alternativa para la documentación de la API oficial de Angular.
• ng-newsletter
  Suscríbete a este boletín para ser notificado sobre contenido importante de Angular.
• AngularJS-Learning
  Encuentra una enorme cantidad de tutoriales Angular, libros, vídeos, artículos y otros recursos en este repo GitHub creado y mantenido por Jeff Cunningham.

 

¿Conoces otros tutoriales o guías que puedan ayudar a aprender AngularJS? Por favor coméntalos más abajo.

Contenido relacionado

Cómo hacer una barra de progreso usando jQuery

jQuery – Comprueba si un elemento tiene un Class específico

Aprender a programar gratis