1. Conceptos Prácticos

2. 
Filosofia de AngularJS

Directivas Básicas

Controladoras y Servicios

Routing

Directivas (Introducción)

3. Y un poco de Introducción

4. 


Aplicaciones que no vuelven a refrescar toda
la página
Pensadas para interacciones complejas
Maximizar la experiencia de usuario
4

5. 


Aplicaciones que no vuelven a refrescar toda
la página
Pensadas para interacciones complejas
Maximizar la experiencia de usuario
5

6. 6

7. 7

8. 8

9. 
HTML es genial para webs estáticas.

Las aplicaciones reales son dinámicas


Angular le enseña nuevos trucos a tu viejo
HTML
Controla muchos aspectos necesarios para
construir SPA‟s
9

10. View
View
View
View
10

11. DOM Manipulation
Routing
Data Binding
History
Caching
Ajax/Promises
Module Loading
Object Modeling
View Loading
11

12. 12

13. 13

14. 
Framework para aplicaciones dinámicas.

Solución completa para el lado cliente.

Facilidad para el mantenimiento

Nunca mas ir y venir entre el DOM y el
modelo
14

15. Inicio clásico
Inicio con
módulo
15

16. 16

18. 
ng-app
◦ Inicial. Se puede indicar el modulo de la App

ng-show
◦ Muestra un elemento en base a una condición

ng-hide
◦ Oculta un elemento en base a una condición

ng-click
◦ Maneja el evento click sobre un elemento

http://docs.angularjs.org/api/

19. 
Convertir la barra de menu estatica
◦ Seleccionar y cambiar el color del link seleccionado
◦ Mostrar en la parte inferior el vinculo seleccionado
◦ No usar nada de javascript
◦ Base:
 http://jsfiddle.net/scyrizales/TzNhB/embedded/result/
◦ Final
 http://jsfiddle.net/scyrizales/5ZxMm/embedded/result/
19

21. 


Un concepto de angular que maneja
interacciones del usuario
Controla la data que viene de los “modelos”
Uno de los “elementos” mas usados es
$scope

22. 

Mediante el $scope se define el viewmodel
inicial
Las funciones del scope pueden ser usadas
como manejadores de eventos
22

23. 



Este servicio sirve para unir la data a la vista
Contexto para las expresiones usadas en la
vista
Provee un metodo para “observar” los
cambios
Provee un método para recibir cambios desde
“afuera”.
23

24. 

Angular gestiona automáticamente que
servicio llamar
Sin embargo es mejor hacer lo siguiente:
24

25. 
Controladoras para separar funciones

Para dar ámbito a las expresiones


Para organizar el paso de información desde
los servicios
Para responder a los eventos del usuario
25

26. 
Realiza cambios en el DOM

Formatea el input (form controls)

Filtra el output (filters)

Comparte código con otras
26

27. 27

28. 


Las vistas sirven para mostrar el viewmodel.
Existen muchas directivas para lograr el
comportamiento requerido
Directivas en Angular:
◦ http://docs.angularjs.org/api/
28

29. 
Hagamos un carrito de compra
◦ http://jsfiddle.net/scyrizales/k5Zfb/

30. 

Sirven para formatear los datos
También se puede usar para filtrar arreglos
30

31. 
Refactorizemos el ejemplo anterior

Crearemos el filtro Moneda

32. 



Los servicios son la mejor forma de compartir
información
Permiten encapsular funcionalidad
Gracias a la DI se pueden testear sin
problemas
Los servicios se manejan como Singletons
32

33. 33

34. 
Refactorizemos el ejemplo anterior

Crearemos el servicio Carrito

35. 35

36. 


El browser no sabe nada acerca de las vistas
El browser siempre va a regresar a la pagina
anterior
Si hubieron varias vistas, lástima.
36

37. 

El browser tiene que saber que hay
interacciones
Tenemos que controlar el evento
Hashchanged
37

38. 

Sirve para añadir nuevas rutas
Dos métodos
◦ when
◦ otherwhise
38

39. Parametro
Descripción
path
La ruta que se compara contra $location.path
route
Objeto con diversas propiedades que indican varios
tipos de configuraciones:
•controller: La controladora a usar.
•template: String que define el template a usar
•templateUrl: ruta fisica de donde cargar un
template
•redirectTo: manejar redirecciones dentro de
angular
39

40. 

Define ruta por defecto.
Recibe como parametro un objeto route
(explicado en la anterior diapositiva)
40

41. 
Directiva que se usa como contenedor de las
vistas a renderizar
41

42. 

Se puede definir un template dentro del
documento con el que trabajamos.
Usamos la etiqueta script junto con el tipo
text/ng-template
42

43. 
http://jsfiddle.net/scyrizales/hm72F/
43

44. 
http://jsfiddle.net/scyrizales/sHP48/
44

46. 

Las directivas es lo que hace diferente a
AngularJS
Permiten encapsular funcionalidad en puro
html.
46

47. 
Necesidades especiales
◦ Imaginen poder usar este código para compartir un
mismo formulario en cualquier parte de su
aplicación
47

48. 
Encapsular un plugin de otra libreria

La directiva no existe

Las directivas que existen no cumplen con las
necesidades.
48

49. 49

50. Propiedad
Valor
restrict
Puede ser A,E,C y M que significan
attribute, element, class, o comment
scope
Cada subpropiedad puede tener cualquiera de estos 3
valores:
•@: el valor es de un solo sentido
•=: el valor es de dos sentidos
•&: guarda una referencia a una función o expresión
template
La base para escribir el código que usará la directiva
replace
Boolean que indica si se debe reemplazar el html
original por el html generado por el template
transclude
Indica si se debe preservar el contenido de la
declaración de la directiva en el html original, se usa
en conjunto con ng-transclude
controller
La controladora que se usara para darle ambito al
template, no siempre es necesario
50

51. Propiedad
Valor
requires
Indica si una directiva depende de otra
link
Función que realiza la configuración inicial de la
directiva. Recibe cuatro parametros:
function link(scope, iElement, iAttrs, controller)
•scope: indica el objeto creado por la propiedad
scope.
•iElement: se refiere al objeto base de la controladora.
Este vienen encapsulado en jqLite o Jquery (si es que
se incluyo en el proyecto)
•iAttrs: los atributos que se asignaron al html original
de la directiva declarada
•Controller: el controller de la directiva padre. Solo
cuando se ha establecido la propiedad requires
51

52. 


Al usar directivas, se crean nuevos scopes, o
se heredan los scopes padres.
Si al definir la directiva, no se usa la
propiedad scope, la directiva crea un nuevo
scope que hereda todas las propiedades del
scope de la controladora que contiene a la
directiva.
Al momento de usar la propiedad scope, se
pierde toda conexión con el scope padre, y se
genera un scope independiente para la
directiva.
52

53. 

El método $watch (forma parte del scope)
sirve para verificar cambios en alguna
propiedad del scope.
La sintaxis es:
◦ $scope.$watch(„propiedad‟, function(value){ });
◦ La funcion suscrita es la forma de realizar los
cambios necesarios ante un cambio en la propiedad
suscrita

Se puede usar para verificar cambios en
propiedades de la controladora padre
inclusive.
53

54. 
Hagamos una calculadora
◦ http://jsfiddle.net/scyrizales/mUJhL/
54

55. 
Hagamos un time formatter
◦ http://jsfiddle.net/scyrizales/rUbsE/
55

56. 
Hagamos un tab panel
◦ http://jsfiddle.net/scyrizales/6C6Mv/
56

57. ¿Alguna pregunta?
Sergio Castillo
Front End Developer
@scyrizales