¡Esta es una revisión vieja del documento!
Las rutas son un concepto ya establecido en las aplicaciones actuales pero que quizás no nos hayamos dado cuenta aun. Para empezar a entenderlas vamos primero a ver unas capturas de pantalla de gmail.
Página de “Recibidos”: URL=https://mail.google.com/mail/u/0/#inbox
Página de “Importantes”: URL=https://mail.google.com/mail/u/0/#imp
Página de “Enviados”: URL=https://mail.google.com/mail/u/0/#sent
Página de “Todos”: URL=https://mail.google.com/mail/u/0/#imp
Ahora analicemos cada una de las URL y las página, para ello volvamos a poner las páginas y sus URLs:
Página | URL |
---|---|
Recibidos | https://mail.google.com/mail/u/0/#inbox |
Importantes | https://mail.google.com/mail/u/0/#imp |
Enviados | https://mail.google.com/mail/u/0/#sent |
Sabemos que la parte que hay después de la ”#” corresponde a una parte dentro de la página es decir a un fragmento. Por lo tanto las 4 URL corresponden todas a la misma página que en este caso es https://mail.google.com/mail/u/0/. Es decir que en este ejemplo, la aplicación de gmail está en una única página llamada https://mail.google.com/mail/u/0/, pero cambiado los fragmentos se muestra una cosa u otra.
Ahora vamos a explicar que son las rutas pero para ello vamos a cambiar un poco lo que son nuestros conceptos sobre que es una página , una URL ,etc. Los vamos a redefinir para adecuarlo a como funcionas página como gmail y por supuesto como se trabaja en AngularJS.
Realmente la aplicación de gmail tiene muchas páginas aunque en la barra del navegador siempre estemos en la misma página. Y los fragmentos de las URL realmente nos indican de esas nuevas páginas queremos mostrar. Entonces ¿que es una ruta?, una ruta el simplemente el nombre de un fragmento ya que ahora ya no va a hacer referencia a una parte dentro de la página sino que cambiar la ruta (el fragmento) indica cargar una nueva página dentro de la página real que estamos viendo.
Ahora podemos volver a mostrar la tabla anterior de la siguiente forma:
Página | Ruta |
---|---|
Recibidos | inbox |
Importantes | imp |
Enviados | sent |