Javascript + Angular Sesion 3

852 views

Published on

Parte 3 de 6 del curso de Javascript + Angular.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
852
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript + Angular Sesion 3

  1. 1. Arquitectura de Angular, Controladoras y Directivas Javascript + Angular Sesion 3 Sergio Castillo Yrizales @scyrizales
  2. 2. Agenda 2  Arquitectura de Angular  Controladoras y Directivas
  3. 3. Arquitectura de Angular 3
  4. 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. 5. Iniciando Angular 5 Inicio clásico Inicio con módulo
  6. 6. Ejemplo de Clase 6  Construir un carrito de compras:  Categorias  Productos  Cantidades  Checkout
  7. 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. 8. Data Binding “BiDireccional” 8
  9. 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. 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. 11. Inyeccion de dependencias 11  Angular gestiona automáticamente que servicio llamar  Sin embargo es mejor hacer lo siguiente:
  12. 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. 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. 14. Ejercicio Resuelto 14  Carrito de compras:  http://jsfiddle.net/scyrizales/ykAyS/
  15. 15. Muchas gracias Y que esta luz os ilumine donde las otras no puedan… 15

×