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 dinmicas. Solucin 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 clsico Inicio con mdulo 6. Ejemplo de Clase 6 Construir un carrito de compras: Categorias Productos Cantidades Checkout 7. Modulo 7 Es el punto de partida para la organizacin de cdigo 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 mtodo para recibir cambios desde afuera. 11. Inyeccion de dependencias 11 Angular gestiona automticamente 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 cdigo 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