menú
buscar
¡Esta es una revisión vieja del documento!
Tabla de Contenidos
$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 HTMLotherwise: 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.htmly el controlador que usamosPagina1Controller - 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.
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.
/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.
$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 la ruta? Es muy sencillo usamos la directiva ng-view.
Simplemente tenemos que poner esa directiva donde queremos que se carguen todas las páginas HTML.
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>
módulo ng-route
Ejemplo
Como este ejemplo necesita de ver como cambia la URL del navegador , es mejor abrir en una nueva página el ejemplo.
Referencias
