javascript - Angular 项目架构

Question

我正在构建一个 Angular 应用程序，它使用不同的 API 并为用户提供选项以供选择，它将被记录并发送回服务器。

我设计如下。

• 主 Controller 中的所有通用逻辑和不同 Controller 中的所有其他选项作为主 Controller 的子 Controller 。
• 主 Controller 检索运行应用程序所需的所有数据。 由所有其他子 Controller 使用。
• 为确保加载数据，我使用了附加到范围的 promise 。所以所有的子 Controller 都会知道加载的数据。
• 我已将所有子 Controller 的数据更新部分移至主 Controller 因为所有更新都发生在一个对象中。
• 子 Controller 发出/广播以在子 Controller 和主 Controller 之间进行通信。因此，当更新发生时，子项将发出一个事件，其中包含将被 Main 捕获的数据，并执行更新。

MainController {

  $scope.loaded = DataService.get();
  $scope.userOptions = {};
  $scope.$on('update',function(){
   updateUserOptions();
  })
}

ChildController {

  $scope.loaded.then(function(){
    //all logic of child controller
  }

  $scope.onselect = function(){
    $scope.$emit('update',data);
  }
}

问题

1. 在 Controller 之间使用事件是一种好习惯吗？
2. 使用附加到子 Controller 作用域的 promise 好吗？
3. 如果我开始使用服务，它会改进我的代码吗？

Answer 1

我会尽量根据自己的经验来回答你的问题。最近我构建了一个单页应用程序并重构了它的架构。

这是我的答案:

1. 在 Controller 之间使用事件是一种好的做法吗？ 恕我直言，这是在所有 Controller 之间共享信息的最灵活方式，即使它们具有独立的范围(使用 $broadcast 或 $emit 为例)。这称为观察者设计模式。但是，您可以使用服务而不是事件来在它们之间共享数据。如果您要使用 $rootScope，请小心，因为所有 $scope 都继承自 $rootScope。
2. 使用附加到子 Controller 作用域的 promise 好吗？首先，您必须了解如何 scope inheritance作品。你必须小心避免 JS 中的属性阴影。其次，我会将 ChildController 中的 scope.loaded 中的所有逻辑移至 ChildService 等服务中。将业务逻辑(例如请求等)保留在服务而不是 Controller 中，将确保它可以被重用。 业务逻辑的分离是好的设计原则。
3. 如果我开始使用服务，它会改进我的代码吗？我在上面回答了这个问题。

此外，为了构建一个好的架构，我阅读了这个 angular style guide由 John Papa 撰写。

我建议进行以下更改:

1. 为确保数据已加载，我使用了附加到范围的 promise 。所以所有的子 Controller 都会知道数据已加载。。相反，我会使用 $scope.$emit('loaded') 在 MainController 中发出自定义“loaded”事件。之后，在 ChildController 中，我将使用 $scope.$on('loaded', function(){}) 来处理事件。
2. 我会将 updateUserOptions 函数移动到服务中，并将其注入(inject)到需要它的 Controller 中。

希望对您有所帮助!