Exemple de routage AngularJS avec paramètres

Avant d'apprendre comment fonctionne le routage dans Angular, donnons simplement un bref aperçu des applications à page unique.

Que sont 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 ?

Routage dans AngularJS est une méthode qui vous permet de créer des applications à page unique. Il vous permet de créer différentes URL pour différents contenus dans vos applications Web. Le routage AngularJS permet également d'afficher plusieurs contenus en fonction de l'itinéraire choisi. Il est précisé 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ébergeriez la page principale de votre candidature. Supposons que l'application organise un événement et que l'on veuille voir quels sont les différents événements affichés, ou que l'on veuille voir les événements affichés.tails d'un événement particulier ou supprimer un événement. Dans une application Single Page, lorsque le routage est activé, toutes ces fonctionnalités seraient disponibles via le lien suivantwing Gauche

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

  • Ainsi, si l'utilisateur souhaite voir tous les événements, il sera dirigé vers le lien (http://example.com/index.html#ShowEvent), autre
  • 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 souhaitaient 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.

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

Ainsi, comme nous en avons discuté plus tôt, les itinéraires dans AngularJS sont utilisés pour diriger 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'impression qu'il n'a pas quitté la page.

Afin de mettre en œuvre le routage, suivezwing les principales étapes doivent être mises en œuvre dans votre application dans un ordre spécifique.

  1. Référence à angulaire-route.js. C'est un JavaScript fichier développé par Google qui possède toutes les fonctionnalités de routage. Celui-ci doit être placé dans votre application afin qu'il puisse référencer tous les modules principaux requis pour le routage.
  2. La prochaine étape importante consiste à ajouter une dépendance au module ngRoute depuis votre application. Cette dépendance est requise pour que la fonctionnalité de routage puisse être utilisée au sein de l'application. Si cette dépendance n'est pas ajoutée, alors on ne pourra pas utiliser le routage dans l'application angulaire.JS.

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']);
  1. La prochaine étape serait de configurer votre $routeProvider. Ceci est nécessaire pour fournir les différentes routes dans votre application. Vous trouverez ci-dessous la syntaxe générale de cette instruction qui est très explicite. Il indique simplement que lorsque le chemin concerné est choisi, utilisez l'itinéraire pour afficher la vue donnée à l'utilisateur.
when(path, route)
  1. 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/>
  1. 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.

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,

Nous présenterons 2 liens à l'utilisateur,

  • La première consiste à afficher les sujets d'un JS angulaire 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.

Routage AngularJS

Ce fichier d'itinéraire est nécessaire pour utiliser les fonctionnalités permettant d'avoir plusieurs itinéraires et vues. Ce fichier peut être téléchargé à partir du site Web angulaire.JS.

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

Routage AngularJS

É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 ».

Routage AngularJS

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

Routage AngularJS

Explication du code :

  1. La première étape consiste à s’assurer d’inclure le « module ngRoute ». Une fois 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.
  2. Le $routeprovider est un service qu'angular utilise pour écouter en arrière-plan les routes appelées. Ainsi, lorsque l'utilisateur clique sur un lien, le fournisseur d'itinéraire dans AngularJS le détectera et décidera ensuite de l'itinéraire à emprunter.
  3. 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.
  4. 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, 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 les descriptions des sujets pour chaque cours. La variable tableau 'tutorial' est ajoutée à l'objet scope pour chaque contrôleur.

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

É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. Utiliser la directive ng-repeat pour parcourir chaque paire clé-valeur définie dans la variable du didacticiel.
  2. Affichage du nom et de la description de chaque paire clé-valeur.
  • Angulaire.html

Routage AngularJS

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

Routage AngularJS

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

Si le code est exécuté avec succès, la suitewing La sortie sera affichée lorsque vous exécutez votre code dans le navigateur.

Sortie :

Routage AngularJS

Si vous cliquez sur le lien AngularJS Topics, la sortie ci-dessous sera affichée.

Routage AngularJS

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 l'URL de la page reste la même, c'est uniquement 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 l'itinéraire (qui dans notre cas est « Angulaire » comme le montre l'image ci-dessus) et la page HTML principale (Sample.html)

Routage AngularJS

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.

L'itinéraire par défaut est créé en ajoutant le suiviwing condition lors de la définition du service $routeProvider.

La syntaxe ci-dessous signifie simplement rediriger vers une autre page 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.

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

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

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

Explication du code :

  1. Ici, nous utilisons le même code que ci-dessus, la seule différence est que nous utilisons l'autrewise 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 suitewing La sortie sera affichée lorsque vous exécutez votre code dans le navigateur.

Sortie :

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

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'autrewise' dans la fonction $routeProvider et charge la vue '/Angular'.

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

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 de routage angulaire,

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

La syntaxe de l'apparence des paramètres dans l'URL est présentée ci-dessous :

HTMLPage#/route/paramètre

Ici, vous remarquerez que le paramètre est passé après la route dans l'URL.

