Enrutamiento AngularJS con parámetros: Ejemplo de aplicación de una sola página

Antes de empezar con el enrutamiento, vamos a tener una visión general rápida de las aplicaciones de una sola página.

¿Qué son las aplicaciones de una sola página?

Las aplicaciones de una sola página o (SPAs) son aplicaciones web que cargan una sola página HTML y actualizan dinámicamente la página en función de la interacción del usuario con la aplicación web.

¿Qué es el enrutamiento en AngularJS?

En AngularJS, el enrutamiento es lo que le permite crear aplicaciones de una sola página.

  • Las rutas AngularJS le permiten crear diferentes URL para diferentes contenidos en su aplicación.
  • Las rutas AngularJS permiten mostrar múltiples contenidos dependiendo de la ruta elegida.
  • Se especifica una ruta en la URL después del signo #.

Tomemos un ejemplo de un sitio que está alojado a través de la URL http://example.com/index.html.

En esta página, alojará la página principal de su aplicación. Supongamos que la aplicación estaba organizando un Evento y uno quería ver cuáles son los distintos eventos que se muestran, o quería ver los detalles de un evento en particular o eliminar un evento. En una aplicación de una sola página, cuando el enrutamiento está habilitado, toda esta funcionalidad estaría disponible a través de los siguientes enlaces

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

El símbolo # se usaría junto con las diferentes rutas (ShowEvent, DisplayEvent y DeleteEvent).

  • Por lo tanto, si el usuario quería ver todos los eventos, se dirigirían al enlace (http://example.com/index.html#ShowEvent), de lo contrario
  • Si quisieran simplemente ver un evento en particular, serían redirigidos al enlace (http://example.com/index.html#DisplayEvent) o
  • Si quisieran eliminar un evento, se dirigirían al enlace                            (http://example.com/index.html#DeleteEvent.)

Tenga en cuenta que la URL principal sigue siendo la misma.

En este tutorial, usted aprenderá –

Agregar ruta angular ($RouteProvider)

Entonces, como discutimos anteriormente, las rutas en AngularJS se usan para enrutar al usuario a una vista diferente de su aplicación. Y este enrutamiento se realiza en la misma página HTML para que el usuario tenga la experiencia de que no ha salido de la página.

Para implementar el enrutamiento, los siguientes pasos principales deben implementarse en su aplicación en cualquier orden específico.

  1. Referencia a angular-route.js. Este es un archivo JavaScript desarrollado por Google que tiene toda la funcionalidad de enrutamiento. Esto debe colocarse en su aplicación para que pueda hacer referencia a todos los módulos principales que son necesarios para el enrutamiento.
  2. El siguiente paso importante es agregar una dependencia al módulo NGroute desde dentro de su aplicación. Esta dependencia es necesaria para que la funcionalidad de enrutamiento se pueda utilizar dentro de la aplicación. Si no se agrega esta dependencia, entonces uno no podrá usar el enrutamiento dentro de la aplicación Angular.js.

A continuación se muestra la sintaxis general de esta declaración. Esto es solo una declaración normal de un módulo con la inclusión de la palabra clave ngRoute.

  1. El siguiente paso sería configurar su $routeProvider. Esto es necesario para proporcionar las diversas rutas en su aplicación.
    A continuación se muestra la sintaxis general de esta declaración que es muy autoexplicativa. Simplemente indica que cuando se elige la ruta relevante, use la ruta para mostrar la vista dada al usuario.

  1. Enlaces a su ruta desde dentro de su página HTML. En su página HTML, agregará enlaces de referencia a las diversas rutas disponibles en su aplicación.

  1. Finalmente sería la inclusión de la directiva ng-view, que normalmente estaría en una etiqueta div. Esto se usaría para inyectar el contenido de la vista cuando se elige la ruta relevante.

Ahora, veamos un ejemplo de enrutamiento usando los pasos mencionados anteriormente.

En nuestro ejemplo,

Presentaremos 2 enlaces al usuario,

  • Uno es mostrar los temas para un curso Angular JS, y el otro es para el curso Node.js.
  • Cuando el usuario haga clic en cualquiera de los enlaces, se mostrarán los temas de ese curso.

Paso 1) Incluya el archivo de ruta angular como referencia de secuencia de comandos.

Este fichero de ruta es necesario para hacer uso de las funcionalidades de tener múltiples rutas y vistas. Este archivo se puede descargar desde el sitio web Angular.js.

Paso 2) Agregue etiquetas href que representarán enlaces a “Angular JS Topics” y “Node JS Topics”.

Paso 3) Agregue una etiqueta div con la directiva ng-view que representará la vista.

