Angular 中的控制器代码组织答案

【问题标题】：Controller Code Organization in AngularAngular 中的控制器代码组织
【发布时间】：2012-08-30 13:48:16
【问题描述】：

所以，我正在使用 Angular 进行我的第一个主要项目。我有一个控制器正在执行 ton 的跑腿工作，并且已经达到了数千行 JavaScript 代码的地步。

我想以某种方式打破它，但我似乎在任何地方都找不到可靠的例子。代码主要由用于对对象进行计算的函数组成，因此指令和模块似乎不是正确的答案，但我可能错了。

你们如何在大型 Angular 项目中组织代码？我应该把它收起来，还是有一种理智的方法可以将其拆分为易于扫描的文件？

【问题讨论】：

标签： angularjs

【解决方案1】：

我建议至少将其中一些对象及其相关计算放入服务中，然后将服务注入您的控制器中。请参阅Sticky Notes Part 1 blog entry 以获取封装某些数据并提供访问/操作该数据的方法的服务示例。

看看你能不能把你的控制器分成多个控制器，每个视图一个。视图可以和页面一样大，或者只是页面上的一些块/块。

引用我最近看到的谷歌群组帖子：“我更愿意将 Angular 控制器视为我的视图的愚蠢 api/配置，并将所有繁重的工作交给服务。” -- reference

【讨论】：

只是分享，这可能会给你一些想法。 Stackoverflow
我实际上是在将 $scope 变量从控制器传递给服务，它工作得很好，因为在服务中我们引用了 $scope.x，但它看起来很丑，而且我的团队中没有人，包括我自己特别喜欢这种模式：/

【解决方案2】：

当您在控制器中时，您需要问自己一些事情。

现在，看看你的控制器。它是否没有这两件事并且仍然大于 1000 行？这是极不可能的，但即使它以某种方式发生，也要考虑将你的控制器分解成更小的控制器。这种对控制器的破坏必须基于视图来完成。

总而言之，您的控制器只是将业务逻辑和视图粘合到 HTML 中的地方。从技术上讲，它不应该包含这些胶水以外的任何东西。

【讨论】：

+1 AngularJS 文档声明控制器应该“仅包含单个视图所需的业务逻辑”，docs.angularjs.org/guide/dev_guide.mvc.understanding_controller。但是我发现一旦需要在两个控制器或两个视图之间共享某些数据，最好将数据（以及操作它的方法）放入服务中。所以，我认为我更喜欢你的建议——首先将业务逻辑放入服务中，然后如果/当多个视图或控制器需要它时，你就准备好了。谢谢。

【解决方案3】：

我通常创建一个 Util 工厂（似乎是现在在 Angular 而不是服务中的方式）并让它返回任何共享逻辑作为一组方法。

【讨论】：