Ainsi, dans notre exemple de routes AngularJS, ci-dessus pour les sujets Angular JS, nous pouvons transmettre un paramètre comme indiqué ci-dessous

Exemple.html#/Angular/1

Exemple.html#/Angular/2

Exemple.html#/Angular/3

Ici, les paramètres 1, 2 et 3 peuvent en fait représenter le topicid.

Voyons en détail comment implémenter la route angulaire avec paramètre :

Étape 1) Ajoutez le suiviwing code à votre vue

  1. Ajouter un tableau pour afficher tous les sujets du cours Angular JS à l'utilisateur
  2. Ajouter une ligne de tableau pour showing le sujet « Contrôleurs ». Pour cette ligne, remplacez la balise href par « Angular/1 », ce qui signifie que lorsque l'utilisateur clique sur ce sujet, le paramètre 1 sera transmis dans l'URL avec la route.
  3. Ajouter une ligne de tableau pour showing le sujet « Modèles ». Pour cette ligne, remplacez la balise href par « Angular/2 », ce qui signifie que lorsque l'utilisateur clique sur ce sujet, le paramètre 2 sera transmis dans l'URL avec la route.
  4. Ajouter une ligne de tableau pour showing le sujet « Directives ». Pour cette ligne, remplacez la balise href par « Angular/3 », ce qui signifie que lorsque l'utilisateur clique sur ce sujet, le paramètre 3 sera transmis dans l'URL avec la route.

Accéder aux paramètres depuis la route AngularJS

Étape 2) Ajoutez l'identifiant du sujet dans la fonction de service Routeprovider
Dans la fonction de service routeprovider, ajoutez le :topicId pour indiquer que tout paramètre transmis dans l'URL après la route doit être attribué à la variable topicId.

Accéder aux paramètres depuis la route AngularJS

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

  1. 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 de route transmis dans l'URL.
  2. Le paramètre « routeParams » a une référence à l'objet topicId, qui est passé en tant que paramètre de route. 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é à notre avis via la variable tutorielid.

Accéder aux paramètres depuis la route 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>

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

Accéder aux paramètres depuis la route AngularJS

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Si le code est exécuté avec succès, la suitewing La sortie sera affichée lorsque vous exécutez votre code dans le navigateur.

Sortie :

Accéder aux paramètres depuis la route AngularJS

Dans l'écran de sortie,

  • Si vous cliquez sur le sujet Details lien pour le premier sujet, le numéro 1 est ajouté à l'URL.
  • Ce numéro sera ensuite pris comme argument « routeparam » par le service routeprovider Angular.JS et pourra ensuite être consulté par notre contrôleur.

Comment utiliser le service angulaire $route

Le service $route vous permet d'accéder aux propriétés de la route. Le service $route est disponible en 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 présentée ci-dessous ;

myApp.controller('MyController',function($scope,$route)
  1. myApp est le module angulaire.JS défini pour vos applications
  2. MyController est le nom du contrôleur défini pour votre application
  3. Tout comme la variable $scope est mise à disposition pour votre application, qui est utilisée pour transmettre des informations du contrôleur à la vue. Le paramètre $route permet d'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 « montexte », qui contiendra la chaîne « Ceci est angulaire ».
  • Nous allons attacher cette variable à notre itinéraire. Et later nous allons accéder à cette chaîne à partir de notre contrôleur en utilisant le service $route, puis utiliser l'objet scope pour l'afficher à notre avis.

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

Service $route 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 en angulaire, 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.

Service $route angulaire

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

É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 ».

Service $route angulaire

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Si le code est exécuté avec succès, la suitewing La sortie sera affichée lorsque vous exécutez votre code dans le navigateur.

Sortie :

Service $route angulaire

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é, apparaîtront comme indiqué ci-dessous

Exemple.html/Angular/1

Exemple.html/Angular/2

Exemple.html/Angular/3

Ce concept est normalement connu pour présenter une jolie 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 effectuer les étapes mentionnées ci-dessus dans notre exemple ci-dessus.

Étape 1) Ajoutez le code correspondant au module angulaire

  1. 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.
  2. Ajoutez les services $locationProvider. Ce service vous permet de définir le html5Mode.
  3. Définissez le html5Mode du service $locationProvider sur true.

Activation du routage HTML5

Étape 2) Supprimez toutes les balises # pour les liens (« Angular/1 », « Angular/2 », « Angular/3 ») pour créer une URL facile à lire.

Activation du routage 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 le code est exécuté avec succès, la suitewing La sortie sera affichée lorsque vous exécutez votre code dans le navigateur.

Sortie :

Activation du routage HTML5

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 angulaire.JS. Il est utilisé pour déterminer quelle sera la vue par défaut à afficher à 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 accessibles à l'aide du paramètre $routeParams dans le contrôleur.
  • Le service $route peut être utilisé pour définir des paires clé-valeur personnalisées dans la route, accessibles ensuite depuis la vue.
  • Le routage HTML5 est utilisé pour supprimer la balise #tag de l'URL de routage en angulaire pour former une jolie URL