Parte 3 de 6 del curso de Javascript + Angular.

1. Arquitectura de Angular, Controladoras y
Directivas
Javascript + Angular
Sesion 3
Sergio Castillo Yrizales
@scyrizales

2. Agenda
2
 Arquitectura de Angular
 Controladoras y Directivas

3. Arquitectura de Angular
3

4. ¿Qué es AngularJS?
4
 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

5. Iniciando Angular
5
Inicio clásico
Inicio con
módulo

6. Ejemplo de Clase
6
 Construir un carrito de compras:
 Categorias
 Productos
 Cantidades
 Checkout

7. Modulo
7
 Es el punto de partida para la organización de
código en Angular
 Se indica en la directiva ng-app

8. Data Binding “BiDireccional”
8

9. Entendiendo las controladoras
9
 Mediante el $scope se define el viewmodel inicial
 Las funciones del scope pueden ser usadas
como manejadores de eventos

10. $scope
10
 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”.

11. Inyeccion de dependencias
11
 Angular gestiona automáticamente que servicio
llamar
 Sin embargo es mejor hacer lo siguiente:

12. La controladora no:
12
 Realiza cambios en el DOM
 Formatea el input (form controls)
 Filtra el output (filters)
 Comparte código con otras

13. Entendiendo las vistas
13
 Las vistas sirven para mostrar el viewmodel.
 Existen muchas directivas para lograr el
comportamiento requerido
 Directivas en Angular:
 http://docs.angularjs.org/api/

14. Ejercicio Resuelto
14
 Carrito de compras:
 http://jsfiddle.net/scyrizales/ykAyS/

15. Muchas gracias
Y que esta luz os ilumine donde las otras no puedan…
15