javascript - 如何将 AngularJS 应用程序拆分为更小的模块并正确处理路由？

Question

将 AngularJS 应用程序分割成更小的片段/模块的最佳方法是什么？ 例如，如果我有一篇博客文章并启用了评论，我想我可以将其分解为类似的模块“帖子”和“评论”(？)(也许不是最好的例子，但其想法是将应用程序逻辑拆分为单独的模块，而不是构建一个巨大的单模块应用程序)。

我尝试在单独的 DOM 节点中引导两个模块，并相应地在两个模块中使用路由。有几个问题:

• 作为一个“单页”应用程序，我正在引导评论模块，即使在首页上没有使用它，也可以使用它。
• 由于我无法在 ng-app 中使用多个 ng-views，我被迫在 index.html View 中为我的模块编写所有包装器并引导它们？应该是这样吗？好像有点不对劲。我应该如何/在哪里引导这些？
• 对于路由有什么建议吗？我应该将它们分散到模块中还是应该以某种方式将它们组合在一起？ (创建一个“博客”模块来包含“帖子”和“评论”模块作为依赖项仍然会使定义“/post/:id”路由变得困难..？)

index.html

<div class="post"><ng-view></ng-view></div>
<div class="comments"><ng-view></ng-view></div>

javascript.js

angular.module('posts', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', {
        'template': 'Showing all the posts',
        'controller': 'postCtrl
    })
    .when('/post/:id', {
        'template': 'Showing post :id',
        'controller': 'postCtrl
    });
}]);

angular.module('comments', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/post/:id', {
        'template': 'Showing post :id comments',
        'controller': 'CommentsCtrl'
    });
}]);

angular.bootstrap($('.post'), ['posts']);
angular.bootstrap($('.comments'), ['comments']);

Answer 1

我会将应用程序分为“ View 模块”和这些子模块。

然后我使用 $routeProvider 在 View 之间切换。我在每个模块中定义了不同的路由配置。

如果我需要更多子模块，我会使用 ng-include 加载它们。

/* App Module */

angular.module('MyApp', ['MyApp.home', 'MyApp.blog'])
.config( function myAppConfig ( $routeProvider ) {
    'use strict';
    $routeProvider.otherwise({ redirectTo: '/home' });
});


/* home Module */

angular.module('MyApp.home', [])
.config(['$routeProvider', function config( $routeProvider ) {
  $routeProvider.when('/home', {
    controller: 'HomeController',
    template: '<p>This is my Home</p>'
  });
}]);

我在github上创建了一个小存储库来解释一下。