Question

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

我尝试在单独的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'
  });
})

我还写了关于这个主题的a blog post。

Answer 3

我们正在做类似于门户网站应用和子应用的事情。我们发现了一些事情：

只有一个“app”可以有route和routeParams。因此，如果“子应用程序”需要访问$ routeParams，您必须使用“旧学校”进行URL解析，或者使用事件服务。
说到事件，应用程序没有Angular服务进行通信，因此您需要将自己的事件服务与两个应用程序的根作用域对话并将其注入两个应用程序。
我无法看到我们在“子应用程序”中使用ng-view的位置。显然，直接引导到元素的工作方式类似。

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

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

    });
});

Answer 4

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

以下是此http://www.ng-newsletter.com/posts/angular-ui-router.html

的精彩教程

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

4 个答案: