Enrutamiento de AngularJs con parámetros

Antes de analizar cómo funciona el enrutamiento en AngularJS, conviene comprender para qué tipo de aplicación se diseñó. La siguiente sección establece ese contexto, y todas las técnicas que se describen a continuación se basan en él.

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

Las aplicaciones de una sola página (SPA, por sus siglas en inglés) son aplicaciones web que cargan una única página HTML y la actualizan dinámicamente a medida que el usuario interactúa con ella. En lugar de solicitar un documento nuevo al servidor con cada clic, una SPA solo actualiza la parte de la página que ha cambiado.

Ese diseño genera un problema. Si el navegador nunca navega a un nuevo documento, la barra de direcciones nunca cambia, por lo que el usuario no puede marcar una pantalla, compartirla ni usar el botón de retroceso. El enrutamiento resuelve precisamente este problema.

¿Qué es el enrutamiento en AngularJS?

Enrutamiento en AngularJS es un método que te permite crear aplicaciones de una sola página. Te permite crear diferentes URLs para diferentes contenidos en sus aplicaciones web. El enrutamiento de AngularJS también ayuda a mostrar múltiples contenidos dependiendo de la ruta que se elija. Se especifica en el URL después del signo #.

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

Esta página contiene la pantalla principal de su aplicación. Supongamos que la aplicación organiza un evento y el usuario desea listar los eventos, ver uno en detalle o eliminarlo. En una aplicación de una sola página con enrutamiento habilitado, todo esto está disponible a través de los siguientes enlaces.

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

• Para ver todos los eventos, el usuario es dirigido a http://example.com/index.html#ShowEvent
• Para ver un evento en particular, se les indica que http://example.com/index.html#DisplayEvent
• Para eliminar un evento, se les dirige a http://example.com/index.html#DeleteEvent

Tenga en cuenta que el principal URL Se mantiene igual. Solo cambia el fragmento que sigue al símbolo #, y ese fragmento es el que AngularJS monitoriza. Una vez establecido el concepto, la siguiente sección describe los componentes que debes conectar antes de que todo funcione.

Agregar ruta AngularJS usando $ routeProvider

Como se mencionó anteriormente, las rutas en AngularJS Se utilizan para redirigir al usuario a una vista diferente de la aplicación. Esta redirección se realiza en la misma página HTML, por lo que el usuario tiene la sensación de no haber abandonado la página.

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

1. Referencia angular-route.js. Este JavaScript archivo, desarrollado por Google, contiene toda la funcionalidad de enrutamiento y debe incluirse para que la aplicación pueda hacer referencia a las necesidades de enrutamiento de los módulos.
2. Agregue una dependencia al módulo ngRoute desde su aplicación. Sin esta dependencia, no se podrá utilizar el enrutamiento en la aplicación AngularJS.

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. Configure su $routeProvider. Esto proporciona las distintas rutas de su aplicación, y la sintaxis simplemente indica que, cuando se seleccione la ruta correspondiente, se utilizará dicha ruta para mostrar la vista especificada.

when(path, route)

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

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

👍 Tip: Los cinco pasos son obligatorios. La falta de una referencia a angular-route.js es la razón más común por la que una ruta no hace nada, ya que $routeProvider no existe sin ella. La siguiente sección combina los cinco pasos en un ejemplo práctico.

Ejemplo de enrutamiento AngularJS

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

En nuestro ejemplo de enrutamiento AngularJS con parámetros,

• Un enlace sirve para mostrar los temas de un AngularJS 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.

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

Este archivo de rutas es necesario para poder utilizar las funcionalidades de tener múltiples rutas y vistas. Este archivo se puede descargar desde el sitio web de AngularJS.

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 secuencia de comandos para AngularJS, agregue el "módulo ngRoute" y el servicio "$routeProvider".

Code Explicación:

1. Incluye el módulo “ngRoute”. De esta forma, Angular gestiona el enrutamiento automáticamente y comprende todos los comandos de enrutamiento.
2. El servicio $routeProvider escucha en segundo plano las rutas que se invocan. Cuando el usuario hace clic en un enlace, lo detecta y decide qué ruta tomar.
3. Crea una ruta para el enlace de Angular: cuando se haga clic en él, inyecta Angular.html y usa 'AngularController' para la lógica de negocio.
4. Crea una ruta para el enlace de Node, que inyecte Node.html y utilice 'NodeController' de la misma manera.

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

En cada controlador, creamos un array de pares clave-valor para almacenar los nombres y descripciones de los temas de cada curso. La variable de array 'tutorial' se añade al objeto scope de cada controlador.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">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"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Correcciones aplicadas. El <title> La etiqueta estaba dentro <body>, chrset="UTF 8" estaba mal escrito, el segundo enlace apuntaba a #Node.html en lugar de la ruta registrada /Nodey las rutas de las plantillas llevaban una barra diagonal inicial que se resolvía desde la raíz del dominio.

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 todos los pares clave-valor de la matriz se muestren en cada página.

