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

Antes de comenzar con el enrutamiento, solo tengamos una descripción general rápida de las aplicaciones de una sola página.

¿Qué son las aplicaciones de página única?

Las aplicaciones de una sola página o (SPA) son aplicaciones web que cargan una sola página HTML y actualizan dinámicamente la página según 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 de AngularJS le permiten crear diferentes URL para diferentes contenidos en su aplicación.
• Las rutas de 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 alojado a través de la URL http://example.com/index.html .

En esta página, alojaría la página principal de su aplicación. Supongamos que la aplicación estuviera organizando un evento y uno quisiera ver cuáles son los distintos eventos en exhibición, o quisiera ver los detalles de un evento en particular o eliminar un evento. En una aplicación de página única, 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).

• Entonces, si el usuario quisiera ver todos los eventos, sería dirigido al enlace ( http://example.com/index.html#ShowEvent ), de lo contrario
• Si solo quisieran ver un evento en particular, serían redirigidos al enlace ( http://example.com/index.html#DisplayEvent ) o
• Si quisieran eliminar un evento, serían dirigidos al enlace http://example.com/index.html#DeleteEvent .

Tenga en cuenta que la URL principal permanece igual.

En este tutorial, aprenderá:

• Agregar ruta angular ($ routeProvider)
• Crear una ruta predeterminada
• Accediendo a los parámetros de la ruta
• Usando el servicio Angular $ route
• Habilitación del enrutamiento HTML5

Agregar ruta angular ($ routeProvider)

Entonces, como discutimos anteriormente, las rutas en AngularJS se utilizan 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 abandonado 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 todas las funciones de enrutamiento. Esto debe colocarse en su aplicación para que pueda hacer referencia a todos los módulos principales que se requieren 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, no se podrá usar el enrutamiento dentro de la aplicación angular.JS.

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

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

3. 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 se explica por sí misma. Simplemente indica que cuando se elige la ruta relevante, use la ruta para mostrar la vista dada al usuario.

when(path, route)

4. 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.

 Ruta 1 

5. 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 elija la ruta relevante.

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

En nuestro ejemplo,

Presentaremos 2 enlaces al usuario,

• Uno es para mostrar los temas de un curso de Angular JS y el otro es para el curso de Node.js.
• Cuando el usuario hace 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 script.

Este archivo de ruta es necesario para hacer uso de las funcionalidades de tener múltiples rutas y vistas. Este archivo se puede descargar del sitio web angular.JS.

Paso 2) Agregue etiquetas href que representarán enlaces a "Temas de Angular JS" y "Temas de Node JS".

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

Esto permitirá que se inyecte la vista correspondiente cada vez que el usuario haga clic en "Temas de Angular JS" o "Temas de Node JS".

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 desarrollado por Google tiene toda la funcionalidad que permite que el enrutamiento sea posible. Al agregar este módulo, la aplicación comprenderá automáticamente todos los comandos de enrutamiento.
2. $ Routeprovider es un servicio que angular usa para escuchar en segundo plano las rutas que se llaman. Entonces, cuando el usuario hace clic en un enlace, el proveedor de rutas lo detectará y luego decidirá qué ruta tomar.
3. Cree 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 de nodo: este bloque significa que cuando se hace clic en el enlace de nodo, inyecte el archivo Node.html y también use el controlador 'NodeController' para procesar cualquier lógica empresarial.

Paso 5) El siguiente paso es agregar controladores para procesar la lógica empresarial tanto para AngularController como para NodeController.

En cada controlador, estamos creando una matriz de pares clave-valor para almacenar los nombres de los temas y las descripciones de cada curso. La variable de matriz 'tutorial' se agrega al objeto de alcance para cada controlador.

Guru99 Global Event


Angular JS Topics
Node JS Topics

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

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

1. Usar la directiva ng-repeat para revisar cada par clave-valor definido en la variable del tutorial.
2. Visualización del nombre y la descripción de cada par clave-valor.

• Angular.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• Node.html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

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

Producción:

Si hace clic en el enlace Temas de AngularJS, se mostrará el siguiente resultado.

El resultado muestra 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 formaba parte del objeto de alcance 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, es solo la ruta después de la etiqueta # la que cambia. 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 de arriba) y la página HTML principal (Sample.html)

Crear una ruta predeterminada

El enrutamiento en AngularJS también brinda la posibilidad de tener una ruta predeterminada. Esta es la ruta que se elige si no hay coincidencia con 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.

otherwise ({redirectTo: 'page'});

Usemos el mismo ejemplo anterior y agreguemos una ruta predeterminada a nuestro servicio $ routeProvider.

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

Explicación del código:

1. Aquí estamos usando el mismo código que el anterior con la única diferencia es que estamos usando 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á el siguiente resultado cuando ejecute su código en el navegador.

Producción:

De la salida,

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

Accediendo a los parámetros de 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 la URL de nuestra aplicación principal
2. El símbolo # es el separador entre la URL de la aplicación principal y la ruta.
3. Angular es nuestra ruta
4. Y finalmente '1' es el parámetro que se agrega a nuestra ruta

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

HTMLPage # / ruta / parámetro

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

Entonces, en nuestro ejemplo, arriba para los temas de 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 topicid.

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: 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 "$ 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 alcance como la variable '$ scope.tutotialid'. Esto se hace para que pueda ser referenciado en nuestra vista a través de la variable tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

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

Anguler


{{tutorialid}}

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

Producción:

En la pantalla de salida,

• Si hace clic en el enlace Detalles del tema para el primer tema, el número 1 se agrega a la URL.
• Este número será tomado como un argumento "routeparam" por el servicio routeprovider de Angular.JS y luego nuestro controlador podrá acceder a él.

Usando el servicio Angular $ route

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;

myApp.controller('MyController',function($scope,$route)

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 utiliza para pasar información del 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 "This is angular".
• Vamos a adjuntar esta variable a nuestra ruta. Y luego vamos a acceder a esta cadena desde nuestro controlador usando el servicio $ route y luego usaremos el objeto de alcance para mostrarlo en nuestra vista.

Entonces, veamos los pasos que debemos seguir para lograrlo.

Paso 1) Agregue un par clave-valor personalizado a la ruta. Aquí, agregamos una clave llamada 'mytext' y le asignamos un valor de "Esto es angular".

Paso 2) Agregue el código relevante al controlador

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

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Paso 3) Agregue una referencia a la variable de texto del objeto de alcance como expresión. Esto se agregará 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 vio en el tema anterior y esto mostrará el número '1'.

Anguler


{{text}}

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

Producción:

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. La identificación 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 una URL limpia. Significa la eliminación del hashtag de la URL. Por lo tanto, las URL de enrutamiento, cuando se usa 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. Estableciendo nuestra base para enlaces relativos

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

Paso 1) Agregue el código relevante 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 de $ locationProvider. Este servicio le permite definir el html5Mode.
3. Establezca el html5Mode del servicio $ locationProvider en verdadero.

Paso 2) Elimine todas las #etiquetas de los enlaces ('Angular / 1', 'Angular / 2', 'Angular / 3') para crear una URL fácil de leer.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

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

Producción:

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 las 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. Posteriormente, 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 los que luego se puede acceder desde la vista.
• El enrutamiento HTML5 se usa para eliminar la #etiqueta de la URL de enrutamiento en angular para formar una URL bonita