AngularJS
Routage à l'aide de ngRoute

Remarques

Exemple de base

Cet exemple montre comment configurer une petite application avec 3 itinéraires, chacun avec sa propre vue et son propre contrôleur, en utilisant la syntaxe controllerAs .

Nous configurons notre routeur à la fonction angulaire .config

1. Nous injectons $routeProvider dans .config
2. Nous définissons nos noms de route à la méthode .when avec un objet de définition de route.
3. Nous fournissons la méthode .when avec un objet spécifiant notre template ou templateUrl , notre controller et nos controllerAs

app.js

angular.module('myApp', ['ngRoute'])
  .controller('controllerOne', function() {
    this.message = 'Hello world from Controller One!';
  })
  .controller('controllerTwo', function() {
    this.message = 'Hello world from Controller Two!';
  })
  .controller('controllerThree', function() {
    this.message = 'Hello world from Controller Three!';
  })
  .config(function($routeProvider) {
    $routeProvider
    .when('/one', {
      templateUrl: 'view-one.html',
      controller: 'controllerOne',
      controllerAs: 'ctrlOne'
    })
    .when('/two', {
      templateUrl: 'view-two.html',
      controller: 'controllerTwo',
      controllerAs: 'ctrlTwo'
    })
    .when('/three', {
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    // redirect to here if no other routes match
    .otherwise({
      redirectTo: '/one'
    });
  });

Ensuite, dans notre HTML, nous définissons notre navigation à l'aide des éléments <a> avec href , pour un nom de route helloRoute nous acheminerons comme <a href="#/helloRoute">My route</a>

Nous fournissons également notre vue avec un conteneur et la directive ng-view pour injecter nos routes.

index.html

<div ng-app="myApp">
  <nav>
    <!-- links to switch routes -->
    <a href="#/one">View One</a>
    <a href="#/two">View Two</a>
    <a href="#/three">View Three</a>
  </nav>
  <!-- views will be injected here -->
  <div ng-view></div>
  <!-- templates can live in normal html files -->
  <script type="text/ng-template" id="view-one.html">
    <h1>{{ctrlOne.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-two.html">
    <h1>{{ctrlTwo.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-three.html">
    <h1>{{ctrlThree.message}}</h1>
  </script>
</div>

Exemple de paramètres de route

Cet exemple étend l'exemple de base en passant des paramètres dans la route afin de les utiliser dans le contrôleur

Pour ce faire, nous devons:

1. Configurez la position et le nom du paramètre dans le nom de la route
2. Injecter le service $routeParams dans notre contrôleur

app.js

angular.module('myApp', ['ngRoute'])
  .controller('controllerOne', function() {
    this.message = 'Hello world from Controller One!';
  })
  .controller('controllerTwo', function() {
    this.message = 'Hello world from Controller Two!';
  })
  .controller('controllerThree', ['$routeParams', function($routeParams) {
    var routeParam = $routeParams.paramName

    if ($routeParams.message) {
        // If a param called 'message' exists, we show it's value as the message
        this.message = $routeParams.message;
    } else {
        // If it doesn't exist, we show a default message
        this.message = 'Hello world from Controller Three!';
    }
  }])
  .config(function($routeProvider) {
    $routeProvider
    .when('/one', {
      templateUrl: 'view-one.html',
      controller: 'controllerOne',
      controllerAs: 'ctrlOne'
    })
    .when('/two', {
      templateUrl: 'view-two.html',
      controller: 'controllerTwo',
      controllerAs: 'ctrlTwo'
    })
    .when('/three', {
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    .when('/three/:message', { // We will pass a param called 'message' with this route
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    // redirect to here if no other routes match
    .otherwise({
      redirectTo: '/one'
    });
  });

Alors, sans apporter de modifications à nos modèles, en ajoutant uniquement un nouveau lien avec un message personnalisé, nous pouvons voir le nouveau message personnalisé à notre avis.

index.html

<div ng-app="myApp">
  <nav>
    <!-- links to switch routes -->
    <a href="#/one">View One</a>
    <a href="#/two">View Two</a>
    <a href="#/three">View Three</a>
    <!-- New link with custom message -->
    <a href="#/three/This-is-a-message">View Three with "This-is-a-message" custom message</a>
  </nav>
  <!-- views will be injected here -->
  <div ng-view></div>
  <!-- templates can live in normal html files -->
  <script type="text/ng-template" id="view-one.html">
    <h1>{{ctrlOne.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-two.html">
    <h1>{{ctrlTwo.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-three.html">
    <h1>{{ctrlThree.message}}</h1>
  </script>
</div>

Définir un comportement personnalisé pour des itinéraires individuels

La manière la plus simple de définir un comportement personnalisé pour des itinéraires individuels serait assez facile.

Dans cet exemple, nous l'utilisons pour authentifier un utilisateur:

1) routes.js : créer une nouvelle propriété (comme requireAuth ) pour n'importe quelle route désirée

angular.module('yourApp').config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'templates/home.html',
            requireAuth: true
        })
        .when('/login', {
            templateUrl: 'templates/login.html',
        })
        .otherwise({
            redirectTo: '/home'
        });
}])

2) Dans un contrôleur de premier niveau qui n’est pas lié à un élément dans la ng-view (pour éviter les conflits avec l’angle angulaire $routeProvider ), vérifiez si la nouvelle newUrl possède la propriété requireAuth et agissez en conséquence

angular.module('YourApp').controller('YourController', ['$scope', 'session', '$location',
    function($scope, session, $location) {

        $scope.$on('$routeChangeStart', function(angularEvent, newUrl) {
            
            if (newUrl.requireAuth && !session.user) {
                // User isn’t authenticated
                $location.path("/login");
            }
            
        });
    }
]);