Ejemplo de enrutamiento de AngularJS con parámetros

Antes de aprender cómo funciona el enrutamiento en Angular, echemos un vistazo rápido a las aplicaciones de una sola página.

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

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

¿Qué es el enrutamiento en AngularJS?

Enrutamiento en AngularJS es un método que le permite crear aplicaciones de una sola página. Le permite crear diferentes URL para diferentes contenidos en sus aplicaciones web. El enrutamiento AngularJS también ayuda a mostrar múltiples contenidos según la ruta elegida. Se especifica 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 si la aplicación estuviera organizando un evento y uno quisiera ver cuáles son los distintos eventos que se muestran, o quisiera ver el diseño.tails 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á disponible a través de la siguiente manerawing 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), demás
  • 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 sigue siendo la misma.

Agregar ruta AngularJS usando $ routeProvider

Entonces, como comentamos anteriormente, las rutas en AngularJS se utilizan para dirigir al usuario a una vista diferente de su aplicación. Y este enrutamiento se hace 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 siga los siguientes pasoswing Los pasos principales deben implementarse en su aplicación en cualquier orden específico.

  1. Referencia a angular-route.js. Esto es un JavaScript Archivo 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 necesarios para el enrutamiento.
  2. El siguiente paso importante es agregar una dependencia al módulo ngRoute desde 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á utilizar 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']);
  1. El siguiente paso sería configurar su $routeProvider. Esto es necesario para proporcionar las distintas 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)
  1. Enlaces a su ruta desde su página HTML. En su página HTML, agregará enlaces de referencia a las diversas rutas disponibles en su aplicación.
<a href="#/route1">Route 1</a><br/>
  1. Finalmente sería la inclusión del 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.

Ejemplo de enrutamiento AngularJS

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

En nuestro ejemplo de enrutamiento AngularJS con parámetros,

Presentaremos 2 enlaces al usuario,

  • Una es mostrar los temas de una JS angular Por supuesto, y el otro es para el Node.js curso.
  • Cuando el usuario hace clic en cualquiera de los enlaces, se mostrarán los temas de ese curso.yed.

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

Enrutamiento AngularJS

Este archivo de ruta es necesario para poder 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 "Temas de Angular JS" y "Temas de Node JS".

Enrutamiento AngularJS

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

Enrutamiento AngularJS

Paso 4) En su etiqueta de secuencia de comandos para AngularJS, agregue el "módulo ngRoute" y el servicio "$routeProvider".

Enrutamiento AngularJS

Explicación del código:

  1. El primer paso es asegurarse de incluir el "módulo ngRoute". Una vez implementado esto, Angular manejará automáticamente el enrutamiento en su aplicación. El módulo ngRoute desarrollado por Google tiene todas las funciones que permiten 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 utiliza para escuchar en segundo plano las rutas que se llaman. Entonces, cuando el usuario hace clic en un enlace, el proveedor de ruta en AngularJS 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, se inyecta el archivo Angular.html y también se usa el controlador 'AngularController' para procesar cualquier lógica de negocios.
  4. Cree una ruta para el enlace del Nodo: este bloque significa que cuando se hace clic en el enlace del Nodo, inserte el archivo Node.html y también use el Controlador 'NodeController' para procesar cualquier lógica de negocios.

Paso 5) Lo siguiente 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.

Enrutamiento AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

Paso 6) Cree páginas llamadas Angular.html y Node.html. Para cada página estamos llevando a cabo los pasos a continuación.

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

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

Enrutamiento AngularJS

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>
  • Nodo.html

Enrutamiento AngularJS

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

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

Salida:

Enrutamiento AngularJS

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

Enrutamiento AngularJS

El resultado muestra claramente que,

  • Cuando se hace clic en el enlace "Temas de Angular JS", 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 uno hace clic en el Node.js Temas, 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 de arriba) y la página HTML principal (Sample.html).

Enrutamiento AngularJS

Creando una ruta predeterminada en AngularJS

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 lo siguientewing 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.

Creando una ruta predeterminada en AngularJS

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 el otrowise declaración y la opción "redirectTo" para especificar qué vista se debe cargar si no se especifica ninguna ruta. En nuestro caso queremos que se muestre la vista '/Angular'.

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

Salida:

Creando una ruta predeterminada en AngularJS

