angularjs - AngularJS 中的分布式路由定义

Question

我一般知道 AngularJS 中的路由定义如下：

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: '/' });
});

让我烦恼的是，我想使用 RequireJS 模块化我的应用程序，并且我想在需要的地方注册路由。例如，如果我有一个配置文件模块，我想从那里注册我的路线。同样适用于触点模块。这种集中化让我发疯。我是否在这里遗漏了一点，或者我的问题有什么好的解决方案？

Answer 1

您不必在一处完成 $routeProvider 的配置。根据需要添加路由定义，即当您知道您将使用例如配置文件模块时，您可以添加与其路由对应的 .when() 子句。

Answer 2

您可以简单地将路由配置分布在您的模块上。您唯一必须做的就是在“app”模块中注册所有模块。

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" });
  });