Expliquez brièvement la définition et l'utilisation d'AngularJS Routing_AngularJS

Dans les applications à page unique, passer d'une vue à l'autre est particulièrement important. À mesure que les applications deviennent de plus en plus complexes, nous avons besoin d'une méthode pour contrôler avec précision quand et quelle page doit être présentée à l'utilisateur.

Nous pouvons prendre en charge le basculement entre différentes pages en introduisant différents modèles dans la page principale, mais l'inconvénient de le faire est que de plus en plus de codes intégrés rendent la gestion finalement difficile.

Nous pouvons intégrer de nombreux modèles dans la vue via la directive ng-include, mais nous avons un meilleur moyen de gérer cette situation. Nous pouvons diviser la vue en vues de mise en page et de modèle, puis en fonction de l'URL d'accès utilisateur spécifique. pour afficher la vue souhaitée

Nous pouvons rassembler ces "pièces" dans un modèle de mise en page

AngularJS implémente l'idée ci-dessus en déclarant des routes sur $routeProvider (fournisseur du service $route)

En utilisant $routeProvider, nous pouvons mieux utiliser l'API d'historique de navigation et permettre aux utilisateurs d'enregistrer le chemin actuel comme signet pour une utilisation future

Pour configurer le routage dans notre application, nous devons faire deux choses : Premièrement, nous devons indiquer où nous allons stocker le modèle de mise en page où le nouveau contenu de la page sera stocké. Par exemple, si nous voulons ajouter des en-têtes et des pieds de page à toutes les pages, nous pouvons concevoir le modèle de mise en page comme ceci :

<header>
 <h1>Header</h1>
</header>
<div class="content">
 <div ng-view></div>
</div>
<footer>
 <h5>Footer</h5>
</footer>

La directive ng-view utilisera $routeProvider à grande vitesse pour rendre le modèle

Deuxièmement, nous devons configurer nos informations de routage, nous allons configurer $routeProvider dans l'application

$routeProvider propose deux méthodes pour gérer le routage : quand et autrement. La méthode lorsqu'elle reçoit deux paramètres, le premier est défini $location.path() (Il n'y a aucun problème à utiliser directement "//")

.

Définition
Il est très simple de définir des routes, il suffit d'injecter la dépendance ngRoute dans le module principal de notre application

angular.module('myApp', ['ngRoute'])
 .config(function($routeProvider) {});

Maintenant, nous pouvons définir des itinéraires pour l'application. $routeProvider est injecté dans la méthode .config() du module de routage. Le code ci-dessus nous montre deux méthodes pour définir des routes.

quand()

La méthode when() a deux paramètres, l'URL du navigateur que nous voulons faire correspondre et l'objet de l'opération de routage. Généralement, la route principale est souvent représentée par "/", et les paramètres d'URL peuvent également être définis dans le contrôleur, $routeParams est utilisé pour obtenir les paramètres d'URL.

templateUrl : modèle d'affichage représentant le saut d'itinéraire

contrôleur : contrôleur

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
   $routeProvider
    .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
    })
    .when('/day/:id', {
     templateUrl: 'views/day.html',
     controller: 'DayCtrl'
    })

sinon()

sinon() définit l'itinéraire vers lequel accéder lorsque l'application ne trouve pas l'itinéraire spécifié

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
  .when('/', {
   templateUrl: 'views/main.html',
   controller: 'MainCtrl'
  })
  .when('/day/:id', {
   templateUrl: 'views/day.html',
   controller: 'DayCtrl'
  })
  .otherwise({
   redirectTo: '/'
  });
})

Utiliser
Comment utiliser la route définie ? Nous devons indiquer à angulaire quelle partie de la page nous voulons convertir, ce qui nécessite l'utilisation de la directive ng-view

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

De cette façon, seul

sera mis à jour et l'en-tête/pied de page restera toujours inchangé