Esto permitirá que la vista correspondiente se inyecte siempre que el usuario haga clic en “Temas JS Angular” o “Temas JS Node”.

Paso 4) En su etiqueta de script para AngularJS, agregue el “módulo NGroute” y el servicio “$RouteProvider”.

Explicación del código:

  1. El primer paso es asegurarse de incluir el “módulo NGroute”. Con esto en su lugar, Angular manejará automáticamente el enrutamiento en su aplicación. El módulo NGroute que es desarrollado por Google tiene todas las funcionalidades que permiten que el enrutamiento sea posible. Al agregar este módulo, la aplicación comprenderá automáticamente todos los comandos de enrutamiento.
  2. El $routeprovider es un servicio que angular utiliza para escuchar en segundo plano las rutas que se llaman. Por lo tanto, cuando el usuario hace clic en un enlace, el proveedor de rutas detectará esto y luego decidirá qué ruta tomar.
  3. Crear una ruta para el enlace angular: este bloque significa que cuando se hace clic en el enlace angular, inyecte el archivo Angular.html y también use el controlador ‘AngularController’ para procesar cualquier lógica comercial.
  4. Crear una ruta para el enlace Node: este bloque significa que cuando se hace clic en el enlace Node, inyecte el archivo Node.html y también use el controlador ‘NodeController’ para procesar cualquier lógica de negocio.

Paso 5) A continuación es agregar controladores para procesar la lógica empresarial tanto para AngularController como NodeController.

En cada controlador, estamos creando una matriz de pares clave-valores para almacenar los nombres del tema y las descripciones de cada curso. La variable de matriz ‘tutorial’ se agrega al objeto de alcance para cada controlador.

Paso 6) Crear páginas llamadas Angular.html y Node.html. Para cada página estamos llevando a cabo los siguientes pasos.

Estos pasos garantizarán que todos los pares clave-valor de la matriz se muestren en cada página.

  • Usando la directiva ng-repeat para ir a través de cada par clave-valor definido en la variable tutorial.
  • Mostrar el nombre y la descripción de cada par clave-valor.

• Angular.html

• Node.html

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

Si hace clic en el enlace AngularJS Temas, se mostrará la siguiente salida.

El resultado demuestra claramente que,

  • Cuando se hace clic en el enlace “Angular JS Topics”, el RouteProvider que declaramos en nuestro código decide que se debe inyectar el código Angular.html.
  • Este código se inyectará en la etiqueta “div”, que contiene la directiva ng-view. Además, el contenido de la descripción del curso proviene de la “variable tutorial” que era parte del objeto scope definido en AngularController.
  • Cuando se hace clic en los Temas de Node.js, se producirá el mismo resultado y se manifestará la vista de los temas de Node.js.
  • Además, observe que la URL de la página permanece igual, solo cambia la ruta después de la etiqueta #. Y este es el concepto de aplicaciones de una sola página. La etiqueta #hash en la URL es un separador que separa la ruta (que en nuestro caso es ‘Angular’ como se muestra en la imagen anterior) y la página HTML principal (Sample.html)

Creación de una ruta predeterminada

El enrutamiento en AngularJS también proporciona la facilidad de tener una ruta predeterminada. Esta es la ruta que se elige si no hay coincidencia para la ruta existente.

La ruta predeterminada se crea agregando la siguiente condición al definir el servicio $RouteProvider.

La siguiente sintaxis simplemente significa redirigir a una página diferente si alguna de las rutas existentes no coincide.

