Routage AngularJS avec paramètres

Avant d'examiner le fonctionnement du routage dans AngularJS, il est utile de comprendre le type d'application pour lequel il a été conçu. La section ci-dessous pose ce contexte, et chaque technique qui suit s'appuie dessus.

Que sont les applications à page unique ?

Les applications monopages (SPA) sont des applications web qui chargent une seule page HTML et la mettent à jour dynamiquement en fonction des interactions de l'utilisateur. Au lieu de demander un nouveau document au serveur à chaque clic, une SPA ne modifie que la partie de la page qui a changé.

Cette conception pose un problème : si le navigateur n’ouvre jamais de nouveau document, la barre d’adresse reste figée, empêchant ainsi l’utilisateur de mettre une page en favoris, de la partager ou d’utiliser le bouton « Retour ». Le routage résout précisément ce problème.

Qu’est-ce que le routage dans AngularJS ?

Routage dans AngularJS est une méthode qui vous permet de créer des applications monopages. Elle vous permet de créer différentes URLLes routes permettent d'afficher différents contenus dans vos applications web. Le système de routage d'AngularJS permet également d'afficher plusieurs contenus en fonction de la route choisie. Il est spécifié dans le URL après le signe #.

Prenons l'exemple d'un site hébergé via le URL http://example.com/index.html.

Cette page contient l'écran principal de votre application. Supposons que l'application organise un événement et que l'utilisateur souhaite consulter la liste des événements, afficher les détails d'un événement ou en supprimer un. Dans une application monopage avec navigation activée, toutes ces actions sont accessibles via les liens suivants.

Le symbole # serait utilisé avec les différents itinéraires (ShowEvent, DisplayEvent et DeleteEvent).

• Pour consulter tous les événements, l'utilisateur est redirigé vers http://example.com/index.html#ShowEvent
• Pour assister à un événement particulier, ils sont dirigés vers http://example.com/index.html#DisplayEvent
• Pour supprimer un événement, ils sont invités à http://example.com/index.html#DeleteEvent

Notez que le principal URL Le reste demeure inchangé. Seul le fragment suivant le # change, et c'est ce fragment qu'AngularJS surveille. Ce concept étant établi, la section suivante détaille les éléments à connecter avant que le tout ne fonctionne.

Ajout d'une route AngularJS à l'aide de $routeProvider

Comme nous l'avons évoqué précédemment, les itinéraires dans AngularJS Ces balises permettent de rediriger l'utilisateur vers une autre vue de votre application. Cette redirection s'effectue sur la même page HTML, donnant ainsi à l'utilisateur l'impression de ne pas avoir quitté la page.

Pour implémenter le routage, les principales étapes suivantes doivent être mises en œuvre dans votre application, dans un ordre quelconque.

1. Référence à angular-route.js. Ceci Javascénario fichier, développé par Google, contient toutes les fonctionnalités de routage et doit être inclus pour que l'application puisse référencer les besoins de routage des modules.
2. Ajoutez une dépendance au module ngRoute depuis votre application. Sans cette dépendance, le routage est totalement impossible à utiliser dans une application AngularJS.

Vous trouverez ci-dessous la syntaxe générale de cette instruction. Il s'agit simplement d'une déclaration normale d'un module avec l'inclusion du mot-clé ngRoute.

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

3. Configurez votre $routeProvider. Celui-ci définit les différentes routes de votre application, et sa syntaxe indique simplement que lorsque le chemin correspondant est sélectionné, la route est utilisée pour afficher la vue indiquée.

when(path, route)

4. Liens vers votre itinéraire depuis votre page HTML. Dans votre page HTML, vous ajouterez des liens de référence vers les différents itinéraires disponibles dans votre application.

<a href="#!/route1">Route 1</a><br/>

5. Enfin, il y aurait l'inclusion du directive ng-view, qui serait normalement dans une balise div. Cela serait utilisé pour injecter le contenu de la vue lorsque l'itinéraire pertinent est choisi.

💡 Astuce: Les cinq étapes sont obligatoires. L'absence de référence à angular-route.js est la raison la plus fréquente pour laquelle une route ne produit aucun effet, car $routeProvider n'existe pas sans cette référence. La section suivante illustre ces cinq étapes par un exemple fonctionnel.

Exemple de routage AngularJS

Examinons maintenant un exemple de routage utilisant les étapes mentionnées ci-dessus.

