Basics

Routes in Angular.js are configured with $routeProvider as in the example below. The $routeProvider allows you to connect a controller, view template, and URL.

The example below adapted from the Angular docs shows a Route '/Book/:bookId/ that maps to the controller named BookCntl and the template book.html

After pressing the play icon, clicking the 'Moby' link displays various internal Angular objects on the page including the location path and route params.

The $routeProvider when method takes a string for the URL to match and object that tells Angular how to deal serve this route with a controller and associated template.

HTML5Mode

The $locationProvider.html5Mode setting is enabled which means that modern browsers will not show #! in the address bar. The alternative, hashbang mode is the default meaning #! will appear in all URLs. In HTML5 mode, the HTML5 History API is used by the $location service to interact with the browser URL address. With HTML5 mode enabled, you'll need to ensure that all requests to your base URL return the bootstrapping html page (typically index.html). This change will need to be made on your server.

Wildcards
* can be utilized in the path parameter to eagerly capture named fragments of the route. In the example, below, we have set up a route called '/Book/:bookTitle*/:pageNum' and a link 'Book1' that resolves to Book/Long/Title/Here/56. Clicking on the link, sets up the $routeParams object to contain bookTitle => Long/Title/Here and pageNum => 56. Optional named paramters can be specified by using ? such as (:footnote?)

Resolve
The $routeProvider accepts a resolve object that can be used to load data and resolve promises before the route is resolved. The example below allows for an 'authors' service to be injected into the controller. This is a simple example that utilizes $timeout and $q to pretend to return the authors after a two second delay. 


Docs
The $routeProvider documentation and example tutorial cover more details behind the API and its usage.