Avant de commencer le routage, ayons juste un aperçu rapide des applications à une seule page.
Qu'est-ce que les applications à page unique?
Les applications à page unique ou (SPA) sont des applications Web qui chargent une seule page HTML et mettent à jour dynamiquement la page en fonction de l'interaction de l'utilisateur avec l'application Web.
Qu'est-ce que le routage dans AngularJS?
Dans AngularJS, le routage est ce qui vous permet de créer des applications à page unique.
- Les routes AngularJS vous permettent de créer différentes URL pour différents contenus dans votre application.
- Les routes AngularJS permettent d'afficher plusieurs contenus en fonction de la route choisie.
- Une route est spécifiée dans l'URL après le signe #.
Prenons un exemple de site hébergé via l'URL http://example.com/index.html .
Sur cette page, vous hébergez la page principale de votre application. Supposons si l'application organisait un événement et que l'on voulait voir quels sont les différents événements affichés, ou si l'on voulait voir les détails d'un événement particulier ou supprimer un événement. Dans une application à page unique, lorsque le routage est activé, toutes ces fonctionnalités seraient disponibles via les liens suivants
http://example.com/index.html#ShowEvent
http://example.com/index.html#DisplayEvent
http://example.com/index.html#DeleteEvent
Le symbole # serait utilisé avec les différents itinéraires (ShowEvent, DisplayEvent et DeleteEvent).
- Donc, si l'utilisateur voulait voir tous les événements, il serait dirigé vers le lien ( http://example.com/index.html#ShowEvent ), sinon
- S'ils voulaient simplement voir un événement particulier, ils seraient redirigés vers le lien ( http://example.com/index.html#DisplayEvent ) ou
- S'ils voulaient supprimer un événement, ils seraient dirigés vers le lien http://example.com/index.html#DeleteEvent .
Notez que l'URL principale reste la même.
Dans ce didacticiel, vous apprendrez-
- Ajout d'une route angulaire ($ routeProvider)
- Créer un itinéraire par défaut
- Accéder aux paramètres de l'itinéraire
- Utilisation du service de route Angular $
- Activation du routage HTML5
Ajout d'une route angulaire ($ routeProvider)
Ainsi, comme nous l'avons vu précédemment, les routes dans AngularJS sont utilisées pour acheminer l'utilisateur vers une vue différente de votre application. Et ce routage se fait sur la même page HTML afin que l'utilisateur ait l'expérience qu'il n'a pas quitté la page.
Afin de mettre en œuvre le routage, les étapes principales suivantes doivent être implémentées dans votre application dans un ordre spécifique.
- Référence à angular-route.js. Il s'agit d'un fichier JavaScript développé par Google qui possède toutes les fonctionnalités de routage. Celui-ci doit être placé dans votre application afin qu'elle puisse référencer tous les modules principaux nécessaires au routage.
-
La prochaine étape importante consiste à ajouter une dépendance au module ngRoute à partir de votre application. Cette dépendance est requise pour que la fonctionnalité de routage puisse être utilisée dans l'application. Si cette dépendance n'est pas ajoutée, alors on ne pourra pas utiliser le routage dans l'application angular.JS.
Voici la syntaxe générale de cette déclaration. Ceci est juste une déclaration normale d'un module avec l'inclusion du mot-clé ngRoute.
var module = angular.module("sampleApp", ['ngRoute']);
- La prochaine étape serait de configurer votre $ routeProvider. Ceci est nécessaire pour fournir les différentes routes dans votre application.
Voici la syntaxe générale de cette déclaration qui est très explicite. Il indique simplement que lorsque le chemin approprié est choisi, utilisez la route pour afficher la vue donnée à l'utilisateur.
when(path, route)
- 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.
Route 1
- Enfin serait l'inclusion de la directive ng-view, qui serait normalement dans une balise div. Cela serait utilisé pour injecter le contenu de la vue lorsque la route appropriée est choisie.
Maintenant, regardons un exemple de routage en utilisant les étapes mentionnées ci-dessus.
Dans notre exemple,
Nous présenterons 2 liens vers l'utilisateur,
- L'un consiste à afficher les sujets d'un cours Angular JS et l'autre au cours Node.js.
- Lorsque l'utilisateur clique sur l'un des liens, les sujets de ce cours s'affichent.
Étape 1) Incluez le fichier angular-route comme référence de script.
Ce fichier d'itinéraire est nécessaire pour utiliser les fonctionnalités de plusieurs itinéraires et vues. Ce fichier peut être téléchargé à partir du site Web angular.JS.
Étape 2) Ajoutez des balises href qui représenteront des liens vers "Angular JS Topics" et "Node JS Topics".
É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 "Angular JS Topics" ou "Node JS Topics".
Étape 4) Dans votre balise de script pour AngularJS, ajoutez le "module ngRoute" et le service "$ routeProvider".
Explication du code:
- La première étape consiste à s'assurer d'inclure le «module ngRoute». Avec cela en place, Angular gérera automatiquement le routage dans votre application. Le module ngRoute développé par Google possède toutes les fonctionnalités permettant le routage. En ajoutant ce module, l'application comprendra automatiquement toutes les commandes de routage.
- Le $ routeprovider est un service que Angular utilise pour écouter en arrière-plan les routes qui sont appelées. Ainsi, lorsque l'utilisateur clique sur un lien, le fournisseur d'itinéraire le détecte et décide ensuite de l'itinéraire à emprunter.
- Créer une route pour le lien angulaire - Ce bloc signifie que lorsque vous cliquez sur le lien angulaire, injectez le fichier Angular.html et utilisez également le contrôleur 'AngularController' pour traiter toute logique métier.
- Créer une route pour le lien Node - Ce bloc signifie que lorsque vous cliquez sur le lien Node, injectez le fichier Node.html et utilisez également le contrôleur 'NodeController' pour traiter toute logique métier.
Étape 5) Ensuite, ajoutez 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 pour chaque cours. La variable de tableau 'tutorial' est ajoutée à l'objet scope pour chaque contrôleur.
Event Registration Guru99 Global Event
É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.
- Utilisation de la directive ng-repeat pour parcourir chaque paire clé-valeur définie dans la variable du didacticiel.
- Affichage du nom et de la description de chaque paire clé-valeur.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Si vous cliquez sur le lien Sujets AngularJS, la sortie ci-dessous sera affichée.
La sortie montre clairement que,
- Lorsque le lien "Angular JS Topics" est cliqué, 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 de portée défini dans AngularController.
- Quand on clique sur les rubriques Node.js, le même résultat aura lieu, et la vue des rubriques Node.js se manifestera.
- Notez également que l'URL de la page reste la même, ce n'est que l'itinéraire après la balise # qui change. Et c'est le concept des applications d'une seule page. La balise #hash dans l'URL est un séparateur qui sépare la route (qui dans notre cas est 'Angular' comme indiqué dans l'image ci-dessus) et la page HTML principale (Sample.html)
Créer un itinéraire par défaut
Le routage dans AngularJS fournit é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 de rediriger vers une page différente si l'une des routes existantes ne correspond pas.
otherwise ({redirectTo: 'page'});
Utilisons le même exemple ci-dessus et ajoutons une route par défaut à notre service $ routeProvider.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Explication du code:
- Ici, nous utilisons le même code que ci-dessus avec la seule différence que nous utilisons l'instruction else et l'option "redirectTo" pour spécifier quelle vue doit être chargée si aucune route n'est spécifiée. Dans notre cas, nous voulons que la vue '/ Angular' soit affichée.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie,
- Vous pouvez clairement voir que la vue par défaut affichée est la vue angulaire JS.
- En effet, lorsque la page se charge, elle passe à l'option «autrement» dans la fonction $ routeProvider et charge la vue «/ Angular».
Accéder aux paramètres de l'itinéraire
Angular fournit également la fonctionnalité permettant de fournir des paramètres lors du routage. Les paramètres sont ajoutés à la fin de la route dans l'URL, par exemple http: //guru99/index.html#/Angular/1 . Dans cet exemple
- , http: //guru99/index.html est l'URL de notre application principale
- Le symbole # est le séparateur entre l'URL de l'application principale et la route.
- Angular est notre route
- Et enfin '1' est le paramètre qui s'ajoute à notre route
La syntaxe de l'apparence des paramètres dans l'URL est indiquée ci-dessous:
HTMLPage # / route / paramètre
Ici, vous remarquerez que le paramètre est passé après la route dans l'URL.
Donc, dans notre exemple, ci-dessus pour les sujets Angular JS, nous pouvons passer un paramètre comme indiqué ci-dessous
Sample.html # / Angular / 1
Sample.html # / Angular / 2
Sample.html # / Angular / 3
Ici, les paramètres de 1, 2 et 3 peuvent en fait représenter le topicid.
Regardons en détail comment nous pouvons implémenter cela.
Étape 1) Ajoutez le code suivant à votre vue
-
Ajouter un tableau pour afficher tous les sujets du cours Angular JS à l'utilisateur
-
Ajoutez une ligne de tableau pour afficher la rubrique «Contrôleurs». Pour cette ligne, changez la balise href en "Angular / 1", ce qui signifie que lorsque l'utilisateur clique sur ce sujet, le paramètre 1 sera transmis dans l'URL avec l'itinéraire.
-
Ajoutez une ligne de tableau pour afficher le sujet «Modèles». Pour cette ligne, changez la balise href en "Angular / 2", ce qui signifie que lorsque l'utilisateur clique sur ce sujet, le paramètre 2 sera transmis dans l'URL avec l'itinéraire.
-
Ajoutez une ligne de tableau pour afficher le sujet «Directives». Pour cette ligne, changez la balise href en "Angular / 3", ce qui signifie que lorsque l'utilisateur clique sur ce sujet, le paramètre 3 sera transmis dans l'URL avec l'itinéraire.
Étape 2) Dans la fonction de service routeprovider, ajoutez: topicId pour indiquer que tout paramètre passé dans l'URL après la route doit être affecté à la variable topicId.
Étape 3) Ajoutez le code nécessaire au contrôleur
- Assurez-vous d'ajouter d'abord "$ 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 d'itinéraire passés dans l'URL.
- Le paramètre "routeParams" a une référence à l'objet topicId, qui est passé en tant que paramètre d'itinéraire. Ici, nous attachons la variable '$ routeParams.topicId' à notre objet scope en tant que variable '$ scope.tutotialid'. Ceci est fait pour qu'il puisse être référencé dans notre vue via la variable tutorialid.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Étape 4) Ajoutez l'expression pour afficher la variable tutorialid dans la page Angular.html.
Anguler
{{tutorialid}}
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Dans l'écran de sortie,
- Si vous cliquez sur le lien Détails du sujet pour le premier sujet, le numéro 1 est ajouté à l'URL.
- Ce numéro sera alors pris comme argument "routeparam" par le service de fournisseur de route Angular.JS et sera alors accessible par notre contrôleur.
Utilisation du service de route Angular $
Le service $ route vous permet d'accéder aux propriétés de l'itinéraire. Le service $ route est disponible en tant que paramètre lorsque la fonction est définie dans le contrôleur. La syntaxe générale de la façon dont le paramètre $ route est disponible à partir du contrôleur est indiquée ci-dessous;
myApp.controller('MyController',function($scope,$route)
- myApp est le module angular.JS défini pour vos applications
- MyController est le nom du contrôleur défini pour votre application
- Tout comme la variable $ scope est mise à disposition pour votre application, qui est utilisée pour passer des informations du contrôleur à la vue. Le paramètre $ route est utilisé pour accéder aux propriétés de la route.
Voyons comment nous pouvons utiliser le service $ route.
Dans cet exemple,
- Nous allons créer une simple variable personnalisée appelée "mytext", qui contiendra la chaîne "This is angular".
- Nous allons attacher cette variable à notre route. Et plus tard, nous allons accéder à cette chaîne depuis notre contrôleur en utilisant le service $ route, puis utiliser l'objet scope pour l'afficher dans notre vue.
Voyons donc les étapes à suivre pour y parvenir.
Étape 1) Ajoutez une paire clé-valeur personnalisée à l'itinéraire. Ici, nous ajoutons une clé appelée «mytext» et lui attribuons la valeur «This is angular».
Étape 2) Ajoutez le code correspondant au contrôleur
- Ajoutez le paramètre $ route à la fonction de contrôleur. Le paramètre $ route est un paramètre clé défini en angular, qui permet d'accéder aux propriétés de la route.
- La variable "mytext" qui a été définie dans la route est accessible via la référence $ route.current. Ceci est ensuite assigné à la variable 'text' de l'objet scope. La variable de texte est alors accessible à partir de la vue en conséquence.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Étape 3) Ajoutez une référence à la variable de texte à partir de l'objet de portée en tant qu'expression. Cela 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 nombre «1».
Anguler
{{text}}
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
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.
Activation du routage HTML5
Le routage HTML5 est essentiellement utilisé pour créer une URL propre. Cela signifie la suppression du hashtag de l'URL. Ainsi, les URL de routage, lorsque le routage HTML5 est utilisé, apparaissent comme indiqué ci-dessous
Sample.html / Angulaire / 1
Sample.html / Angular / 2
Sample.html / Angular / 3
Ce concept est normalement connu comme présentant une jolie URL à l'utilisateur.
Il y a 2 étapes principales à effectuer pour le routage HTML5.
- Configuration de $ locationProvider
- Définir notre base pour les liens relatifs
Examinons en détail comment effectuer les étapes mentionnées ci-dessus dans notre exemple ci-dessus
Étape 1) Ajoutez le code correspondant au module angulaire
- Ajouter une constante baseURL à l'application - Ceci est requis pour le routage HTML5 afin que l'application sache quel est l'emplacement de base de l'application.
- Ajoutez les services $ locationProvider. Ce service vous permet de définir le html5Mode.
- Définissez le html5Mode du service $ locationProvider sur true.
Étape 2) Supprimez tous les #tags pour les liens ('Angular / 1', 'Angular / 2', 'Angular / 3') pour créer une URL facile à lire.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie,
- Vous pouvez voir que la balise # n'est pas là lors de l'accès à l'application.
Résumé
- Le routage est utilisé pour présenter différentes vues à l'utilisateur sur la même page Web. Il s'agit essentiellement du concept utilisé dans les applications à page unique qui sont implémentées pour presque toutes les applications Web modernes.
- Une route par défaut peut être configurée pour le routage angular.JS. Il est utilisé pour déterminer quelle sera la vue par défaut à montrer à l'utilisateur
- Les paramètres peuvent être transmis à la route via l'URL en tant que paramètres de route. Ces paramètres sont ensuite accédés par la suite en utilisant le paramètre $ routeParams dans le contrôleur
- Le service $ route peut être utilisé pour définir des paires clé-valeur personnalisées dans l'itinéraire qui peuvent ensuite être accédées par la suite à partir de la vue
- Le routage HTML5 est utilisé pour supprimer le #tag de l'URL de routage en angulaire pour former une jolie URL