Dans notre exemple de routage AngularJS avec paramètres,

• Un lien permet d'afficher les sujets d'un AngularJS bien sûr, et l'autre est pour le Node.js cours.
• Lorsque l'utilisateur clique sur l'un des liens, les sujets de ce cours seront affichés.

Étape 1) Incluez le fichier angulaire-route comme référence de script.

Ce fichier de configuration est nécessaire pour utiliser les fonctionnalités de gestion de plusieurs routes et vues. Vous pouvez le télécharger sur le site web d'AngularJS.

Étape 2) Ajoutez des balises href qui représenteront des liens vers « Sujets Angular JS » et « Sujets Node JS ».

Étape 3) Ajoutez une balise div avec la directive ng-view qui représentera la vue.

Cela permettra d'injecter la vue correspondante chaque fois que l'utilisateur clique sur les « Sujets Angular JS » ou « Sujets Node JS ».

Étape 4) Dans votre balise de script pour AngularJS, ajoutez le « module ngRoute » et le service « $routeProvider ».

Code Explication:

1. Incluez le module « ngRoute ». Grâce à lui, Angular gère automatiquement le routage et comprend toutes les commandes de routage.
2. Le service $routeProvider écoute en arrière-plan les routes appelées. Lorsqu'un utilisateur clique sur un lien, il le détecte et détermine la route à emprunter.
3. Créez une route pour le lien Angular : lorsqu’on clique dessus, injectez Angular.html et utilisez « AngularController » pour la logique métier.
4. Créez une route pour le lien Node, qui injecte Node.html et utilise 'NodeController' de la même manière.

Étape 5) Ensuite, il faut ajouter des contrôleurs pour traiter la logique métier pour AngularController et NodeController.

Dans chaque contrôleur, nous créons un tableau de paires clé-valeur pour stocker les noms et descriptions des sujets de chaque cours. La variable de tableau « tutorial » est ajoutée à l'objet scope de chaque contrôleur.

<!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>

⚠️ Corrections apportées. Le <title> l'étiquette était à l'intérieur <body>, chrset="UTF 8" était mal orthographié, le deuxième lien pointait vers #Node.html au lieu de l'itinéraire enregistré /Node, et les chemins d'accès aux modèles comportaient une barre oblique initiale qui se résolvait à partir de la racine du domaine.

Étape 6) Créez des pages appelées Angular.html et Node.html. Pour chaque page, nous effectuons les étapes ci-dessous.

Ces étapes garantiront que toutes les paires clé-valeur du tableau sont affichées sur chaque page.

1. Le directive ng-répétition pour parcourir chaque paire clé-valeur définie dans la variable du tutoriel.
2. Affichage du nom et de la description de chaque paire clé-valeur.

• Angulaire.html

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

• Noeud.html — identique à la liste ci-dessus, avec le titre modifié en « Nœud ». Les deux modèles ont le même contenu. tutorial variable, que chaque contrôleur fournit à partir de sa propre portée.

⚠️ Correction: L'en-tête du fichier Angular.html original était « Anguler ». L'orthographe est corrigée ci-dessus.

Si le code s'exécute correctement, le résultat suivant s'affichera lorsque vous exécuterez votre code dans le navigateur.

Sortie :

Si vous cliquez sur le lien « Sujets AngularJS », le résultat ci-dessous s’affichera.

Le résultat montre clairement que,

• Lorsque l'on clique sur le lien « Angular JS Topics », le routeProvider que nous avons déclaré dans notre code décide que le code Angular.html doit être injecté.
• Ce code sera injecté dans la balise « div », qui contient la directive ng-view. De plus, le contenu de la description du cours provient de la « variable du didacticiel » qui faisait partie de l'objet scope défini dans AngularController.
• Lorsqu'on clique sur le Node.js Sujets, le même résultat aura lieu et la vue des sujets Node.js sera manifestée.
• Notez également que la page URL reste inchangé. Seule la route après le symbole # change, et c'est le principe des applications monopages. Le symbole # dans le URL est un séparateur entre la route (qui dans notre cas est 'Angular') et la page HTML principale (Sample.html).

Cet exemple ne fonctionne que si l'utilisateur clique sur un lien correspondant à une route enregistrée. La section suivante explique ce qui se passe lorsqu'aucune correspondance n'est trouvée.

Création d'une route par défaut dans AngularJS

