AngularJS: Conviértete en el profesional que las compañías de software necesitan.

Por Paiminix

La constante evolución en la industria de las tecnologías de la información, demanda cada día más profesionales en el mundo del desarrollo web que conozcan el poderoso framework de AngularJS, este libro te lleva de la mano en la adopción de esta gran tecnología abarcando las mejores prácticas, tips y trucos sobre el framework de JavaScript, conocerás diferentes tipos sintaxis que en su momento han sido funcionales y que te puedes llegar a topar en desarrollos heredados, mostrándote la evolución sobre las mejores prácticas de la sintaxis, que te permitirá desarrollar aplicaciones de alta calidad.

El framework de JavaScript AngularJS creado por el equipo de Google, ha tenido una constante evolución a lo largo de estos años, este libro está enfocado a personas que dan sus primeros pasos con el framework, así como desarrolladores que ya han tenido contacto con Angular y quieren incrementar su conocimiento para llevarlo al siguiente nivel.

No te quedes atrás, forma parte de esta gran comunidad.

La tabla de contenidos no se muestra completa, ya que esta descripción está limitada.
0.AngularJS mis primeros pasos
0.1 Introducción
0.2 ¿Qué es Angular?
0.3 ¿Es AngularJS o Angular?
0.7 Arquitectura
1. Configuración del entorno de desarrollo
1.1 Dependencia de AngularJS
1.2 Manera local y CDN
1.4 NodeJS
1.5 Manejador de paquetes
1.6 A. npm
1.7 A. Bower
1.8 Editores o IDEs
1.9 Instalación de un servidor de desarrollo
1.10 Estructura para proyectos escalables
2.Iniciando con AngularJS
2.1 Primera aplicación..
2.2 AngularJS script Tag
2.3 Uso de ng-app
2.4 Consideraciones al usar ngApp
2.5 Inicialización manual
3 Descubriendo las directivas
3.1 ¿Qué son las directivas?
4. La magia de las directivas
4.1 Inicializando valores..
4.2 Controlando la lógica..
4.2.1 Sintaxis “Controller As”
4.2.2 C. Paralelos
4.2.3 C. Anidados
4.2.4 ¿Scope o this?
4.2.5 Nota
4.3 Orden a nuestra estructura
4.4 Modelo mediante ng-model
4.5 Estrategias y h. de minificación
4.5.1 Inyección de dependencias mediante array
4.5.2 Inyección manual..
4.5.3 El uso estricto de inyección..
4.5.4 H. para minificar y ofuscar código
4.6 Mostrar y ocultar DOM
4.6.1 U. ngShow
4.6.2 U. ngHide
4.7 M. del DOM mediante ngIf
4.8 Estilos dinámicos
4.8.1 Clases dinámicas a elementos HTML
4.8.2 U. ngClass String
4.8.3 U. ngClass Objeto
4.8.4 U. ngClass Array
4.8.5 Estilos de línea dinámicos
4.9 Ocultando el estado crudo de AngularJS
4.9.1 U. ngBind
4.9.2 U. ngBindHtml
4.9.3 U. ngBindTemplate
4.10 NgSwitch
4.11 D. elementos DOM
4.12 Directiva ngRepeat..
4.12.1 Iteración mediante propiedades del objeto
4.12.2 Propiedades especiales de ngRepeat
4.12.2.1 P. $index
4.12.2.2 P. $first $middle $last
4.12.2.3 P. $even $odd
4.13 Directiva ngOptions..
4.14 Reutilización de HTML
5. Expresión e Interpolación
5.1 Expresiones
5.2 Expresiones AngularJS vs JS Exp.
5.3 Interpolación y enlace de datos
6. Data Binding
6.1 Enlace de datos bidireccional
6.2 One-Way Data B.
7. Filtros
7.1 F. incorporados
7.1.1 F. currency
7.1.2 F. number
7.1.3 F. date
7.1.4 F. json
7.1.5 F. lowercase
7.1.6 F. uppercase
7.1.7 F. filter
7.1.8 F. orderBy
7.1.9 F. limitTo
7.2 F. encadenados
7.3 F. personalizados
7.4 F. como servicios
8. Validación de Formularios
8.1 Directivas..
8.2 Propiedades y Clases
8.3 Validando nuestro primer form.
8.3.8 El objeto $error
8.3.9 Módulo ngMessages
8.3.10 Dir. ngMessagesInclude
9. Servicios
9.1 Creación de s.
9.2 S. value y S. constant
9.3 S. factory
9.4 S. service
9.5 S. provider
10. Servicios incorporados
10.1 S. $http
10.2 S. $window
10.3 S. $timeout
10.4 S. $interval
10.5 S

