¡Esta es una revisión vieja del documento!


$routeProvider

Para usar las rutas en AngularJS primero necesitaremos configurarlo para poder asociar a la ruta 1) la página HTML que se debe cargar al navegar a esa ruta. Para ello tenemos el servicio $routeProvider de AngularJS

Este servicio tiene 2 métodos:

  • when : Asocia una ruta con una página HTML
  • otherwise: Indica cuando hay una ruta desconocida a que ruta debemos redirigirnos

when

El método when de $routeProvider permite asociar una ruta a una página HTML aunque como mínimo también se indica el controlador que se usará en esa página.

El método when acepta dos parámetros:

  • path: Es el nombre de la ruta, es decir, lo que se pondrá tras el símbolo ”#”.
  • route: Es un objeto que define la página HTML a cargar y el controlador que se usará en esa página HTML. El objeto debe tener las siguientes propiedades:
    • templateUrl: Nombre de la página HTML. Debe ser una ruta deferida a la página HTML principal que contrendrá esta página HTML.
    • controller: Es el nombre del controlador de AngularJS que se usará con esta página.

Veamos un ejemplo:

  var path='/pagina1';

  var route={
    templateUrl: "pagina1.html",
    controller: "Pagina1Controller"
  }

  $routeProvider.when(path,route);

  • Línea 1: Definimos primero el path correspondiente a la ruta.
  • Línea 3: Definimos el objeto JavaScript que contiene los datos de la ruta. Siendo la página pagina1.html y el controlador que usamos Pagina1Controller
  • Línea 8: Ahora es cuando le decimos a AngularJS el path y la definición de la ruta.

En este ejemplo si el usuario añade a la página principal ”#/pagina1” se cargará dentro de la página principal la página HTML llamada pagina1.html y como controlador de esa nueva página se usará Pagina1Controller.

Se podría poner dentro de la nueva página la directiva ng-controller y especificar dentro de la propia página el controlador en vez de al definir la ruta sin embargo nunca lo he visto en ningún ejemplo de AngularJS, por lo tanto no recomiendo hacerlo.

Recordar que aunque el path sea /pagina1 y la página se llame pagina1.html realmente no tiene porque coincidir en nada los nombres, aunque por coherencia suelen ser parecidos.

No tendría mucho sentido navegar a la ruta /ventas y que se cargara la página compras.html aunque no hay nada que lo impida.

El código anterior habitualmente suele compactarse de la siguiente forma y es como lo usaremos a partir de ahora:

  $routeProvider.when('/pagina1', {
    templateUrl: "pagina1.html",
    controller: "Pagina1Controller"
  });

otherwise

En caso de que el usuario pusiera una ruta que no existe o simplemente no pusiera ninguna ruta , la página principal se podría quedar en blanco ya que no cargaría ninguna página. Para evitar eso AngularJS permite que en caso de que no pongamos ninguna ruta o que la ruta no exista que se navegue a una ruta predeterminada, para ello usamos el método otherwise.

El método otherwise acepta un único parámetro con un objeto, teniendo el objeto la propiedad redirectTo con el path de la ruta a la que se navegará.

Veamos un ejemplo:

  $routeProvider.otherwise({
        redirectTo: '/pagina1'
  }); 

Lo que hacemos es decirle a AngularJS que en caso de que no pongamos ruta o la ruta sea desconocida es como si fuera la ruta /pagina1.

ng-view

Ya hemos visto como definir las rutas pero nos falta una cosa por especificar , ¿en que parte de la página principal se carga la página HTML de cada ruta? Podríamos pensar que la página cargada ocupará toda la página principal, aunque podría hacerse no es lo normal.

Si miramos las capturas de pantalla de gmail, la parte izquierda y la superior no cambian en cada ruta por lo que todo ese HTML debería estar en la página principal. Por lo tanto cada página de la ruta solo se debería cargar en , por ejemplo, un tag <div> que habilitáramos para ello. La forma de decirle a Angular donde tiene que cargar la página HTML de la ruta es simplemente añadiendo la directiva ng-view al elemento donde quedamos que se cargue.

Veamos un ejemplo:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js'></script>
  <script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Esto es el titulo y no cambia</h1>

  <div ng-view></div>

  <h3>Esto es un pie y no cambia</h3>

</body>

</html>

  • Líneas 5, 6, 7 y 8: Cargamos una única vez todo el JavaScript y así ahorramos tiempo al no tener que volver a cargarlo en cada nueva ruta a la que naveguemos.
  • Línea 12: Esto es la cabecera de la aplicación y como no cambia entre las distintas páginas lo ponemos en la página principal.
  • Línea 14: En este <div> al incluir la directiva ng-view es donde se cargarán las páginas HTML de las rutas.
  • Línea 16: Esto es el pie de la aplicación y como no cambia entre las distintas páginas lo ponemos en la página principal.

Módulo ng-route

Una cosa a tener en cuenta al usar las rutas es que todo lo relacionada con ellas está en un módulo separado del nucleo de AngularJS llamado ngRoute y en un fichero llamado angular-route.js, por lo tanto deberemos:

  • Cargar el fichero JavaScript
  • Hacer que nuestra aplicación depende del módulo ngRoute

En la página principal del fichero HTML deberemos cargar el fichero JavaScript mediante:

  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js'></script>

Y al crear el módulo de muestra aplicación deveremos hacer que dependa de él:

var app = angular.module("app", ['ngRoute']);

Para usar las rutas , recuerda cargar el fichero angular-route.js y hacer que tu aplicación depende del módulo ngRoute

  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js'></script>

var app = angular.module("app", ['ngRoute']);

Alternativa: ui-router

Acabamos de ver el funcionamiento básico de las rutas en AngularJS 1.2 y en los siguientes temas veremos mas funcionalidades del módulo de rutas de AngularJS 1.2, sin embargo el módulo de rutas de AngularJS 1.2 tiene una funcionalidad muy básica. En aplicaciones reales no deberíamos usarlo y como substituto de facto está el proyecto ui-router. ui-router tiene muchas mas funcionalidades y debe ser nuestra primera elección como servicio de rutas.

El equipo de AngularJs tiene pensado mejorar el servicio de rutas para AngularJS 2.0 pero la versión 2.0 aun queda muy lejos en el tiempo por lo que no es aun una opción pero en el momento de escribir este curso , Brad Green , un desarrollador de AngularJS va twittear que piensan añadir a Angular 1.3 el sistema de rutas de Angular 2.0 por lo que dentro de poco podremos tener un servicio de rutas adecuando en AngularJS.

Por todo ello he decidido no contar ui-router ya que dentro de poco tendremos un servicio de rutas adecuado en AngularJS 1.3. Así que me he centrado en contar el sistema actual que es bastante sencillo aunque debes saber que en cuanta salga AngularJS 1.3 deberías aprende el nuevo servicio de rutas.

Brad Green

Ejemplo

Como este ejemplo necesita de ver como cambia la URL del navegador , es mejor abrir en una nueva página el ejemplo.

Referencias

1) Que es realmente un fragmento de la URL
unidades/07_rutas/02_routeprovider.1409057009.txt.gz · Última modificación: 2014/08/26 14:43 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0