Parte 6 de 6 de las clases de angular + javascript

1. Routing, Repaso
Javascript + Angular
Sesion 6
Sergio Castillo Yrizales
@scyrizales

2. Agenda
2
 Routing
 Repaso

3. Routing
3

4. El botón atrás.
4
 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.

5. Manejando la Historia
5
 El browser tiene que saber que hay interacciones
 Tenemos que controlar el evento Hashchanged

6. $routeProvider
6
 Sirve para añadir nuevas rutas
 Dos métodos
 when
 otherwhise

7. $routeProvider.when
7
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

8. $routeProvider.otherwise
8
 Define ruta por defecto.
 Recibe como parametro un objeto route
(explicado en la anterior diapositiva)

9. ng-view
9
 Directiva que se usa como contenedor de las
vistas a renderizar

10. Partial Inline templates
10
 Se puede definir un template dentro del
documento con el que trabajamos.
 Usamos la etiqueta script junto con el tipo
text/ng-template

11. Ejemplo Servicio Externo
11
 http://jsfiddle.net/scyrizales/hm72F/

12. Ejemplo: Carrito con Routing
12
 http://jsfiddle.net/scyrizales/sHP48/

13. Repaso
13

14. Inicio con módulo
14

15. Definiendo controladora
15

16. Definiendo Filtros
16

17. Definiendo Servicios
17

18. Examen: Parte Práctica
18
 Realizar un blog
 Debe tener:
 Listado de entradas
 Detalle de cada entrada
 Filtro para la fecha
 Organizado en servicios, controladoras
 Usar ruteo y partial templates

19. Muchas gracias
Y que esta luz os ilumine donde las otras no puedan…
19