Routing, Repaso
Javascript + Angular
Sesion 6
Sergio Castillo Yrizales
@scyrizales
Agenda
2
 Routing
 Repaso
Routing
3
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
...
Manejando la Historia
5
 El browser tiene que saber que hay interacciones
 Tenemos que controlar el evento Hashchanged
$routeProvider
6
 Sirve para añadir nuevas rutas
 Dos métodos
 when
 otherwhise
$routeProvider.when
7
Parametro Descripción
path La ruta que se compara contra $location.path
route Objeto con diversas pr...
$routeProvider.otherwise
8
 Define ruta por defecto.
 Recibe como parametro un objeto route
(explicado en la anterior di...
ng-view
9
 Directiva que se usa como contenedor de las
vistas a renderizar
Partial Inline templates
10
 Se puede definir un template dentro del
documento con el que trabajamos.
 Usamos la etiquet...
Ejemplo Servicio Externo
11
 http://jsfiddle.net/scyrizales/hm72F/
Ejemplo: Carrito con Routing
12
 http://jsfiddle.net/scyrizales/sHP48/
Repaso
13
Inicio con módulo
14
Definiendo controladora
15
Definiendo Filtros
16
Definiendo Servicios
17
Examen: Parte Práctica
18
 Realizar un blog
 Debe tener:
 Listado de entradas
 Detalle de cada entrada
 Filtro para l...
Muchas gracias
Y que esta luz os ilumine donde las otras no puedan…
19
Upcoming SlideShare
Loading in …5
×

Javascript + Angular Sesion 6

600 views

Published on

Parte 6 de 6 de las clases de angular + javascript

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
600
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript + Angular Sesion 6

  1. 1. Routing, Repaso Javascript + Angular Sesion 6 Sergio Castillo Yrizales @scyrizales
  2. 2. Agenda 2  Routing  Repaso
  3. 3. Routing 3
  4. 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. 5. Manejando la Historia 5  El browser tiene que saber que hay interacciones  Tenemos que controlar el evento Hashchanged
  6. 6. $routeProvider 6  Sirve para añadir nuevas rutas  Dos métodos  when  otherwhise
  7. 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. 8. $routeProvider.otherwise 8  Define ruta por defecto.  Recibe como parametro un objeto route (explicado en la anterior diapositiva)
  9. 9. ng-view 9  Directiva que se usa como contenedor de las vistas a renderizar
  10. 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. 11. Ejemplo Servicio Externo 11  http://jsfiddle.net/scyrizales/hm72F/
  12. 12. Ejemplo: Carrito con Routing 12  http://jsfiddle.net/scyrizales/sHP48/
  13. 13. Repaso 13
  14. 14. Inicio con módulo 14
  15. 15. Definiendo controladora 15
  16. 16. Definiendo Filtros 16
  17. 17. Definiendo Servicios 17
  18. 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. 19. Muchas gracias Y que esta luz os ilumine donde las otras no puedan… 19

×