Vamos a utilizar el mismo ejemplo anterior y añadir una ruta predeterminada a nuestro servicio $routeProvider.

Explicación del código:

  1. Aquí estamos utilizando el mismo código que el anterior con la única diferencia es que estamos utilizando la declaración de lo contrario y la opción “RedirectTo” para especificar qué vista debe cargarse si no se especifica ninguna ruta. En nuestro caso queremos que se muestre la vista ‘/Angular’.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida,

  • Puede ver claramente que la vista predeterminada que se muestra es la vista JS angular.
  • Esto se debe a que cuando la página se carga va a la opción ‘de lo contrario’ en la función $routeProvider y carga la vista ‘/Angular’.

Acceso a parámetros desde la ruta

Angular también proporciona la funcionalidad para proporcionar parámetros durante el enrutamiento. Los parámetros se agregan al final de la ruta en la URL, por ejemplo, http://guru99/index.html#/Angular/1. En este ejemplo

  1. http://guru99/index.html es nuestra principal URL de aplicación
  2. El símbolo # es el separador entre la URL principal de la aplicación y la ruta.
  3. Angular es nuestra ruta
  4. Y finalmente ‘1’ es el parámetro que se añade a nuestra ruta

La sintaxis de cómo se ven los parámetros en la URL se muestra a continuación:

HTMLPage#/route/parameter

Aquí notará que el parámetro se pasa después de la ruta en la URL.

Entonces, en nuestro ejemplo, arriba para los temas Angular JS, podemos pasar un parámetro como se muestra a continuación

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Aquí los parámetros de 1, 2 y 3 pueden representar realmente el topícida.

Veamos en detalle cómo podemos implementar esto.

Paso 1) Agregue el siguiente código a su vista

  1. Agregue una tabla para mostrar todos los temas del curso Angular JS al usuario
  2. Agregue una fila de tabla para mostrar el tema “Controladores”. Para esta fila, cambie la etiqueta href a “Angular/1”, lo que significa que cuando el usuario haga clic en este tema, el parámetro 1 se pasará en la URL junto con la ruta.
  3. Agregue una fila de tabla para mostrar el tema “Modelos”. Para esta fila, cambie la etiqueta href a “Angular/2”, lo que significa que cuando el usuario haga clic en este tema, el parámetro 2 se pasará en la URL junto con la ruta.
  4. Agregue una fila de tabla para mostrar el tema “Directivas”. Para esta fila, cambie la etiqueta href a “Angular/3”, lo que significa que cuando el usuario haga clic en este tema, el parámetro 3 se pasará en la URL junto con la ruta.

Paso 2) En la función de servicio routeprovider agregue el: TopicID para indicar que cualquier parámetro pasado en la URL después de la ruta debe asignarse a la variable TopicID.

Paso 3) Agregue el código necesario al controlador

  1. Asegúrese de agregar primero el “$routeParams” como parámetro al definir la función del controlador. Este parámetro tendrá acceso a todos los parámetros de ruta pasados en la URL.
  2. El parámetro “RouteParams” tiene una referencia al objeto TopIcid, que se pasa como parámetro de ruta. Aquí estamos adjuntando la variable ‘$routeParams.topicid’ a nuestro objeto de ámbito como la variable ‘$scope.tutotialid’. Esto se está haciendo para que pueda ser referenciado en nuestra vista a través de la variable tutorialid.

Paso 4) Agregue la expresión para mostrar la variable tutorialid en la página Angular.html.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

En la pantalla de salida,

  • Si hace clic en el enlace Detalles del tema para el primer tema, el número 1 se anexa a la URL.
  • Este número será tomado como un argumento “routeparam” por el servicio routeprovider Angular.js y luego puede ser accedido por nuestro controlador.

Uso del servicio de ruta $angular

El servicio $route le permite acceder a las propiedades de la ruta. El servicio $route está disponible como parámetro cuando la función está definida en el controlador. La sintaxis general de cómo el parámetro $route está disponible desde el controlador se muestra a continuación;

  1. MyApp es el módulo Angular.js definido para sus aplicaciones
  2. MyController es el nombre del controlador definido para su aplicación
  3. Al igual que la variable $scope está disponible para su aplicación, que se usa para pasar información desde el controlador a la vista. El parámetro $route se utiliza para acceder a las propiedades de la ruta.

