Skip to content

Route provider basic configuration

Jens Melgaard edited this page Jul 29, 2013 · 6 revisions

In it's basics the configuration of the '$routeProvider' is done in the exact same way as the original version from Angular. And combined with the Legacy module, it should be able to replace any current implementation without having to change anything.

Here is a very basic example of configuring routes.

angular.module('phonecat', ['dotjem.routing']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider
      .when('/phones', { /*.. Parameters for the route ..*/ })
      .when('/phones/:phoneId', { /*.. Parameters for the route ..*/ })
      .otherwise( { redirectTo: '/phones' } );
}]);

And when the URL matches any of the above routes a $routeChangeSuccess event is raised, just like before. Beyond that this very basic example doesn't do much more.

With States

Using this with the $stateProvider simply configure each route with the appropriate state to activate.

angular.module('phonecat', ['dotjem.routing']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider
      .when('/phones', { state: 'phones' })
      .when('/phones/:phoneId', { state: 'phones.detail' })
      .otherwise( { redirectTo: '/phones' } );
}]);

When using the $stateProvider there is an easier way to bind routes to states, but this is covered under the State Provider.

With Legacy

Using this with the Legacy module, the old way of configuring templates and controllers become possible, and this will work with the ng-view directive. Where as the $viewProvider uses the new ui-view directive instead.

angular.module('phonecat', ['dotjem.routing', 'dotjem.routing.legacy']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider
      .when('/phones', {
          templateUrl: 'partials/phone-list.html', 
          controller: PhoneListCtrl})
      .when('/phones/:phoneId', {
          templateUrl: 'partials/phone-detail.html', 
          controller: PhoneDetailCtrl})
      .otherwise({redirectTo: '/phones'});
}]);
Clone this wiki locally