1. Usando el directiva ng-repetir 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

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

• Nodo.html — idéntico al listado anterior, con el encabezado cambiado a “Nodo”. Ambas plantillas se leen igual tutorial variable, que cada controlador proporciona desde su propio ámbito.

⚠️ Corrección: El encabezado en el archivo Angular.html original decía “Anguler”. La ortografía se ha corregido arriba.

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 Temas de AngularJS, se mostrará la siguiente información.

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 página URL 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 el URL es un separador entre la ruta (que en nuestro caso es 'Angular') y la página HTML principal (Sample.html).

El ejemplo solo funciona cuando el usuario hace clic en un enlace que coincide con una ruta registrada. La siguiente sección explica qué sucede cuando no hay ninguna coincidencia.

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 la siguiente condición al definir el servicio $routeProvider.

La sintaxis que se muestra a continuación 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.

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

Code Explicación:

1. Aquí utilizamos el mismo código que antes, con la única diferencia de que usamos la instrucción `otherwise` 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, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

Desde la salida,

• Se puede apreciar claramente que la vista predeterminada que se muestra es la vista de AngularJS.
• 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'.

Una ruta predeterminada decide qué vista se carga. La siguiente sección cubre cómo una sola ruta puede servir muchos registros al llevar un valor en la URL.

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

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

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

La sintaxis general es HTMLPágina#/ruta/parámetro, por lo que los temas anteriores se convierten en Sample.html#/Angular/1, #/Angular/2 y #/Angular/3, donde el dígito es el ID del tema.

Veamos en detalle cómo podemos implementar una ruta de Angular con un parámetro.

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

1. Agrega una tabla para mostrar al usuario todos los temas del curso de Angular JS.
2. Agregue una fila de tabla para mostrar el tema “Controladores”. Para esta fila, establezca el href en “#!/Angular/1”, de modo que al hacer clic en el tema se pase el parámetro 1 en la URL junto con la ruta.
3. Agregue una fila para el tema “Modelos”, con el href establecido en “#!/Angular/2” para que el parámetro 2 viaje en el URL.
4. Agregue una fila para el tema “Directivas”, con el href establecido en “#!/Angular/3” para que el parámetro 3 viaje en el URL.

Paso 2) Agregue el ID del tema en la función del servicio routeProvider.
En la función de servicio routeProvider, agregue el :topicId marcador de posición para indicar que cualquier parámetro pasado en el URL Después de que la ruta se asigne 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 el URL.
2. “$routeParams” contiene el topicId pasado en la ruta. Adjuntando $routeParams.topicId al alcance como $scope.tutorialid lo hace disponible para la vista como tutorialid.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

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

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

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Correcciones aplicadas. El original utilizó la letra l en lugar del dígito 1 in href="#Angular/l", omitió el ng-view contenedor por lo que la plantilla no tenía dónde renderizarse y se cargó angular-route.js antes angular.min.js, lo que genera un error de módulo.

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.

<h2>Angular</h2>

<br><br>{{tutorialid}}

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, se agregará el número 1 al final. URL.
• Ese número se toma como un argumento de “routeParams” y se vuelve accesible en el controlador.

Leer un parámetro es sencillo. La función de la propiedad que se describe a continuación es obtener el registro que identifica el parámetro antes de que aparezca la vista.

Cómo precargar datos con la propiedad resolve

El controlador de la sección anterior lee un ID de tema y lo muestra inmediatamente. Las aplicaciones reales primero deben obtener el registro de un servidor, y si la vista se renderiza antes de que esa solicitud regrese, el usuario ve una plantilla vacía que se llena un momento después. resolve Esta propiedad elimina ese destello de contenido vacío.

Cada llave dentro de un resolve El objeto es una dependencia que AngularJS prepara antes de que se active la ruta. Si el valor es una promesa, el enrutador espera a que se resuelva. Solo cuando todas las promesas se han resuelto, AngularJS instancia el controlador y renderiza la plantilla, y los valores resueltos se inyectan en el controlador por nombre, exactamente como cualquier otro servicio.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Dos comportamientos son importantes aquí. Una promesa rechazada cancela el cambio de ruta y deja el navegador en la vista actual, por lo que una solicitud fallida nunca produce una página rota. Sin embargo, debido a que el enrutador se bloquea mientras la promesa está pendiente, un punto final lento hace que la aplicación parezca congelada. resolve con un indicador de progreso impulsado por el $routeChangeStart y $routeChangeSuccess eventos.

