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

Question

将AngularJS应用程序拆分为更小的部分/模块的最佳方法是什么？例如,如果我有博客文章和评论启用,我想我可以将其分解为"帖子"和"评论"(？)等模块(可能不是最好的例子,但想法是拆分应用程序逻辑分成单独的模块,而不是构建一个巨大的单模块应用程序).

我试图在单独的DOM节点中引导两个模块,并相应地在两个模块中使用路由.问题很少:

• 作为一个"单页"应用程序,我正在引导注释模块甚至在头版上使用,即使它没有在那里使用.
• 由于我无法在ng-app中使用多个ng-views,因此我不得不在index.html视图中为我的模块编写所有包装器并引导它们？应该是这样吗？似乎有点不对劲.我应该如何/在哪里引导那些？
• 路由有什么提示吗？我应该在模块中传播它们还是应该以某种方式将它们组合在一起？(创建一个"博客"模块以包含"帖子"和"评论"模块作为依赖关系仍然会很难定义例如"/ 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

我会在"视图模块"和这些子模块中划分应用程序.

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

如果我需要更多的子模块,我用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上创建了一个小存储库来解释这一点.

Answer 2

您可以在子模块中定义路径:

angular.module('app', ['ngRoute', 'app.moduleX'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'partials/home.html',
    controller: 'HomeCtrl'
  });

  //Handle all exceptions
  $routeProvider.otherwise({
    redirectTo: '/home'
  });
})

angular.module('app.moduleX', []).config(function($routeProvider) {
  $routeProvider.when('/settings', {
    templateUrl: 'partials/settings.html',
    controller: 'SettingsCtrl'
  });
})

我还写了一篇关于这个主题的博客文章.

Answer 3

我们正在对门户应用程序和子应用程序做类似的事情。我们发现了一些事情：

1. 只有一个“应用程序”可以拥有路线和路线参数。因此，如果“子应用程序”需要访问 $routeParams，您要么必须使用“老派”进行 URL 解析，要么使用事件服务。
2. 说到事件，应用程序没有用于通信的 Angular 服务，因此您需要推出自己的事件服务来与两个应用程序的根范围对话，并将其注入到两个应用程序中。
3. 我看不到我们在哪里使用 ng-view 作为“子应用程序”。显然直接引导到一个元素的工作原理类似。

4. 由于只有一个应用程序可以拥有路由，因此应按顺序引导应用程序。所以像这样：

   $( function () {
   
       $.when(angular.bootstrap($('.post'), ['posts'])).done( function() {
           console.log('POSTS: bootstrapped');
   
           //Manually add the controller to the comments element. (May or may not be  
           //necessary, but we were doing something that required it to work.)
           $('.comments').attr('ng-controller', 'CommentsCtrl');
   
           $.when(angular.bootstrap($('.comments'), ['comments'])).done( function() {
               console.log('COMMENTS: bootstrapped');
           });
   
       });
   });