Le routage dans AngularJS offre également la possibilité d'avoir une route par défaut. C'est l'itinéraire qui est choisi s'il n'y a pas de correspondance avec l'itinéraire existant.

La route par défaut est créée en ajoutant la condition suivante lors de la définition du service $routeProvider.

La syntaxe ci-dessous signifie simplement rediriger vers une autre page si aucune des routes existantes ne correspond.

otherwise({
  redirectTo: 'page'
});

Utilisons le même exemple ci-dessus et ajoutons une route par défaut à notre service $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 Explication:

1. Nous utilisons ici le même code que précédemment, à la différence près que nous employons la clause `otherwise` et l'option `redirectTo` pour spécifier la vue à charger si aucune route n'est indiquée. Dans notre cas, nous souhaitons afficher la vue `/Angular`.

Si le code s'exécute correctement, le résultat suivant s'affichera lorsque vous exécuterez votre code dans le navigateur.

Sortie :

De la sortie,

• Vous pouvez clairement constater que la vue par défaut affichée est la vue AngularJS.
• En effet, lorsque la page se charge, elle accède à l'option « autrement » dans la fonction $routeProvider et charge la vue « /Angular ».

Une route par défaut détermine la vue à charger. La section suivante explique comment une seule route peut desservir plusieurs enregistrements en transportant une valeur dans le URL.

Comment accéder aux paramètres de la route AngularJS

Angular offre également la possibilité de transmettre des paramètres lors du routage. Ces paramètres sont ajoutés à la fin de la route dans le URL, par exemple, http://guru99/index.html#/Angular/1. Dans cet exemple de routage angulaire,

1. http://guru99/index.html est notre application principale URL
2. Le symbole # sert de séparateur entre l'application principale et l'application principale. URL et l'itinéraire
3. Angulaire est notre route
4. Et enfin '1' est le paramètre qui est ajouté à notre route

La syntaxe générale est HTMLPage#/route/paramètre, donc les sujets précédents deviennent Sample.html#/Angular/1, #/Angular/2 et #/Angular/3, où le chiffre est l'identifiant du sujet.

Examinons en détail comment implémenter une route Angular avec un paramètre.

Étape 1) Ajoutez le code suivant à votre vue

1. Ajoutez un tableau affichant à l'utilisateur tous les sujets abordés dans le cours Angular JS.
2. Ajoutez une ligne au tableau pour afficher le sujet « Contrôleurs ». Pour cette ligne, définissez l’attribut href sur « #!/Angular/1 », afin que cliquer sur le sujet transmette le paramètre 1. URL ainsi que l'itinéraire.
3. Ajoutez une ligne pour le sujet « Modèles », avec l’attribut href défini sur « #!/Angular/2 » afin que le paramètre 2 soit inclus dans le lien. URL.
4. Ajoutez une ligne pour le sujet « Directives », avec l’attribut href défini sur « #!/Angular/3 » afin que le paramètre 3 soit inclus dans le lien. URL.

Étape 2) Ajouter l'identifiant du sujet dans la fonction de service routeProvider
Dans la fonction de service routeProvider, ajoutez le :topicId espace réservé pour indiquer que tout paramètre passé dans le URL après, l'itinéraire doit être affecté à la variable topicId.

Étape 3) Ajoutez le code nécessaire au contrôleur

1. Veillez à ajouter « $routeParams » comme paramètre lors de la définition de la fonction du contrôleur. Ce paramètre aura accès à tous les paramètres de route transmis. URL.
2. « $routeParams » contient l'identifiant du sujet transmis dans la route. $routeParams.topicId à la portée comme $scope.tutorialid le rend accessible à la vue sous le nom 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>

⚠️ Corrections apportées. L'original utilisait la lettre l au lieu du chiffre 1 in href="#Angular/l", a omis le ng-view conteneur, le modèle n'avait donc aucun endroit où s'afficher et a été chargé angular-route.js avant angular.min.js, ce qui génère une erreur de module.

Étape 4) Ajouter l'expression pour afficher la variable
Ajoutez l'expression pour afficher la variable tutorielid dans la page Angular.html.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Si le code s'exécute correctement, le résultat suivant s'affichera lorsque vous exécuterez votre code dans le navigateur.

Sortie :

Dans l'écran de sortie,

• Si vous cliquez sur le lien « Détails du sujet » pour le premier sujet, le chiffre 1 est ajouté à la fin. URL.
• Ce nombre est considéré comme un argument « routeParams » et devient accessible dans le contrôleur.

