angularjs路由到不同模块的控制器

时间:2015-02-03 12:28:25

标签: javascript angularjs web-applications requirejs

目前我们正在创建新的Web应用程序基础架构。

我们最初加载一个仪表板,它实际上是显示登录用户和菜单集的顶栏。单击每个菜单将在主要部分中加载屏幕(主要是粗略屏幕)。我们计划将每个crud屏幕及其组件(服务,控制器等)放在一个单独的模块中,该模块将相互封装所有屏幕,例如,如果有78个屏幕,则每个屏幕将有78个单独的模块。我们还使用了使用Requirejs动态加载这些依赖项的计划。

然而,问题是我们需要将菜单与每个屏幕的每个模块相关联。通常在基于单个模块的应用程序中,它将像这样完成。

config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/Book/load', {
    templateUrl: 'book.html',
    controller: 'BookController'
  })
  .when('/Screen/load', {
    templateUrl: 'chapter.html',
    controller: 'ChapterController'
  });

BookController和ChapterController将在SAME模块中。

但是在我们的例子中,BookController将在Book屏幕的BookModule中,同样适用于ChapterController。并且路由将位于初始主模块中,例如AppModule,它最初在启动期间加载仪表板。

我们如何说例如链接AppModule和每个屏幕的每个模块的路由(例如在本例中为BookController和ChapterController),记住我们需要在使用requirejs时需要动态加载模块。

(P.S:我们基本上根据我们系统中的功能通常等于屏幕的功能来细分我们的应用程序)

对于我们可以最好地构建我们的应用程序的任何其他方式的任何建议,包括对上述问题的答案,将非常感谢。

此致 弥兰陀

2 个答案:

答案 0 :(得分:0)

为什么在初始主模块中有路由配置?这会在您的模块之间产生不必要的耦合(即,您的初始模块必须知道每个模块的所有可能路径),这有点破坏了将代码移动到模块中的目的。

每个模块都有自己的路由配置,这些配置将在加载模块时生效。 (一致的命名约定可以帮助避免不相关模块的路由之间的冲突)

在配置routeProvider时,您可以使用路由的 resolve 属性来使用延迟加载机制:此处引用的资源将在routeChange事件发生之前解析,这使您可以等待任何承诺解析或requireJS加载文件。 This blogpost可能会在这方面提供帮助。

答案 1 :(得分:0)

到目前为止,据我所知,在运行时动态加载模块然后将它们合并到AngularJS应用程序中,没有任何机制。您可以将应用程序分解为通过requirejs加载的78个单独模块,但是您仍然需要一个主要模块,其中所有其他78个作为依赖项。这是主要模块,然后您将配置所有路由。

新的AngularJS路由器正在进行工作,它借鉴了其他更灵活的路由器(即ui-router等),这将允许您正在谈论的模块的动态加载,但据我所知在AngularJS 1.4之前不可用。