26

将 AngularJS 应用程序拆分为更小的部分/模块的最佳方法是什么？例如，如果我有一篇博客文章并为此启用了评论，我想我可以将其分解为“帖子”和“评论”（？）之类的模块（可能不是最好的例子，但想法是拆分应用程序逻辑到单独的模块中，而不是构建一个巨大的单模块应用程序）。

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

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

索引.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']);
4

4 回答 4

21

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

然后我使用 $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上创建了一个小存储库来解释这一点。

于 2013-03-08T19:05:20.267 回答
6

您可以在子模块中定义路由：

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

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

于 2014-08-15T10:55:28.417 回答
2

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

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

    });
});
于 2013-03-08T16:46:04.440 回答
1

我希望你可以使用“ui-router”路由模块。

这是这个http://www.ng-newsletter.com/posts/angular-ui-router.html的好教程

于 2014-01-09T09:33:30.890 回答