Lire un paramètre est simple. Récupérer l'enregistrement que le paramètre identifie, avant l'affichage de la vue, est le rôle de la propriété décrite ci-après.

Comment précharger des données avec la propriété resolve

Le contrôleur de la section précédente lit un identifiant de sujet et l'affiche immédiatement. Les applications réelles doivent d'abord récupérer l'enregistrement auprès d'un serveur, et si la vue s'affiche avant que cette requête ne soit terminée, l'utilisateur voit un modèle vide qui se remplit un instant plus tard. resolve Cette propriété supprime l'affichage fugace de contenu vide.

Chaque clé à l'intérieur d'un resolve L'objet est une dépendance qu'AngularJS prépare avant l'activation de la route. Si sa valeur est une promesse, le routeur attend sa résolution. Ce n'est qu'une fois toutes les promesses résolues qu'AngularJS instancie le contrôleur et affiche le modèle ; les valeurs résolues sont ensuite injectées dans le contrôleur par leur nom, comme pour n'importe quel autre service.

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;
}]);

Deux comportements sont importants ici. Une promesse rejetée annule le changement de route et laisse le navigateur sur la vue actuelle ; ainsi, une requête ayant échoué ne produit jamais de page cassée. Cependant, comme le routeur se bloque pendant l’attente de la promesse, un point de terminaison lent peut donner l’impression que l’application est figée. resolve avec un indicateur de progrès piloté par le $routeChangeStart et $routeChangeSuccess événements.

⚠️ Mise en garde: Ne jamais placer les contrôles d'authentification uniquement à l'intérieur resolveRefuser une route masque une vue mais ne protège pas les données sous-jacentes, et le point de terminaison de l'API doit toujours imposer l'accès sur le serveur.

Outre le préchargement des données, une route peut également contenir des valeurs de configuration statiques. Le service décrit ci-après explique comment un contrôleur les lit.

Comment utiliser le service angulaire $route

Le service `$route` permet d'accéder aux propriétés de la route. Il est disponible en tant que paramètre lors de la définition de la fonction dans le contrôleur. La syntaxe générale pour rendre le paramètre `$route` accessible depuis le contrôleur est présentée ci-dessous.

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

1. myApp est le module AngularJS défini pour votre application.
2. MyController est le nom du contrôleur défini pour votre application.
3. De même que $scope transmet des informations du contrôleur à la vue, $route expose les propriétés de la route actuelle.

Voyons comment nous pouvons utiliser le service $route.

Dans cet exemple,

• Nous allons créer une simple variable personnalisée appelée « montexte », qui contiendra la chaîne « Ceci est angulaire ».
• Nous allons associer cette variable à notre itinéraire. Later Nous allons accéder à cette chaîne de caractères depuis notre contrôleur en utilisant le service $route, puis utiliser l'objet scope pour l'afficher dans notre vue.

Voyons donc les étapes que nous devons suivre pour y parvenir.

Étape 1) Ajoutez une paire clé-valeur personnalisée à l'itinéraire. Ici, nous ajoutons une clé appelée « montexte » et lui attribuons la valeur « Ceci est angulaire ».

Étape 2) Ajoutez le code correspondant au contrôleur.

1. Ajoutez le paramètre `$route` à la fonction du contrôleur. Le paramètre `$route` est un paramètre clé défini dans Angular, qui permet d'accéder aux propriétés de la route.
2. La variable « mytext » qui a été définie dans la route est accessible via la référence $route.current. Celle-ci est ensuite affectée à la variable « texte » de l'objet scope. La variable de texte est alors accessible depuis la vue en conséquence.

// 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;
}]);

Étape 3) Ajoutez une référence à la variable texte de l'objet scope en tant qu'expression. Ceci sera ajouté à notre page Angular.html comme indiqué ci-dessous.

Cela entraînera l'injection du texte « Ceci est angulaire » dans la vue. L'expression {{tutorialid}} est la même que celle vue dans la rubrique précédente et elle affichera le chiffre « 1 ».

<h2>Angular</h2>

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

Si le code s'exécute correctement, le résultat suivant s'affichera lorsque vous exécuterez votre code dans le navigateur.

Sortie :

De la sortie,

• Nous pouvons voir que le texte « Ceci est angulaire » s'affiche également lorsque nous cliquons sur l'un des liens du tableau. L'identifiant du sujet est également affiché en même temps que le texte.