Echemos un vistazo a cómo podemos usar el servicio $route.

En este ejemplo,

  • Vamos a crear una variable personalizada simple llamada “mytext”, que contendrá la cadena “Esto es angular”.
  • Vamos a adjuntar esta variable a nuestra ruta. Y más tarde vamos a acceder a esta cadena desde nuestro controlador usando el servicio $route y luego usar el objeto scope para mostrar eso en nuestra vista.

Por lo tanto, veamos los pasos que tenemos que llevar a cabo para lograrlo.

Paso 1) Agregue un par clave-valor personalizado a la ruta. Aquí, estamos agregando una clave llamada ‘mytext’ y asignándole un valor de “Esto es angular”.

Paso 2) Agregue el código correspondiente al controlador

  1. Agregue el parámetro $route a la función de controlador. El parámetro $route es un parámetro clave definido en angular, que permite acceder a las propiedades de la ruta.
  2. La variable “mytext” que se definió en la ruta se puede acceder a través de la referencia $route.current. Esto se asigna a la variable ‘text’ del objeto scope. A continuación, se puede acceder a la variable de texto desde la vista en consecuencia.

Paso 3) Agregue una referencia a la variable de texto desde el objeto de ámbito como una expresión. Esto será añadido a nuestra página Angular.html como se muestra a continuación.

Esto hará que el texto “Esto es angular” se inyecte en la vista. La expresión {{tutorialid}} es la misma que se ve en el tema anterior y mostrará el número ‘1’.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida,

  • Podemos ver que el texto “Esto es angular” también se muestra cuando hacemos clic en cualquiera de los enlaces de la tabla. El id del tema también se muestra al mismo tiempo que el texto.

Habilitación del enrutamiento HTML5

El enrutamiento HTML5 se utiliza básicamente para crear URL limpia. Significa la eliminación del hashtag de la URL. Por lo tanto, las URL de enrutamiento, cuando se utiliza el enrutamiento HTML5, aparecerían como se muestra a continuación

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Este concepto se conoce normalmente como presentar una URL bonita al usuario.

Hay 2 pasos principales que deben llevarse a cabo para el enrutamiento HTML5.

  1. Configuración de $LocationProvider
  2. Establecer nuestra base para enlaces relativos

Veamos el detalle de cómo llevar a cabo los pasos mencionados anteriormente en nuestro ejemplo anterior

Paso 1) Añadir el código correspondiente al módulo angular

  1. Agregar una constante BaseURL a la aplicación: esto es necesario para el enrutamiento HTML5 para que la aplicación sepa cuál es la ubicación base de la aplicación.
  2. Agregue los servicios $LocationProvider. Este servicio le permite definir el modo HTML5mode.
  3. Establezca Html5mode del servicio $LocationProvider en true.

Paso 2) Eliminar todo el #tags para los enlaces (‘Angular/1’, ‘Angular/2’, ‘Angular/3’) para crear URL fácil de leer.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida,

  • Puede ver que la etiqueta # no está allí al acceder a la aplicación.

Resumen

  • El enrutamiento se utiliza para presentar diferentes vistas al usuario en la misma página web. Este es básicamente el concepto utilizado en aplicaciones de una sola página que se implementan para casi todas las aplicaciones web modernas
  • Se puede configurar una ruta predeterminada para el enrutamiento Angular.js. Se utiliza para determinar cuál será la vista predeterminada que se mostrará al usuario
  • Los parámetros se pueden pasar a la ruta a través de la URL como parámetros de ruta. A continuación, se accede a estos parámetros mediante el parámetro $routeParams en el controlador
  • El servicio $route se puede utilizar para definir pares clave-valor personalizados en la ruta a la que luego se puede acceder desde dentro de la vista
  • El enrutamiento HTML5 se utiliza para eliminar el #tag de la URL de enrutamiento en angular para formar URL bonita
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *