1. Angular Avanzado Sesion 1Sergio Castillo Yrizales @scyrizales

2. Agenda Arquitectura de Angular Routing Explicando la Magia2 3. Arquitectura de Angular3 4. Ejemplo de Clase 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 javascript4 5. Modulo Es el punto de partida para la organizacin decdigo en Angular Se indica en la directiva ng-app5 6. Data Binding BiDireccional6 7. Entendiendo las controladoras Mediante el $scope se define el viewmodel inicial Las funciones del scope pueden ser usadascomo manejadores de eventos7 8. Inyeccion de dependencias Angular gestiona automticamente que serviciollamar Sin embargo es mejor hacer lo siguiente:8 9. $scope 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 desdeafuera.9 10. Usando $watch El mtodo $watch (forma parte del scope) sirvepara verificar cambios en alguna propiedad del scope. La sintaxis es: $scope.$watch(propiedad, function(value){ }); La funcion suscrita es la forma de realizar loscambios necesarios ante un cambio en la propiedad suscrita Se puede usar para verificar cambios enpropiedades de la controladora padre inclusive. 10 11. La controladora no: Realiza cambios en el DOM Formatea el input (form controls) Filtra el output (filters) Comparte cdigo con otras11 12. Entendiendo las vistas Las vistas sirven para mostrar el viewmodel. Existen muchas directivas para lograr elcomportamiento requerido Directivas en Angular: http://docs.angularjs.org/api/12 13. Routing13 14. Ejemplo de Clase Construir un carrito de compras: Categorias Productos Cantidades Checkout14 15. El botn atrs. El browser no sabe nada acerca de las vistas El browser siempre va a regresar a la paginaanterior Si hubieron varias vistas, lstima.15 16. Manejando la Historia El browser tiene que saber que hay interacciones Tenemos que controlar el evento Hashchanged16 17. $routeProvider Sirve para aadir nuevas rutas Dos mtodos when otherwhise17 18. $routeProvider.when Parametro pathLa ruta que se compara contra $location.pathroute18Descripcin 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 19. $routeProvider.otherwise Define ruta por defecto. Recibe como parametro un objeto route(explicado en la anterior diapositiva)19 20. ng-view Directiva que se usa como contenedor de lasvistas a renderizar20 21. Partial Inline templates Se puede definir un template dentro deldocumento con el que trabajamos. Usamos la etiqueta script junto con el tipo text/ng-template21 22. Ejemplo: Carrito con Routing http://jsfiddle.net/scyrizales/sHP48/22 23. Explicando la magia23 24. Explicando el Data Binding Cada vez que cambia el scope, se actualiza lavista. Cada vez que un major event sucede en laaplicacin, y luego de que sucede, se ejecuta una operacin digest y se actualiza el scope24 25. Major Events Entradas de usuario: Mouse, keyboard, etc. Eventos de Navegador: timeout, blur, etc. Llamadas Ajax: json, templates, etc25 26. $apply, $digest and $$phase $digest es un metodo interno que realiza laverificacin de los cambios entre la vista y el scope y hace las respectivas actualizaciones al scope $apply sirve para llamar desde fuera al $digest.Cuando usamos otras librerias externas, es necesario llamar a $apply $$phase es un indicador de si esta corriendo un 26$digest. Debemos tenerlo en cuenta para no aplicar $apply porque nos dar un error. 27. Llamando a Angular desde fuera angular.element(domElement).scope() Sobre este scope, podemos aplicar las funciones$apply y $digest.27 28. SafeApply Para evitar los problemas de usar el $applypodemos crear esta funcin en el rootScope28 29. Contruyamos un blog Listado de entradas Agregar nuevos posts (eliminarlos y modificarlos)29 30. Directivas30 31. Qu es una Directiva? Las directivas es lo que hace diferente aAngularJS Permiten encapsular funcionalidad en puro html.31 32. Razones para escribir directivas Necesidades especiales Imaginen poder usar este cdigo para compartir unmismo formulario en cualquier parte de su aplicacin32 33. Razones para escribir directivas Encapsular un plugin de otra libreria La directiva no existe Las directivas que existen no cumplen con lasnecesidades.33 34. Como crear Directivas?34 35. Valores de las propiedades Propiedad restrictPuede ser A,E,C y M que significan attribute, element, class, o commentscopeCada 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 funcin o expresintemplateLa base para escribir el cdigo que usar la directivareplaceBoolean que indica si se debe reemplazar el html original por el html generado por el templatetranscludeIndica si se debe preservar el contenido de la declaracin de la directiva en el html original, se usa en conjunto con ng-transcludecontroller 35ValorLa controladora que se usara para darle ambito al template, no siempre es necesario 36. Valores de las propiedades Propiedad requiresIndica si una directiva depende de otralink36Valor Funcin que realiza la configuracin 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 37. Jerarqua de scopes Al usar directivas, se crean nuevos scopes, o seheredan 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 conexin con el scope padre, y se genera un scope independiente para la directiva.37 38. Usando $watch El mtodo $watch (forma parte del scope) sirvepara verificar cambios en alguna propiedad del scope. La sintaxis es: $scope.$watch(propiedad, function(value){ }); La funcion suscrita es la forma de realizar loscambios necesarios ante un cambio en la propiedad suscrita Se puede usar para verificar cambios enpropiedades de la controladora padre inclusive. 38 39. Ejemplos (Directiva Simple) Hagamos una calculadora http://jsfiddle.net/scyrizales/mUJhL/39 40. Ejemplos (Directiva Simple) Hagamos un time formatter http://jsfiddle.net/scyrizales/rUbsE/40 41. Ejemplos (Directiva Anidada) Hagamos un tab panel http://jsfiddle.net/scyrizales/6C6Mv/41