====== 7.1 Justificación ======
Las rutas son un concepto ya establecido en las aplicaciones actuales pero quizás no nos hayamos dado cuenta aún de ello. Para empezar a entenderlas vamos primero a ver unas capturas de pantalla de gmail.

Página de "Recibidos": URL=<nowiki>https://mail.google.com/mail/u/0/</nowiki>**#inbox**

{{:unidades:07_rutas:gmail-inbox.png?nolink|}}

\\

Página de "Importantes": URL=<nowiki>https://mail.google.com/mail/u/0/</nowiki>**#imp**

{{:unidades:07_rutas:gmail-imp.png?nolink|}}

\\

Página de "Enviados": URL=<nowiki>https://mail.google.com/mail/u/0/</nowiki>**#sent**

{{:unidades:07_rutas:gmail-sent.png?nolink|}}

\\

Página de "Todos": URL=<nowiki>https://mail.google.com/mail/u/0/</nowiki>**#imp**

{{:unidades:07_rutas:gmail-all.png?nolink|}}

\\




Ahora analicemos cada una de las URL y las páginas. Para ello volvamos a poner las páginas y sus URLs:

^  Página  ^  URL  ^
|Recibidos  |<nowiki>https://mail.google.com/mail/u/0/</nowiki>**#inbox** |
|Importantes  |<nowiki>https://mail.google.com/mail/u/0/</nowiki>**#imp** |
|Enviados |<nowiki>https://mail.google.com/mail/u/0/</nowiki>**#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 <nowiki>https://mail.google.com/mail/u/0/</nowiki>. Es decir, que en este ejemplo, la aplicación de gmail está en una única página llamada <nowiki>https://mail.google.com/mail/u/0/</nowiki>, pero cambiando los fragmentos se muestra una cosa u otra. 

===== Rutas =====
Ahora vamos a explicar qué son las rutas pero para ello vamos a cambiar un poco lo que son nuestros conceptos sobre qué es una página , una URL ,etc. Los vamos a redefinir para adecuarlo a cómo funciona una página como gmail y por supuesto cómo 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  esas nuevas //páginas// que queremos mostrar. Entonces ¿qué es una ruta?, una ruta es simplemente el nombre de un fragmento pero que ahora ya no va a hacer referencia a una parte dentro de la página sino que ahora 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** |

Ahora tenemos una página real que es <nowiki>https://mail.google.com/mail/u/0/</nowiki> y dentro de ella cargamos nuevas páginas dependiendo de la ruta (fragmento) que pongamos. Esta forma de trabajar se llama:
  * Single-Page Application (SPA)
  * Single-Page Interface (SPI)

¿Qué ventajas tiene esta forma de trabajar? 

  * La principal ventaja es la rapidez. Las aplicaciones actuales tienen mucho CSS, JavaScript , etc. Al tener una única página real, se carga todo ello al principio una única vez y cuando cambiamos de //página// todo lo anterior ya está cargado , y sólo cambiamos el HTML de la nueva //página//. 
  * Otra ventaja es que podemos mantener nuestro estado en variables JavaScript ya que nunca salimos de la página , lo que nos simplifica mucho el desarrollo. ¿Recordáis cuando navegar a otra página podía implicar pasar muchas cosas en la URL para pasar el estado de la aplicación de una página a otra?

Pues después de todo ésto, en el siguiente tema vamos a ver cómo funciona el servicio de rutas de AngularJS que nos permitirá tener una única página y en función de las rutas cargar unas páginas u otras dentro de la página principal.