chaque URL L'affichage jusqu'ici comporte encore un symbole #. La dernière étape de configuration le supprime.

Activation du routage HTML5

Le routage HTML5 est utilisé pour créer des interfaces propres. URLs. Cela signifie la suppression du hashtag de la URLDonc, le routage URLLorsque le routage HTML5 est utilisé, l'interface s'afficherait comme indiqué ci-dessous.

Exemple.html/Angular/1

Exemple.html/Angular/2

Exemple.html/Angular/3

Ce concept est généralement connu sous le nom de présenter un joli URL à l'utilisateur.

Il y a 2 étapes principales à effectuer pour le routage HTML5.

1. Configuration de $locationProvider
2. Définir notre base pour les liens relatifs

Examinons en détail comment réaliser les étapes mentionnées ci-dessus dans notre exemple.

Étape 1) Ajoutez le code correspondant au module Angular.

1. Ajouter un <base> Balise `<head>` à l'en-tête du document. Ceci est nécessaire pour le routage HTML5 afin que l'application connaisse son emplacement de base.
2. Ajoutez le service $locationProvider. Ce service vous permet de définir le mode HTML5.
3. Définissez le html5Mode du service $locationProvider sur true.

Étape 2) Supprimez tous les symboles # des liens (« Angular/1 », « Angular/2 », « Angular/3 ») pour une meilleure lisibilité. 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>

⚠️ Correction: l'original a déclaré un baseUrl une constante pointant vers un chemin local de l'IDE, sans effet sur html5Mode. AngularJS lit l'emplacement de base à partir de <base href> étiquette. L'original a également injecté $locationProvider sans jamais appeler html5Mode(true), donc le hachage n'a jamais été supprimé.

Si le code s'exécute correctement, le résultat suivant s'affichera lorsque vous exécuterez votre code dans le navigateur.

Sortie :

De la sortie,

• Vous pouvez voir que la balise # n'est pas là lors de l'accès à l'application.

Tout ce qui précède utilise ngRoute, le routeur fourni par l'équipe AngularJS. Ce n'est pas la seule option, et le tableau comparatif ci-dessous explique quand une alternative est plus adaptée.

ngRoute ou ui-router : quel routeur choisir ?

ngRoute est maintenu par l'équipe AngularJS et correspond à un URL directement vers un seul modèle et contrôleur. ui-router est un projet communautaire conçu pour supprimer la principale limitation de ngRoute : il correspond à l'application Etat plutôt que sur le URL seule, ce qui permet à un écran de contenir plusieurs régions routées indépendamment.

Choisissez ngRoute lorsque chaque URL Cela correspond à une vue pleine page, car cela ne nécessite aucune dépendance supplémentaire et l'API complète tient sur une seule page. Choisissez ui-router lorsqu'un écran comporte des panneaux qui naviguent indépendamment, ou lorsque les vues enfants doivent réutiliser des données chargées par un parent. Une migration ultérieure est possible, mais complexe, car les noms d'état sont remplacés. URL des motifs présents dans tous les modèles.

Erreurs de routage courantes dans AngularJS et comment les corriger

La plupart des erreurs de routage affichent une vue ng-view vide plutôt qu'une erreur dans la console, ce qui complique leur diagnostic. Chaque symptôme ci-dessous indique sa cause et sa solution.

• Fournisseur inconnu : $routeProvider : Le fichier angular-route.js n'a jamais été chargé, ou il a été chargé avant angular.min.js. Veuillez d'abord référencer la bibliothèque principale.
• L'affichage reste vide sans erreur : Aucun élément ne porte la directive ng-view, le modèle n'a donc aucun endroit où s'afficher.
• Rien ne se charge lors de la première visite : Aucune route ne correspond au chemin vide. Ajoutez un bloc « alors » avec une valeur « redirectTo ».
• $routeParams est vide : Il manque le deux-points dans le modèle. Il doit se lire '/Angular/:topicId'.
• Modèles 404 après html5Mode : Configurez le serveur pour qu'il réécrive les chemins non appariés vers la page de base et vérifiez que la balise href de base est présente.
• Le contrôleur ne redémarre jamais : Seul le paramètre a changé ; AngularJS a donc réutilisé l’instance du contrôleur au lieu de la reconstruire. Écoutez l’événement `$routeUpdate` au lieu d’attendre que la fonction du contrôleur se déclenche à nouveau.

FAQ