Distributed route definition in AngularJS

Question

I generally know that route definitions in AngularJS happen as follows:

var app = angular.module('app', []);
app.config(function ($routeProvider) {
$routeProvider.when("/", { templateUrl: "/partials/home.html" }).
               when("/profile", { templateUrl: "/partials/profile.html" }).
               when("/contact", { templateUrl: "/partials/contact.html" }).
               otherwise({ redirectTo: '/' });
});

What annoys me is that I want to modularize my application using RequireJS and I want to register routes where they are needed. For example, if I have a profile module I want to register my route from there. Same applies for the contact module. This centralization drives me crazy. Am I missing a point here or is there any good solution for my problem?

@Stewie You are right - I did not find this one – Leo Selig Aug 05 '13 at 18:15 — Leo Selig, Aug 05 '13 at 18:15

score 1 · Answer 1 · answered Jul 28 '13 at 14:47

1

You don't have to do the config of the $routeProvider all in one place. Go adding route definitions as need arises i.e. when you know you'll be using for example the profile module, you can then add the .when() clause that corresponds to its route.

answered Jul 28 '13 at 14:47

Thalis K.

7,363
6
39
54

score 1 · Accepted Answer · answered Jul 29 '13 at 07:49

You can simply distribute the route configuration over your modules. The only thing you must do, register all modules in your "app"-module.

angular.module('app', ['app.profile', 'app.contact'])
  .config(function ($routeProvider) {
    $routeProvider.when("/", { templateUrl: "/partials/home.html" })
                  .otherwise({ redirectTo: '/' });
  });

angular.module('app.profile', [])
  .config(function ($routeProvider) {
    $routeProvider.when("/profile", { templateUrl: "/partials/profile.html" });
  });

angular.module('app.contact', [])
  .config(function ($routeProvider) {
    $routeProvider.when("/contact", { templateUrl: "/partials/contact.html" });
  });

Distributed route definition in AngularJS

2 Answers2