• Idioma: Español
• Editorial: Paiminix
• Fecha de lanzamiento: 15 sept 2018
• ISBN: 9780463673300

Vista previa del libro

Prefacio

Este libro está diseñado para mostrarte paso a paso el uso de la tecnología de AngularJS, no sólo veremos su sintaxis, sino también el uso del framework en el mundo real.

Este libro contiene muchos temas y cada uno de ellos viene con al menos un ejemplo  que profundiza su funcionamiento, se divide por su puesto en temas de fácil acceso y en su mayoría viendo ejemplos desde distintos enfoques para su mejor entendimiento. 

Pre-requisitos

Para sacar el máximo partido de este libro, es recomendable que tengas experiencia en las siguientes tecnologías:

JavaScript

HTML

CSS

Aunque créeme he tratado de hacer el máximo esfuerzo por explicarte pasó a paso el uso de AngularJS, que estoy seguro que si tienes poca o mucha experiencia en estas tecnologías te divertirás aún más. Aunque AngularJS soporta la mayoría de los navegadores los ejemplos mostrados en este libro se realizaron usando Chrome.

Otros recursos

La documentación oficial es la primera fuente sobre la que está escrita este libro y los dolores de cabeza que me tocaron vivir al cambiar radicalmente de tecnología en la parte de la vista, te comparto la fuente de sabiduría.

https://docs.angularjs.org/guide

Adicional hay mucha documentación al respecto en Internet, pero espero que no tengas que acudir a ella y que este libro te brinde todo lo que necesitas para que puedas aplicarlo en tus desarrollos empresariales.

Convenciones

En este libro encontraras palabras resaltadas con la intención de llamar tu atención generalmente en formato negrita, un fragmento de código luce así:

var app = angular.module('MyApp', []);

app.run(function() {

    console.log(Estamos listos!);

});

Para indicarte que este fragmento de código se encuentra dentro de un determinado archivo app.js se mostrará así:

app.js

var app = angular.module('myApp', []);

app.run(function() {

    console.log(Estamos listos!);

});

La ejecución de comandos luce así:

npm install angular

En cuanto a los consejos y mejores prácticas de la industria que te compartiré se mostrara la palabra TIP en negritas.

Errata y Retroalimentación

Quiero decirte que escribir un libro es un proceso largo y difícil, sobre todo cuando tienes muchas responsabilidades, pero también tiene su lado bueno ya que se aprende mucho en el camino, he tratado de crear un libro con el máximo de los cuidados, lo que encontraras se apega en su mayoría a la documentación oficial de AngularJS y basado en la experiencia que me ha tocado vivir en proyectos relacionados a estas tecnologías. Sin embargo la evolución de la tecnología se presta para adoptar mejores prácticas constantemente y es posible que algo que este escrito en este libro haya cambiado en el futuro o  es posible que identifiques un error que no se detectó durante la realización de este libro, te puedo decir que aun así este libro te ahorrara muchos dolores de cabeza que ya me tocó vivir a mí y a mi equipo de desarrollo. 

El contenido del libro se ofrece sin ninguna garantía, ya sea expresa o implícita, ni el autor o distribuidores serán responsables de cualquier daño causado directa o indirectamente por el contenido de este libro.

