Routage dans AngularJS

Le routage dans  un site web est la  correspondance d'une URL donnée à une page bien déterminé ayant  des caractéristiques bien spécifiques .
Dans AngularJS, une page doit y avoir ces caractéristiques : Le template,  le contrôleur et les variables (de session ou données par l'URL).
Donnant cette exemple : nous avons un url classique : http://www.monexemple.com/index.php?id=14&username=helloworld&password=76&mod=e

Dans AngularJS, notre url change comme suit : http://www.monexemple.com/user/14/edit
Le routage est assuré sous AngularJS en deux méthodes :
1- Méthode 1 : Le module ngRoute
var app = angular
  .module('app', ['ngRoute' ]);
app.config(function ($routeProvider, $httpProvider) { $routeProvider
        .when('/home', {
            templateUrl: '/app/views/home/home.html',
            controller: 'homeController',
       
        })
...
  .otherwise({
            templateUrl: '/app/views/home/home.html',
            controller: 'homeController',
        });
});
Pour plus de détails : https://docs.angularjs.org/tutorial/step_07
1- Méthode 2 : Le module UI-Router
var app = angular
  .module('app', ['ngRoute', 'ui.router' ]);
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        // route to show our basic form (/form)
        .state('home', {
            url: '/home',
            templateUrl: '/app/views/home/home.html',
            controller: 'homeController'
        })
.....
$urlRouterProvider.otherwise('/home');
});

Pour plus de détails : https://scotch.io/tutorials/angular-routing-using-ui-router

Quelle méthode préférez vous ?

Read More