Utilise <ng-view></ng-view>.

Dans un fichier routing.js ou app.js, on peut configurer les routes.

angular.module('myApp', ['ngResource'])
  .config(function($routeProvider) {
    $routeProvider.when('/newEvent', {
      templateUrl: 'templates/NewEvent.html',
      controller: 'EventEditController'
    });
    $routeProvider.when('/events', {
      templateUrl: 'templates/EventList.html',
      controller: 'EventListController'
    });
    $routeProvider.when('/event/:eventId', {
      templateUrl: 'templates/EventDetails.html',
      controller: 'EventController'
    });
  });

Dans le fichier HTML qui appelle le template (ex: index.html), les liens ressemblent à :

<a href="#/newEvent">New Event</a>

Le # est nécessaire dans le mode par défaut. Il faut utiliser le mode HTML5 pour s'en débarrasser.

$routeProvider.otherwise({redirectTo: '/events'});

Les paramètres passés dans les routes sont disponibles dans $routeParams. Si on reprend la route /event/:eventId :

$routeProvider.when('/event/:eventId', {
  templateUrl: 'templates/EventDetails.html',
  controller: 'EventController'
});

Le paramètre eventId est passé de l'URL. Disons qu'on a localhost:8080/event/2, eventId aura la valeur 2.

Dans le contrôleur EventController, on peut donc s'en servir, ce sera une propriété de $routeParams du même nom :

angular.module('myApp').controller('EventController',
  function ($scope, eventData, $routeParams) {
    $scope.event = eventData.getEvent($routeParams.eventId);
  }

Si on reprend la route et on y ajout la propriété foo :

$routeProvider.when('/event/:eventId', {
  foo: 'bar',
  templateUrl: 'templates/EventDetails.html',
  controller: 'EventController'
});