PDF de programación - Manual del Guerrero: AngularJS

Manual del Guerrero: AngularJS
Carlos Solis

©2015 Carlos Solis

A los que fueron, a los que vienen y en especial, al loco que pensaba en estrellas lejanas.

….”Après moi, le déluge”

Índice general

Presentación .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.
Prerrequisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
¿Cómo leer este libro?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Primeros pasos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Creando aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Manipulación de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Expandiendo AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Materiales adicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mantente en contacto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

SECCION 1: PRIMEROS PASOS .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Introducción a AngularJS .

.
¿Qué es AngularJS?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
El Patrón MVW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Data binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Inyección de dependencias
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Directivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
¿Porqué usar AngularJS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

1
1
2
2
2
2
3
3
3

4

5
5
6
6
6
7
7

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Herramientas de Desarrollo .

.
Sublime Text 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9
9
Configurar Sublime Text para AngularJS . . . . . . . . . . . . . . . . . . . . 10
Instalar Package Control
. . . . . . . . . . . . . . . . . . . . . . . . . . 10
Instalar soporte para AngularJS . . . . . . . . . . . . . . . . . . . . . . 11
Instalar detector de errores JavaScript . . . . . . . . . . . . . . . . . . 12
Adobe Brackets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Configurar Brackets para AngularJS . . . . . . . . . . . . . . . . . . . . . . . 13
Adobe Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

.

.

.

.

.

.

.

.

.

.

Creando un Proyecto con AngularJS .

16
Descargar AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Versión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

ÍNDICE GENERAL

CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Librerías adicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Instalar AngularJS en un documento HTML . . . . . . . . . . . . . . . . . . . . . 19
Configurar una aplicación AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . 20
Alcance de ng-app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Inicializar la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Cargando módulos adicionales . . . . . . . . . . . . . . . . . . . . . . 21
Ejemplo: Hola Mundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

SECCION 2: CREANDO APLICACIONES .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

25

Expresiones .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

26
Definir expresiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Representar valores dinámicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Representar objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Representar resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Filtros en expresiones .

35
Representar Divisas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Modificando las mayúsculas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Representando números . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Formato de Fechas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Encadenar filtros

.

.

.

Filtros personalizados

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

47

49

Filtros de Datos .

55
Filtrando datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Ordenar colecciones de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Controladores .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

61
Creando un controlador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Activar el controlador en un documento . . . . . . . . . . . . . . . . . . . . 62
El objeto $scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Alcance de un controlador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Controladores múltiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Métodos
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Directivas .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

75
Agregar Directivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Directivas con valores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Directivas AngularJS y estándares W3C . . . . . . . . . . . . . . . . . . . . . . . . 79
Directivas Comunes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

ÍNDICE GENERAL

ng-app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
ng-controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
ng-model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
ng-bind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Creando una directiva personalizada . . . . . . . . . . . . . . . . . . . . . . 84
Aplicando directivas personalizadas en un documento . . . . . . . . . . . . 85
Agregando valores a las directivas personalizadas . . . . . . . . . . . . . . 86

Directivas personalizadas

.

.

.

.

.

Modificar estilos con AngularJS .

89
Manipular propiedades CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Asignar clases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Ocultar y mostrar elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Modificar imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Mostrar elementos condicionalmente . . . . . . . . . . . . . . . . . . . . . . . . 98

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Eventos e interacción .

. 101
Clicks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Eventos del mouse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Eventos para móviles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Simulando una pantalla táctil en Chrome . . . . . . . . . . . . . . . . . . . . 109
Eventos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

SECCION 3: MANIPULACION DE DATOS .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. 116

Representar colecciones de datos .

. 117
Crear listas con arreglos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Agregar elementos a una lista . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Asignar eventos en listas dinámicas . . . . . . . . . . . . . . . . . . . . . . . 120
Crear listas con objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Acceder datos externos .

. 124
Preparando los datos externos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Consideraciones de seguridad y permisos de lectura . . . . . . . . . . . . . 127
Cargar información desde servidores externos . . . . . . . . . . . . . . . . 128
Cargando un archivo externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Desplegar los datos cargados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

SECCION 4: EXPANDIENDO ANGULAR .

.

.

.

.

.