Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:07_rutas:02_routeprovider [2014/08/26 14:43]
admin [Alternativa: ui-router]
unidades:07_rutas:02_routeprovider [2015/02/16 09:55] (actual)
admin [Alternativa: ui-router]
Línea 1: Línea 1:
-====== $routeProvider ====== +====== ​7.2 $routeProvider ====== 
-Para usar las rutas en AngularJS primero necesitaremos configurarlo para poder asociar a la ruta ((Que es realmente un fragmento de la URL)) la página HTML que se debe cargar al navegar a esa ruta. Para ello tenemos el servicio [[https://​docs.angularjs.org/​api/​ngRoute/​provider/​$routeProvider|$routeProvider]] de AngularJS+Para usar las rutas en AngularJS ​lo primero ​que necesitaremos ​será configurarlo para poder asociar a la ruta ((que es realmente un fragmento de la URL)) la página HTML que se debe cargar al navegar a esa ruta. Para ello tenemos el servicio [[https://​docs.angularjs.org/​api/​ngRoute/​provider/​$routeProvider|$routeProvider]] de AngularJS.
  
 Este servicio tiene 2 métodos: Este servicio tiene 2 métodos:
   * ''​when''​ : Asocia una ruta con una página HTML   * ''​when''​ : Asocia una ruta con una página HTML
-  * ''​otherwise'':​ Indica cuando hay una ruta desconocida ​a que ruta debemos redirigirnos+  * ''​otherwise'':​ Indica ​a qué ruta debemos redirigirnos ​cuando hay una ruta desconocida
  
 ===== when ===== ===== when =====
Línea 29: Línea 29:
  
   * Línea 1: Definimos primero el path correspondiente a la ruta.   * 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 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.   * 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''​.+En este ejemplosi 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''​.
  
 <note tip> <note tip>
-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.+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 rutasin embargo nunca lo he visto en ningún ejemplo de AngularJS, por lo tanto no recomiendo hacerlo.
 </​note>​ </​note>​
  
 <note important>​ <note important>​
-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.+Recordad ​que aunque el path sea ''/​pagina1''​ y la página se llame ''​pagina1.html''​ realmente no tienen por qué 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. 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.
Línea 53: Línea 53:
  
 ===== otherwise ===== ===== 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''​.+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 ​éso AngularJS permiteen caso de que no pongamos ninguna ruta o que la ruta no existaque 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á. 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á.
Línea 68: Línea 68:
  
 ===== ng-view ===== ===== 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. ​+Ya hemos visto cómo definir las rutas pero nos falta una cosa por especificar , ¿en qué 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,pero, aunque podría hacerseno 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 [[https://​docs.angularjs.org/​api/​ngRoute/​directive/​ngView|ng-view]] al elemento donde quedamos que se cargue.+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 tantocada página de la ruta solo se debería cargar en  un tag, por ejemplo''<​div>''​que habilitáramos para ello. La forma de decirle a Angular ​dónde ​tiene que cargar la página HTML de la ruta es simplemente añadiendo la directiva [[https://​docs.angularjs.org/​api/​ngRoute/​directive/​ngView|ng-view]] al elemento donde quedamos que se cargue.
  
 Veamos un ejemplo: Veamos un ejemplo:
Línea 86: Línea 86:
  
 <​body>​ <​body>​
-  <h1>Esto es el titulo y no cambia</​h1>​+  <h1>éste es el titulo y no cambia</​h1>​
  
   <div ng-view></​div>​   <div ng-view></​div>​
  
-  <h3>Esto es un pie y no cambia</​h3>​+  <h3>ésto es un pie y no cambia</​h3>​
  
 </​body>​ </​body>​
Línea 98: Línea 98:
  
   * 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í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 12: Ésta es la cabecera de la aplicación y como no cambia entre las distintas páginas ​la 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 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.+  * Línea 16: Éste es el pie de la aplicación y como no cambia entre las distintas páginas lo ponemos en la página principal.
  
 +===== Navegando =====
 +Ya tenemos todo preparado pero ahora falta saber cómo se navega a la ruta. Hay dos formas:
 +  * Link desde HTML
 +  * Servicio [[https://​docs.angularjs.org/​api/​ng/​service/​$location|$location]] desde JavaScript ​
 +
 +==== Link desde HTML ====
 +La solución es muy fácil, realmente cada ruta es un fragmento de la URL actual, así que sólo tenemos que navegar al fragmento correspondiente a la ruta.
 +
 +Si tenemos definida la ruta:
 +  /pagina1
 +  ​
 +
 +Podemos poner un link de la siguiente forma:
 +<sxh html>
 +<a href="#/​pagina1">​Ir a la pagina 1</a>
 +</​sxh> ​
 +
 +<note important>​
 +Recuerda poner la almohadilla "#"​ antes de las rutas en los links.
 +</​note>​
 +
 +==== Servicio $location desde JavaScript ====
 +Desde JavaScript AngularJS tiene un servicio que permite navegar a las rutas. Este servicio se llama [[https://​docs.angularjs.org/​api/​ng/​service/​$location|$location]].
 +
 +No vamos a describir todas las funcionalidades de [[https://​docs.angularjs.org/​api/​ng/​service/​$location|$location]]. Únicamente decir que tiene un método llamado ''​path''​ al que le pasamos la ruta y hace que se navegue hasta esa ruta.
 +
 +Si tenemos definida la ruta:
 +  /pagina1
 +  ​
 +por ejemplo, en un controlador podemos hacer lo siguiente:
 +
 +<sxh js;​highlight:​ [1,3,4]>
 +app.controller("​Pagina1Controller",​ ["​$scope","​$location",​function($scope,​$location) {
 +  ​
 +   ​$scope.irPagina1 = function () {
 +      $location.path("/​pagina1"​);​
 +   ​};  ​
 +   
 +}]);
 +
 +</​sxh>​
 +  * Línea 1: Inyectamos el servicio de $location
 +  * Línea 3: Creamos una nueva función que permite navegar a la ruta "/​pagina1"​
 +  * Línea 4: Llamamos al método ''​$location.path''​ para navegar a la ruta "/​pagina1"​
 +
 +Ahora desde cualquier parte de la página ya podemos llamar al método y navegar a esa ruta.
 +
 +<note important>​
 +Recuerda que al usar el servicio de ''​$location''​ no hay que poner la almohadilla "#"​
 +</​note>​
  
 ===== Módulo ng-route ===== ===== 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:+Una cosa a tener en cuenta al usar las rutas es que todo lo relacionado ​con ellas está en un módulo separado del núcleo ​de AngularJS llamado ''​ngRoute''​ y en un fichero llamado ''​angular-route.js'',​ por lo tanto deberemos:
   * Cargar el fichero JavaScript   * Cargar el fichero JavaScript
-  * Hacer que nuestra aplicación ​depende ​del módulo ''​ngRoute''​+  * Hacer que nuestra aplicación ​dependa ​del módulo ''​ngRoute''​
  
 En la página principal del fichero HTML deberemos cargar el fichero JavaScript mediante: En la página principal del fichero HTML deberemos cargar el fichero JavaScript mediante:
Línea 113: Línea 163:
 </​sxh>​ </​sxh>​
  
-Y al crear el módulo de muestra ​aplicación ​deveremos ​hacer que dependa de él:+Y al crear el módulo de nuestra ​aplicación ​deberemos ​hacer que dependa de él:
 <sxh js> <sxh js>
 var app = angular.module("​app",​ ['​ngRoute'​]);​ var app = angular.module("​app",​ ['​ngRoute'​]);​
Línea 120: Línea 170:
  
 <note important>​ <note important>​
-Para usar las rutas , recuerda cargar el fichero ''​angular-route.js''​ y hacer que tu aplicación ​depende ​del módulo ''​ngRoute''​+Para usar las rutas , recuerda cargar el fichero ''​angular-route.js''​ y hacer que tu aplicación ​dependa ​del módulo ''​ngRoute''​
  
 <sxh html> <sxh html>
Línea 133: Línea 183:
  
 ===== Alternativa:​ ui-router ===== ===== 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 [[https://​github.com/​angular-ui/​ui-router|ui-router]]. [[https://​github.com/​angular-ui/​ui-router|ui-router]] tiene muchas ​mas funcionalidades y debe ser nuestra primera elección como servicio de rutas. ​+Acabamos de ver el funcionamiento básico de las rutas en AngularJS 1.2 y en los siguientes temas veremos ​más funcionalidades del módulo de rutas de AngularJS 1.2. Sin embargoel 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 [[https://​github.com/​angular-ui/​ui-router|UI Router]]. [[https://​github.com/​angular-ui/​ui-router|UI Router]] tiene muchas ​más 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 no es aun una opción pero en el momento de escribir este curso Brad Green , un desarrollador de AngularJS ​va [[https://​twitter.com/​bradlygreen/​status/​494959485488594944|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.+El equipo de AngularJs tiene pensado mejorar el servicio de rutas para AngularJS 2.0 pero la versión 2.0 aún queda muy lejos en el tiempo por lo que no es una opción ​todavía ​pero en el momento de escribir este curso [[https://​twitter.com/​bradlygreen/​|Brad Green]] , un desarrollador de AngularJS,[[https://​twitter.com/​bradlygreen/​status/​494959485488594944|twitteó]] que piensan añadir a Angular 1.3 el sistema de rutas de Angular 2.0 por lo que dentro de poco tendremos ​un servicio de rutas adecuado ​en AngularJS ​y no será necesario [[https://​github.com/​angular-ui/​ui-router|UI Router]].
  
-Por todo ello he decidido no contar [[https://​github.com/​angular-ui/​ui-router|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.+Por todo ello he decidido no contar [[https://​github.com/​angular-ui/​ui-router|UI Router]] ya que dentro de poco no será tan necesario al tener ya un servicio de rutas adecuado en AngularJS 1.3. Así que me he centrado en contar el sistema actual que es bastante sencillo, a sabiendas de que cuando ​salga AngularJS 1.3 deberías ​aprender ​el nuevo servicio de rutas.
  
  
 +<note tip>
 +Si tienes que hacer ahora un proyecto real usa [[https://​github.com/​angular-ui/​ui-router|UI Router]] pero si puedes esperar a AngularJS 1.4 (el 5 de Marzo de 2015) mejor usa su servicio de rutas.
 +</​note>​
  
-Brad Green+<note warning>​ 
 +**Actualización 20/​10/​2014.** 
 + 
 +Hace unos días se ha publicado la versión 1.3 de AngularJS y no tiene el nuevo sistema de rutas así que tendremos que esperar a AngularJS 2.0 para verlo. Por lo tanto recuerda en proyectos reales usar [[https://​github.com/​angular-ui/​ui-router|UI Router]] 
 +</​note>​ 
 + 
 +<note warning>​ 
 +**Actualización 28/​10/​2014** 
 + 
 +Vuelve a haber nuevas noticias sobre éste tema.En las conferencias de  [[http://​ngeurope.org/​|ng-europe]] ((la conferencia europea sobre AngularJS)),​ hubo una charla el 24/10/2014 titulada [[http://​ng-workshop.com/​en/​article/​new-router-angularjs-ng-europe-2014|The new Router for AngularJS]],​ en ella se dijo que el nuevo sistema de rutas será portado a AngularJS 1.3. 
 + 
 +</​note>​ 
 + 
 +<note warning>​ 
 +**Actualización 15/​12/​2014** 
 + 
 +Mas noticias sobre éste tema.En el blog de AngularJS se ha publicado el [[http://​angularjs.blogspot.com.es/​2014/​12/​planning-angular-14.html|plan para Angular 1.4]] e incluye el nuevo sistema de rutas!!!! La versión estará para el 5 de Marzo de 2015 coincidiendo con la [[http://​www.ng-conf.org/​|ng-conf]] 
 + 
 +</​note>​
 ===== Ejemplo ===== ===== Ejemplo =====
 +El ejemplo que vamos a hacer es una página principal llamada ''​index.html''​ y 3 páginas que se cargarán dentro de ella. También vamos a poner 3 enlaces para poder cambiar entre las distintas páginas.
  
-Como este ejemplo necesita de ver como cambia la URL del navegador , es mejor abrir en una nueva página el [[http://​run.plnkr.co/​plunks/​seiE7MkRCUZDIpGVYgzK|ejemplo]]. 
  
-{{url>​http://embed.plnkr.co/​seiE7MkRCUZDIpGVYgzK}}+<sxh html;title:index.html> 
 +<​!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>​Éste es el título y no cambia</​h1>​
 +  <ul>
 +    <​li><​a href="#​pagina1">​Ir a la pagina 1</a>
 +    </li>
 +    <​li><​a href="#​pagina2">​Ir a la pagina 2</a>
 +    </li>
 +    <​li><​a href="#​pagina3">​Ir a la pagina 3</a>
 +    </li>
 +  </ul>
 +  <div ng-view></​div>​
 +
 +  <​h3>​Ésto es un pie y no cambia</​h3>​
 +
 +</​body>​
 +
 +</​html>​
 +</​sxh>​
 +
 +Las 3 páginas que forman parte de las rutas se llaman: ''​pagina1.html''​ , ''​pagina2.html''​ y ''​pagina3.html''​ y su código es el siguiente:
 +
 +<sxh html;​title:​pagina1.html>​
 +<​h1>​Soy la pagina 1</​h1> ​
 +{{mensaje}}
 +</​sxh>​
 +
 +<sxh html;​title:​pagina2.html>​
 +<​h1>​Soy la pagina 2</​h1> ​
 +{{mensaje}}
 +</​sxh>​
 +
 +<sxh html;​title:​pagina3.html>​
 +<​h1>​Soy la pagina 3</​h1> ​
 +{{mensaje}}
 +</​sxh>​
 +
 +Por último, el fichero con el JavaScript es el siguiente
 +<sxh js;​title:​script.js>​
 +var app = angular.module("​app",​ ['​ngRoute'​]);​
 +
 +
 +app.config(['​$routeProvider',​function($routeProvider) {
 +  ​
 +
 +  $routeProvider.when('/​pagina1',​ {
 +    templateUrl:​ "​pagina1.html",​
 +    controller: "​Pagina1Controller"​
 +  });
 +  ​
 +  $routeProvider.when('/​pagina2',​ {
 +    templateUrl:​ "​pagina2.html",​
 +    controller: "​Pagina2Controller"​
 +  });
 +  ​
 +  $routeProvider.when('/​pagina3',​ {
 +    templateUrl:​ "​pagina3.html",​
 +    controller: "​Pagina3Controller"​
 +  });  ​
 +  ​
 +  $routeProvider.otherwise({
 +        redirectTo: '/​pagina1'​
 +  });   
 +
 +}]);
 +
 +
 +app.controller("​Pagina1Controller",​ ["​$scope",​function($scope) {
 +   ​$scope.mensaje="​Texto cargado desde el controlador Pagina1Controller";​
 +}]);
 +
 +app.controller("​Pagina2Controller",​ ["​$scope",​function($scope) {
 +   ​$scope.mensaje="​Texto cargado desde el controlador Pagina2Controller";​
 +}]);
 +
 +
 +app.controller("​Pagina3Controller",​ ["​$scope",​function($scope) {
 +   ​$scope.mensaje="​Texto cargado desde el controlador Pagina3Controller";​
 +}]);
 +</​sxh>​
 +
 +
 +<note important>​Como este ejemplo necesita ver cómo cambia la URL del navegador , es mejor abrir en una nueva página el [[http://​run.plnkr.co/​plunks/​seiE7MkRCUZDIpGVYgzK|ejemplo]].</​note>​
 +
 +{{url>​http://​embed.plnkr.co/​seiE7MkRCUZDIpGVYgzK}}
 ===== Referencias ===== ===== Referencias =====
   * [[https://​docs.angularjs.org/​api/​ngRoute/​provider/​$routeProvider|$routeProvider]]   * [[https://​docs.angularjs.org/​api/​ngRoute/​provider/​$routeProvider|$routeProvider]]
   * [[https://​docs.angularjs.org/​api/​ngRoute/​directive/​ngView|ng-view]]   * [[https://​docs.angularjs.org/​api/​ngRoute/​directive/​ngView|ng-view]]
unidades/07_rutas/02_routeprovider.1409056983.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