Cualquier error, mejora, algo que te gusto, no te gusto  o algo que te gustaría ver en próximas ediciones, puedes informarlo al siguiente correo, se aceptan críticas no importa que tan duro seas, puedes ayudarme a mejorarlo, coloca el asunto del correo AngularJS y mánda tus sugerencias a [e-mail], gracias de ante mano.

AngularJS mis primeros pasos

Introducción

Bienvenido al mundo de AngularJS. Este libro se ha diseñado para que sea lo más comprensible y accesible posible para aquellos que inician con esta tecnología. En él se comparten experiencias del mundo real que se viven día a día y se detalla pasó a paso como usar los componentes de AngularJS para solventar los requerimientos tanto empresariales como de otra índole. AngularJS es una tecnología muy joven por lo cual quiero felicitarte al adquirir este libro, hay miles de desarrolladores en todo el mundo que han adoptado está tecnología para sus proyectos, he visto también como empresas han estado adoptando está tecnología y dejando atrás otras tecnologías que les habían funcionado por años, lo cual lo hace atractivo y muy lucrativo, más allá de eso AngularJS inspira y motiva su aprendizaje. Espero que también sientas esa motivación y formes parte de esta gran comunidad que está creciendo constantemente, cada nueva versión añade cosas increíbles que te facilitarán la vida y te permitirán incrementar tu productividad.

¿Qué es Angular?

AngularJS es un potente framework de JavaScript creado para el desarrollo de aplicaciones web dinámicas. Nos permite extender la sintaxis de HTML por medio de atributos propios del framework, para expresar componentes de nuestra aplicación de manera dinámica.

AngularJS fue originalmente desarrollado por Miško Hevery en el 2009, a la fecha es mantenido por equipo de desarrolladores de Google donde Miško Hevery también forma parte. Adam Abrons le dio el nombre de Angular inspirado en los paréntesis angulares <> de HTML. 

¿Es AngularJS o Angular?

AngularJS también se le conocía como Angular, esto es pasado por supuesto y esto era antes de que el equipo de Google lanzara la versión de Angular 2. 

Con la llegada de Angular 2 hubo una reescritura del framework y la forma de nombrar a los frameworks cambio, ahora se empezó adoptar el termino de versiones semánticas (sem-ver), suponiendo que tenemos la versión 2.9.1

El 2 es un Major.

El 9 es un Minor.

El 1 es un Patch.

Major (Breaking Change), se refiere a un cambio muy agresivo que rompe con la funcionalidad que se tenía, en este caso el cambio de Angular 1 al 2 fue el caso.

Minor (New features, not breaking), agrega nuevas características sin romper funcionalidad. 

Patch (Bugfixes, not breaking), si existe un bug que se va arreglar. 

El equipo de Google comenta que no va haber cambios fuertes como fue el cambio de Angular 1 a Angular 2  y que a partir de las versiones superiores a Angular 2 se va tener retro compatibilidad, algo muy difícil de sostener a lo largo de los años, por otra parte para diferenciar los frameworks nos dice lo siguiente.

El nombre que se le va dar al framework se basa en las siguientes condiciones:

AngularJS === 1.x

Angular >= 2.x.x

Por lo cual el libro que estás leyendo en estos momentos, el nombre correcto será AngularJS ya que estamos usando la versión de AngularJS 1.x.

Si bien es cierto que actualmente contamos con Angular 2 y en realidad a la fecha de publicación de este libro va en la versión 5, es decir, Angular 5, por experiencia te comento que hay miles de aplicaciones desarrolladas en AngularJS a las cuales se les tiene que dar un mantenimiento, muchas empresas siguen reclutando personas con conocimientos en AngularJS, por lo cual saber de esta tecnología te puede brindar un beneficio enorme al prestar tus servicios de consultoría a empresas, así que, sigue así vas por buen camino.

El Zen de Angular

AngularJS está construido alrededor de la creencia de que la programación declarativa es mejor que la programación imperativa cuando se trata de construir interfaces de usuario y enlazar componentes de software, mientras que la programación imperativa es excelente para expresar la lógica de negocio.

