如何将大型 AngularJS 项目拆分为模块

我来自 Backbone 和 JavascriptMVC 的世界。但我真的很想切换到 AngularJS。到目前为止，我有一个大问题阻止我转变。

我创建单页应用程序。假设它包含一个选项卡模块、一个文件上传模块和一个文件列表模块。

我在 Backbone 中要做的就是将每个模块拆分为独立模块 有自己的视图模板、视图控制器等。这样，我就可以在我的应用程序中的多个位置使用该模块。这些模块除了自身之外不知道任何事情。

在 AngularJS 中如何处理这个问题？是否可以为每个模块创建一个 angular.module（例如选项卡模块）？

我觉得他们在文档中讲述了如何在模块内创建多个控制器。但这听起来不像我需要的。或者我在这里误解了一些主要概念？

编辑： 我还做了一些研究。看起来指令就是我正在寻找的。而 AngularJS 中的模块代表整个 Web 应用程序。因此，“组件”和“模块”名称的混合让我感到困惑。

我现在走在正确的道路上吗？

您绝对可以定义模块，并将模块包含在应用程序级别，然后通过依赖项注入，您允许控制器使用它们所需的内容。

我有一个我正在开发的用于学习 Angular 的小型应用程序的概念证明示例（它非常脏，而且是我的游乐场）：

http://plnkr.co/edit/1jGqaB00OznAUpyPZVT3

我的应用程序定义如下所示：

angular.module('myApp', ['ngResource','ui.bootstrap', 'myApp.services', 'myApp.servicesMovie', 'myApp.servicesSearch', 'myApp.servicesUtils', 'myApp.servicesMovieList'])

您可以看到我在我的应用程序中包含了一堆不同的模块，然后是一个从服务模块获取一些服务的控制器示例：

function SearchCtrl($scope,  $rootScope, $route, $timeout, $routeParams, $location, SearchService, MovieListService) { etc }

这是模块的定义之一（也及其依赖项）：

angular.module('myApp.servicesMovieList', ['myApp.services'])

关于模板，您可以定义它们并将它们包含在您的路由值中：

$routeProvider.when('/view1', {templateUrl: 'view1.html', controller: ViewCtrl});
    $routeProvider.when('/movie/:id', {templateUrl: 'movie-detail.html', controller: MovieCtrl, resolve: MovieCtrl.resolve});
    $routeProvider.when('/search/:q/:p', {templateUrl: 'movie-search.html', controller: SearchCtrl});
    $routeProvider.when('/searchlist/:url/:p', {templateUrl: 'movie-search.html', controller: SearchCtrl});
    $routeProvider.otherwise({redirectTo: '/view1'});

  }])

或者当然你可以打电话给他们ng-include