Desde la salida,

  • Puede ver claramente que la vista predeterminada que se muestra es la vista angular JS.
  • Esto se debe a que cuando se carga la pagina va al 'otrowise' en la función $routeProvider y carga la vista '/Angular'.

Cómo acceder a los parámetros desde la ruta AngularJS

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 de enrutamiento angular,

  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:

HTMLPágina#/ruta/parámetro

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

Entonces, en nuestro ejemplo de rutas de AngularJS, arriba para los temas de Angular JS, podemos pasar parámetros como se muestra a continuación

Ejemplo.html#/Angular/1

Ejemplo.html#/Angular/2

Ejemplo.html#/Angular/3

Aquí los parámetros de 1, 2 y 3 en realidad pueden representar el topicid.

Veamos en detalle cómo podemos implementar la ruta Angular con parámetro:

Paso 1) Agrega el siguientewing código a tu vista

  1. Agregue una tabla para mostrar todos los temas del curso de Angular JS al usuario
  2. Agregue una fila de tabla para showing 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 showing 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 showing 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.

Parámetros de acceso desde la ruta AngularJS

Paso 2) Agregue la identificación del tema en la función de servicio Routeprovider
En la función de servicio del proveedor de rutas, agregue:topicId para indicar que cualquier parámetro pasado en la URL después de la ruta debe asignarse a la variable topicId.

Parámetros de acceso desde la ruta AngularJS

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í adjuntamos la variable '$routeParams.topicId' a nuestro objeto de alcance como la variable '$scope.tutotialid'. Esto se hace para que se pueda hacer referencia a él en nuestra vista a través de la variable tutorialid.

Parámetros de acceso desde la ruta AngularJS

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

Parámetros de acceso desde la ruta AngularJS

<h2>Anguler</h2>

<br><br>{{tutorialid}}

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

Salida:

Parámetros de acceso desde la ruta AngularJS

En la pantalla de salida,

  • Si haces clic en el Tema Details enlace para el primer tema, el número 1 se agrega a la URL.
  • Este número será luego tomado como un argumento de "parámetro de ruta" por el servicio de proveedor de ruta Angular.JS y luego nuestro controlador podrá acceder a él.

Cómo utilizar el servicio Angular $route

El servicio $route te 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. A continuación se muestra la sintaxis general de cómo el parámetro $route está disponible desde el controlador;

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 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 utilizar el servicio $route.

En este ejemplo,

  • Vamos a crear una variable personalizada simple llamada "mitexto", que contendrá la cadena "Esto es angular".
  • Vamos a adjuntar esta variable a nuestra ruta. Y later Accederemos 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 "mitexto" y le asignamos un valor de "Esto es angular".

Servicio de ruta $ 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. Luego se asigna a la variable "texto" del objeto de alcance. Luego se puede acceder a la variable de texto desde la vista en consecuencia.

Servicio de ruta $ angular

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

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 se inyecte el texto "Esto es angular" en la vista. La expresión {{tutorialid}} es la misma que se vio en el tema anterior y mostrará el número '1'.

Servicio de ruta $ angular

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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

Salida:

Servicio de ruta $ angular

Desde la salida,

  • Podemos ver que el texto "Esto es angular" también se muestra.yed cuando hacemos clic en cualquiera de los enlaces de la tabla. La identificación del tema también se muestra.yed al mismo tiempo que el texto.

Habilitar el enrutamiento HTML5

El enrutamiento HTML5 se utiliza básicamente para crear URL limpias. Significa la eliminación del hashtag de la URL. Entonces, las URL de enrutamiento, cuando se utiliza el enrutamiento HTML5, aparecerán como se muestra a continuación.

Muestra.html/Angular/1

Muestra.html/Angular/2

Muestra.html/Angular/3

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

Hay dos pasos principales que deben realizarse para el enrutamiento HTML2.

  1. Configurando $locationProvider
  2. Estableciendo nuestra base para enlaces relativos

Veamos los detalles de 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. Agregue 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 html5.
  3. Establezca el modo html5 del servicio $locationProvider en verdadero.

Habilitar el enrutamiento HTML5

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

Habilitar el enrutamiento HTML5

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

Salida:

Habilitar el enrutamiento HTML5

Desde la salida,

  • Puedes ver que la etiqueta # no está 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 en 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 utilizando 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 utiliza para eliminar la etiqueta # de la URL de enrutamiento en angular para formar una URL bonita.