⚠️ Advertencia: Nunca coloque comprobaciones de autenticación solo dentro resolveRechazar una ruta oculta una vista, pero no protege los datos que contiene, y el punto final de la API aún debe garantizar el acceso al servidor.

Además de precargar datos, una ruta también puede contener valores de configuración estáticos. El servicio que se describe a continuación explica cómo un controlador los lee.

Cómo utilizar el servicio Angular $route

El servicio $route permite acceder a las propiedades de la ruta. Este servicio está disponible como parámetro cuando se define la función en el controlador. A continuación se muestra la sintaxis general para acceder al parámetro $route desde el controlador.

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

1. myApp es el módulo AngularJS definido para su aplicación.
2. MyController es el nombre del controlador definido para su aplicación.
3. Así como $scope pasa información del controlador a la vista, $route expone las propiedades de la ruta actual.

Veamos cómo podemos usar 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. Later Vamos a acceder a esta cadena desde nuestro controlador usando el servicio $route y luego usaremos el objeto scope para mostrarla 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".

Paso 2) Agregue el código correspondiente 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.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

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

<h2>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

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

Salida:

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

Cada URL Lo que se muestra hasta ahora todavía lleva el símbolo #. El paso de configuración final lo elimina.

Habilitar el enrutamiento HTML5

El enrutamiento HTML5 se utiliza para crear un enrutamiento limpio. URLs. Significa la eliminación del hashtag del URL. Entonces el enrutamiento URLCuando se utiliza el enrutamiento HTML5, se vería como se muestra a continuación.

Muestra.html/Angular/1

Muestra.html/Angular/2

Muestra.html/Angular/3

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

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

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

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

Paso 1) Agregue el código correspondiente al módulo de Angular.

1. Agregue un <base> etiqueta al encabezado del documento. 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 el servicio $locationProvider. Este servicio le permite definir el modo html5.
3. Establezca el modo html5 del servicio $locationProvider en verdadero.

Paso 2) Elimina todas las etiquetas # de los enlaces ('Angular/1', 'Angular/2', 'Angular/3') para crear enlaces fáciles de leer. URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ Corrección: el original declaró un baseUrl constante apuntando a una ruta IDE local, que no tiene efecto en html5Mode. AngularJS lee la ubicación base desde el <base href> etiqueta. El original también inyectaba $locationProvider sin haber llamado nunca html5Mode(true), por lo que el hash nunca se eliminó.

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

Salida:

Desde la salida,

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

Todo lo anterior utiliza ngRoute, el enrutador proporcionado por el equipo de AngularJS. No es la única opción, y la comparación a continuación explica cuándo la alternativa es la más adecuada.

ngRoute vs ui-router: ¿Qué enrutador elegir?

ngRoute es mantenido por el equipo de AngularJS y coincide con un URL directamente a una única plantilla y controlador. ui-router es un proyecto comunitario creado para eliminar la principal limitación de ngRoute: coincide con la aplicación. estado en lugar de en el URL sola, lo que permite que una pantalla contenga varias regiones con rutas independientes.

Elija ngRoute cuando cada URL se asigna a una vista de página completa, ya que no necesita dependencias adicionales y toda la API cabe en una sola página. Elija ui-router cuando una pantalla tenga paneles que naveguen de forma independiente, o cuando las vistas secundarias deban reutilizar datos cargados por una vista principal. La migración posterior es posible pero no trivial, porque los nombres de estado reemplazan URL patrones en todas las plantillas.

Errores comunes de enrutamiento en AngularJS y cómo solucionarlos

La mayoría de los fallos de enrutamiento producen una vista ng-view en blanco en lugar de un error en la consola, lo que dificulta su diagnóstico. A continuación, se indica la causa y la solución para cada síntoma.

• Proveedor desconocido: $routeProvider: angular-route.js nunca se cargó, o se cargó antes que angular.min.js. Primero, haga referencia a la biblioteca principal.
• La vista permanece en blanco sin ningún error: Ningún elemento contiene la directiva ng-view, por lo que la plantilla no tiene dónde renderizarse.
• No se carga nada en la primera visita: Ninguna ruta coincide con la ruta vacía. Agregue un bloque otherwise con un valor redirectTo.
• $routeParams está vacío: Al patrón le falta el marcador de posición de dos puntos. Debe decir '/Angular/:topicId'.
• Plantillas 404 después de html5Mode: Configure el servidor para que reescriba las rutas que no coincidan con la página base y confirme que la etiqueta href base esté presente.
• El controlador nunca se vuelve a ejecutar: Solo cambió el parámetro, por lo que AngularJS reutilizó la instancia del controlador en lugar de reconstruirla. Escuche el evento $routeUpdate en lugar de depender de que la función del controlador se ejecute de nuevo.

Preguntas Frecuentes