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 javascript
4
5. Modulo
Es el punto de partida para la organización de
código en Angular
Se indica en la directiva ng-app
5
7. Entendiendo las controladoras
Mediante el $scope se define el viewmodel inicial
Las funciones del scope pueden ser usadas
como manejadores de eventos
7
8. Inyeccion de dependencias
Angular gestiona automáticamente que servicio
llamar
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 método para recibir cambios desde
“afuera”.
9
10. Usando $watch
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.
10
11. La controladora no:
Realiza cambios en el DOM
Formatea el input (form controls)
Filtra el output (filters)
Comparte código con otras
11
12. Entendiendo las vistas
Las vistas sirven para mostrar el viewmodel.
Existen muchas directivas para lograr el
comportamiento requerido
Directivas en Angular:
http://docs.angularjs.org/api/
12
14. Ejemplo de Clase
Construir un carrito de compras:
Categorias
Productos
Cantidades
Checkout
14
15. El botón atrás.
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.
15
16. Manejando la Historia
El browser tiene que saber que hay interacciones
Tenemos que controlar el evento Hashchanged
16
18. $routeProvider.when
Parametro
path
La ruta que se compara contra $location.path
route
18
Descripción
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
21. Partial Inline templates
Se puede definir un template dentro del
documento con el que trabajamos.
Usamos la etiqueta script junto con el tipo
text/ng-template
21
24. Explicando el Data Binding
Cada vez que cambia el scope, se actualiza la
vista.
Cada vez que un “major event” sucede en la
aplicación, y luego de que sucede, se ejecuta
una operación “digest” y se actualiza el scope
24
25. Major Events
Entradas de usuario:
Mouse, keyboard, etc.
Eventos de Navegador:
timeout, blur, etc.
Llamadas Ajax:
json, templates, etc…
25
26. $apply, $digest and $$phase
$digest es un metodo interno que realiza la
verificación 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 $apply
podemos crear esta función en el rootScope
28
29. Contruyamos un blog
Listado de entradas
Agregar nuevos posts (eliminarlos y modificarlos)
29
31. ¿Qué es una Directiva?
Las directivas es lo que hace diferente a
AngularJS
Permiten encapsular funcionalidad en puro html.
31
32. Razones para escribir directivas
Necesidades especiales
Imaginen poder usar este código para compartir un
mismo formulario en cualquier parte de su
aplicación
32
33. Razones para escribir directivas
Encapsular un plugin de otra libreria
La directiva no existe
Las directivas que existen no cumplen con las
necesidades.
33
35. Valores de las propiedades
Propiedad
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
35
Valor
La controladora que se usara para darle ambito al template,
no siempre es necesario
36. Valores de las propiedades
Propiedad
requires
Indica si una directiva depende de otra
link
36
Valor
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
37. Jerarquía de scopes
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.
37
38. Usando $watch
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.
38