Routage AngularJS

ngRoute Le module aide votre application à devenir une SPA.

Qu'est-ce que le routing en AngularJS ?

Si vous souhaitez naviguer vers différentes pages de l'application tout en la laissant être une SPA (Single Page Application) sans recharger de page, vous pouvez utiliser ngRoute Module.

ngRoute Le module redirige votre application vers différentes pages sans recharger l'application entière.

Exemple

Naviguez vers "red.htm", "green.htm" et "blue.htm" :

<body ng-app="myApp">
<p><a href="#/!">page d'accueil</a></p>
<a href="#!red">rouge</a>
<a href="#!green">vert</a>
<a href="#!blue">bleu</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});
</script>
</body>

Essayer par vous-même

Qu'ai-je besoin ?

Pour que votre application soit prête pour les routes, vous devez inclure le module AngularJS Route :

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>

Ensuite, vous devez inclure ngRoute Ajouter en tant que dépendance du module de l'application :

var app = angular.module("myApp", ["ngRoute"]);

Votre application peut maintenant accéder aux routes fournies $routeProvider le module de route.

Veuillez utiliser $routeProvider Configurer différentes routes dans l'application :

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});

Où est-il allé ?

Votre application a besoin d'un conteneur pour placer le contenu fourni par le routeur.

Ce conteneur est ng-view Directive.

Il peut être inclus de trois manières différentes dans l'application. ng-view Directive :

Exemple

<div ng-view></div>

Essayer par vous-même

Exemple

<ng-view></ng-view>

Essayer par vous-même

Exemple

<div class="ng-view"></div>

Essayer par vous-même

L'application ne peut avoir qu'un ng-view directive, qui sera le placeholder pour toutes les vues fournies par ce routeur.

$routeProvider

Utiliser $routeProvider,vous pouvez définir la page à afficher lorsque l'utilisateur clique sur un lien.

Exemple

Définir $routeProvider

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm"
  })
  .when("/paris", {
    templateUrl : "paris.htm"
  });
});

Essayer par vous-même

dans l'application config à la charge de l'application $routeProvider。L'exécution des méthodes définies dans config travaux enregistrés dans les méthodes.

contrôleur

Utiliser $routeProvider,vous pouvez également définir un contrôleur pour chaque "vue".

Exemple

Ajouter un contrôleur :

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  $scope.msg = "J'aime Londres";
});
app.controller("parisCtrl", function ($scope) {}}
  $scope.msg = "I love Paris";
});

Essayer par vous-même

"london.htm" et "paris.htm" sont des fichiers HTML normaux, dans lesquels vous pouvez ajouter des expressions AngularJS, comme dans d'autres parties HTML de l'application AngularJS.

Ces fichiers ont l'air ainsi :

london.htm

<h1>London</h1>
<h3>London est la capitale de l'Angleterre.</h3>
<p>C'est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 13 millions d'habitants.</p>
<p>{{msg}}</p>

paris.htm

<h1>Paris</h1>
<h3>Paris est la capitale de la France.</h3>
<p>La région de Paris est l'un des plus grands pôles de population en Europe, avec plus de 12 millions d'habitants.</p>
<p>{{msg}}</p>

Le modèle

Dans l'exemple précédent, nous avons utilisé $routeProvider.when La méthode a été utilisée dans templateUrl .

Vous pouvez également utiliser L'attribut L'attribut, qui vous permet d'écrire directement le HTML dans la valeur de l'attribut, au lieu de faire référence à la page.

Exemple

Écrire le modèle :

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    template : "<h1>Main</h1><p>Cliquez sur les liens pour changer ce contenu</p>"
  })
  .when("/banana", {
    template : "<h1>Banane</h1><p>Les bananes contiennent environ 75% d'eau.</p>"
  })
  .when("/tomate", {
    template : "<h1>Tomate</h1><p>Les tomates contiennent environ 95% d'eau.</p>"
  });
});

Essayer par vous-même

la méthode otherwise

Dans l'exemple précédent, nous avons utilisé $routeProvider la méthode when.

Vous pouvez également utiliser otherwise La méthode, lorsqu'aucune autre route ne correspond, deviendra la route par défaut.

Exemple

Si ni le lien "Banana" ni le lien "Tomato" n'a été cliqué, dites-le-leur :

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/banana", {
    template : "<h1>Banane</h1><p>Les bananes contiennent environ 75% d'eau.</p>"
  })
  .when("/tomate", {
    template : "<h1>Tomate</h1><p>Les tomates contiennent environ 95% d'eau.</p>"
  })
  .otherwise({
    template : "<h1>Aucun</h1><p>Nothing has been selected</p>"
  });
});

Essayer par vous-même