Es muy buena idea separar la manipulación del DOM de la lógica de la aplicación. Esto mejora drásticamente la capacidad de prueba de código.

Es muy, muy buena idea considerar las pruebas de la aplicación como iguales en importancia que la escritura del código de la aplicación. La dificultad de las pruebas se reduce drásticamente por la forma en que el código está estructurado.

Es una excelente idea desacoplar el lado del cliente de una aplicación del lado del servidor. Esto permite que el trabajo de desarrollo avance  en paralelo y permite la reutilización de los dos lados.

Es muy útil el hecho de guiar a los desarrolladores a través de todo el proceso de construcción de la aplicación: desde su diseño de la interfaz de usuario, a través de la escritura de la lógica de negocio, hasta las pruebas.

Siempre es bueno hacer las tareas comunes triviales y las tareas difíciles posibles.

¿Por qué usar AngularJS?

AngularJS by Google

AngularJS es un framework que está respaldado por Google, muchos arquitectos y líderes de proyectos de todo el mundo lo han adoptado para crear aplicaciones web de todo tipo, entre ellas las empresariales, a pesar de ser un framework relativamente joven ha sido adoptado rápidamente por una gran y creciente comunidad de desarrolladores.

Angular Open-Source Project

Angular es un proyecto OpenSource, podemos conocer su código fuente e inclusive contribuir a sus mejoras.

Arquitectura SOA y SPA

AngularJS es ideal para aplicaciones empresariales con arquitecturas orientadas a servicios, lo que se conoce en inglés como SOA (Service Oriented Architecture) y aplicaciones conocidas como de una sola página SPA (Single Page Application).

Demanda Laboral

La demanda de desarrolladores web con AngularJS ha crecido exponencialmente en los últimos años, lo cual significa que la industria de tecnologías de la información requiere de expertos en AngularJS, el que este soportado por Google significa que es un framework que estará en constante evolución, es por eso que la industria de TI demanda perfiles capacitados para usar esta tecnología.

Reusable, Fácil de Mantener y Modular (MVC)

Estos tres aspectos reusable, fácil de mantener y modular nos permite a los desarrolladores ser más productivos, podemos crear nuestros propios componentes para ser usados en nuestros proyectos web con AngularJS y a su vez el hecho de que sea modular nos permite entender mejor las aplicaciones existentes y darle mantenimiento o hacer un Upgrade de versión que tenga mucho más mejoras que podemos aprovechar.

Hay muchas cosas positivas que podemos decir de AngularJS, sin embargo la reducción de tiempo en nuestros desarrollos a través de componentes reutilizables nos permite ser más rápidos, en un mundo donde las metodologías agiles predominan, el tiempo de respuesta, calidad y muchos otros factores  son cruciales.

Popular

Podemos encontrar bastantes cursos en línea, tutoriales, y una gran comunidad dispuesta ayudar en las dudas que podamos tener, entre otros materiales que nos ayudaran a desarrollar nuestras habilidades sobre este framework.

Integración con otros frameworks 

AngularJS se puede integrar con otros frameworks, bibliotecas, plugins y trabajar en conjunto. He visto en aplicaciones la integración con AngularJS y jQuery sin embargo Angular tiene incorporada una versión lite de jQuery, llamado jqLite. 

Hay muchas razones por la cual aprender AngularJS, te convertirá en un mejor Front-End, el hecho de que estés leyendo este libro habla de tu compromiso con la industria de TI,  y sobre todo el compromiso de ser mejor cada día en lo que hacemos, aplaudo el hecho de que estés aquí y que te integres a esta gran comunidad que aporta valor.  

¿Debo aprender AngularJS o Angular?

Esta sin duda es de las preguntas más difíciles que pudiera responder, la respuesta está basada netamente en mi experiencia con el framework y lo que he visto de la industria hasta el momento, es posible que en unos años mi respuesta ya no sea válida, no es una regla, ni algo a seguir, estoy seguro que tienes un amplio criterio para tomar la mejor decisión de que opción elegir, otras veces tal vez no tengas opción.

