Routage AngularJS

Dans ce chapitre, nous allons présenter le routage AngularJS.

Le routage AngularJS nous permet d'accéder à différents contenus via différentes URL.

Avec AngularJS, des applications web monopages multi-vues (SPA) peuvent être implémentées.

Habituellement, notre URL est de la formehttp://example.com/first/page, mais dans les applications web monopages, AngularJS utilise#! + marqueurpour l'implémenter, par exemple:

http://example.com/#!/first
http://example.com/#!/second
http://example.com/#!/third

Remarque: Dans les versions antérieures à Angular 1.6, le routage est implémenté via# + marqueur.

Lorsque nous cliquons sur l'un des liens ci-dessus, l'adresse demandée au serveur est la même (http://example.com/). Parce que le contenu après le signe #! est ignoré par le navigateur lors d'une requête au serveur. Nous devons donc implémenter la fonctionnalité du contenu après le signe #! côté client. Le routage AngularJS utilise#! + marqueurpour nous aider à distinguer différentes pages logiques et à lier différentes pages aux contrôleurs correspondants.

Dans le diagramme ci-dessus, nous pouvons voir que deux URL sont créées: /ShowOrders et /AddNewOrder. Chaque URL a une vue et un contrôleur correspondants.

Voyons maintenant un exemple simple :

Analyse de l'exemple :

• 1. Chargez le fichier JS qui implémente le routage : angular-route.js.

• 2. Incluez le module ngRoute comme module de dépendance du module d'application principal.

  angular.module('routingDemoApp',['ngRoute'])
  

• 3. Utilisez la directive ngView.

  <div ng-view></div>

  Le contenu HTML à l'intérieur de ce div changera en fonction des changements de route.

• 4. Configurez $routeProvider. Le $routeProvider d'AngularJS est utilisé pour définir les règles de routage.

  module.config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/',{template:'这是首页页面'})
          .when('/computers',{template:'这是电脑分类页面'})
          .when('/printers',{template:'这是打印机页面'})
          .otherwise({redirectTo:'/'});
  }]);
  

La fonction config d'un module AngularJS est utilisée pour configurer les règles de routage. En utilisant l'API config, nous demandons d'injecter $routeProvider dans notre fonction de configuration et utilisons l'API $routeProvider.when pour définir nos règles de routage.

$routeProvider nous fournit les fonctions when(path,object) & otherwise(object) pour définir toutes les routes dans l'ordre. La fonction when contient deux paramètres :

• Le premier paramètre est une URL ou une règle regex d'URL.
• Le deuxième paramètre est l'objet de configuration de routage.

---

Objet de configuration de routage

Le routage AngularJS peut également être implémenté via différents modèles.

Le premier paramètre de la fonction $routeProvider.when est une URL ou une règle regex d'URL, et le deuxième paramètre est l'objet de configuration de routage.

Les règles de syntaxe de l'objet de configuration de routage sont les suivantes :

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function ou  array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

Description du paramètre :

• template:

  Si nous avons seulement besoin d'insérer un contenu HTML simple dans ng-view, utilisez ce paramètre :

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  Si nous avons seulement besoin d'insérer un fichier de modèle HTML dans ng-view, utilisez ce paramètre :

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',
  });
  

  Le code ci-dessus va récupérer le contenu du fichier views/computers.html depuis le serveur et l'insérer dans ng-view.

• controller:

  Type Function, string ou array ; la fonction de contrôleur exécutée sur le template courant, générant un nouveau scope.

• controllerAs:

  Type String ; spécifie un alias pour le contrôleur.

• redirectTo:

  L'adresse de redirection.

• resolve:

  Spécifiez les autres modules dont dépend le contrôleur actuel.

Exemple

Autres extensions