Your SlideShare is downloading. ×
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript + Angular Sesion 3

541

Published on

Parte 3 de 6 del curso de Javascript + Angular.

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
541
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×