Actualmente hay miles o tal vez inclusive millones de aplicaciones desarrolladas sobre AngularJS 1.x en todo el mundo, lo cual el dar mantenimiento o hacer un upgrade de versiones a esas aplicaciones implica de su conocimiento y es algo de lo que puedes sacar provecho si inviertes tiempo en aprender AngularJS 1.x.

En mi caso no tuve opción ya que iniciamos algunos proyectos con AngularJS 1.2 y no existía Angular 2, te quiero decir que aun así actualmente he dado mantenimiento a proyectos con versiones más actuales de AngularJS 1.x, en su momento Angular 2 estaba en su versión beta, por lo cual los arquitectos de proyecto difícilmente se pueden arriesgar a tomar una decisión de incorporar en los nuevos proyectos una versión beta, aun cuando el equipo de desarrollo tenga la actitud de querer migrar hacía Angular 2, otra cosa es que Angular 2  ahora está muy ligado a TypeScript lo cual implica una curva de aprendizaje, muchas veces por la premura de los tiempos de desarrollo a veces no se da la adopción tan temprana como se quisiera, te puedo decir que aprender AngularJS 1.x, nos ha dado muy buenas bases para migrar hacia Angular 2 y como te comento el hecho de que existan aplicaciones sobre AngularJS 1.x es algo de lo que puedes sacar provecho al ofrecer tus servicios de consultoría.

Muchas veces depende de las circunstancias, tal vez llegues a un equipo donde usan Angular 2, tal vez debas darle mantenimiento a una aplicación que use AngularJS 1.x, cualquiera que sea el caso te divertirás mucho aprendiendo. 

Si estas iniciando con el framework, este libro te servirá de mucho para aprender sobre AngularJS 1.x, cada versión incorpora muchas mejoras y nos acerca más hacia Angular 2.

Arquitectura

AngularJS de acuerdo a sus autores, adopta el patrón de diseño (MVW) Model-View-Whatever, lo más importante aquí, es que separa claramente las capas del Modelo-Vista-Controlador y  las ventajas que esto conlleva, además algo a destacar es que las aplicaciones desarrolladas en AngularJS hacen uso de servicios, directivas y filtros.

El patrón de diseño Modelo-Vista-Controlador, es uno de los más populares en la industria del desarrollo de aplicaciones empresariales, los conceptos de estas tres capas siguen prevaleciendo a través de los años.

Modelo, se refiere a los datos.

Vista, es responsable de la presentación de los datos.

Controlador, sirve como mediador entre el modelo y la vista, el controlador contiene toda la lógica de la aplicación que utilizara la vista.

La separación de capas nos permite modular nuestras aplicaciones lo cual hace el código más flexible, fácil de mantener y manejar.

Teniendo una base de conocimientos sobre el framework, pasemos pues a la configuración del entorno.

Configuración del entorno de desarrollo

En el desarrollo de aplicaciones del mundo real, es importante saber cuáles son los elementos que integran nuestras aplicaciones, saber identificar y comprender que elementos son vitales para su funcionamiento, este capítulo aborda la manera de obtener los recursos y dependencias que requiere nuestra aplicación de AngularJS, además se dan a conocer herramientas de desarrollo que son esenciales en el trabajo día a día de todo Front-End Full-Stack. 

Obteniendo la dependencia de AngularJS

Es importante que sepas que hay diferentes formas de adquirir la dependencia de AngularJS te mostraré 4 opciones con las que podrás trabajar. En términos de recursos relacionados a aplicaciones, AngularJS es considerada una dependencia que necesita tu proyecto, esta dependencia la podemos adquirir como te comente anteriormente de muchas formas, de muchos sitios, o en el caso de que te encuentres en una empresa con controles estrictos de seguridad, generalmente tienen su propios repositorios donde la podrás obtener.

Empecemos pues por la primera opción.

AngularJS de manera local

La primera opción es descargando AngularJS desde su sitio