Angular Conceptos Practicos 1

1,473 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,473
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Angular Conceptos Practicos 1

  1. 1. Conceptos Prácticos
  2. 2.  Filosofia de AngularJS  Directivas Básicas  Controladoras y Servicios  Routing  Directivas (Introducción)
  3. 3. Y un poco de Introducción
  4. 4.    Aplicaciones que no vuelven a refrescar toda la página Pensadas para interacciones complejas Maximizar la experiencia de usuario 4
  5. 5.    Aplicaciones que no vuelven a refrescar toda la página Pensadas para interacciones complejas Maximizar la experiencia de usuario 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 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. 10. View View View View 10
  11. 11. DOM Manipulation Routing Data Binding History Caching Ajax/Promises Module Loading Object Modeling View Loading 11
  12. 12. 12
  13. 13. 13
  14. 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. 15. Inicio clásico Inicio con módulo 15
  16. 16. 16
  17. 17.  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/
  18. 18.  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
  19. 19.    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
  20. 20.   Mediante el $scope se define el viewmodel inicial Las funciones del scope pueden ser usadas como manejadores de eventos 22
  21. 21.     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
  22. 22.   Angular gestiona automáticamente que servicio llamar Sin embargo es mejor hacer lo siguiente: 24
  23. 23.  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
  24. 24.  Realiza cambios en el DOM  Formatea el input (form controls)  Filtra el output (filters)  Comparte código con otras 26
  25. 25. 27
  26. 26.    Las vistas sirven para mostrar el viewmodel. Existen muchas directivas para lograr el comportamiento requerido Directivas en Angular: ◦ http://docs.angularjs.org/api/ 28
  27. 27.  Hagamos un carrito de compra ◦ http://jsfiddle.net/scyrizales/k5Zfb/
  28. 28.   Sirven para formatear los datos También se puede usar para filtrar arreglos 30
  29. 29.  Refactorizemos el ejemplo anterior  Crearemos el filtro Moneda
  30. 30.     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
  31. 31. 33
  32. 32.  Refactorizemos el ejemplo anterior  Crearemos el servicio Carrito
  33. 33. 35
  34. 34.    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
  35. 35.   El browser tiene que saber que hay interacciones Tenemos que controlar el evento Hashchanged 37
  36. 36.   Sirve para añadir nuevas rutas Dos métodos ◦ when ◦ otherwhise 38
  37. 37. 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
  38. 38.   Define ruta por defecto. Recibe como parametro un objeto route (explicado en la anterior diapositiva) 40
  39. 39.  Directiva que se usa como contenedor de las vistas a renderizar 41
  40. 40.   Se puede definir un template dentro del documento con el que trabajamos. Usamos la etiqueta script junto con el tipo text/ng-template 42
  41. 41.  http://jsfiddle.net/scyrizales/hm72F/ 43
  42. 42.  http://jsfiddle.net/scyrizales/sHP48/ 44
  43. 43.   Las directivas es lo que hace diferente a AngularJS Permiten encapsular funcionalidad en puro html. 46
  44. 44.  Necesidades especiales ◦ Imaginen poder usar este código para compartir un mismo formulario en cualquier parte de su aplicación 47
  45. 45.  Encapsular un plugin de otra libreria  La directiva no existe  Las directivas que existen no cumplen con las necesidades. 48
  46. 46. 49
  47. 47. 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
  48. 48. 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
  49. 49.    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
  50. 50.   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
  51. 51.  Hagamos una calculadora ◦ http://jsfiddle.net/scyrizales/mUJhL/ 54
  52. 52.  Hagamos un time formatter ◦ http://jsfiddle.net/scyrizales/rUbsE/ 55
  53. 53.  Hagamos un tab panel ◦ http://jsfiddle.net/scyrizales/6C6Mv/ 56
  54. 54. ¿Alguna pregunta? Sergio Castillo Front End Developer @scyrizales

×