Javascript 角度项目架构

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

我的设计如下

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

问题

在控制器之间使用事件是否是一种良好的做法

使用附在子控制器作用域上的承诺好吗

如果我开始使用服务，它会改进我的代码吗

---

在控制器之间使用事件是否是一种良好的做法？不是作为数据共享的主要形式，但是您可以使用它来通知系统事件，例如数据就绪

使用附在子控制器作用域上的承诺好吗？不要使用范围继承，它会导致许多恼人的问题

如果我开始使用服务，它会改进我的代码吗？是的

这就是我在你的位置上所做的：

数据服务-该服务负责所有进出的数据。无论何时请求数据（无论哪个控制器请求数据），服务都会缓存数据（保存承诺就足够了）。所有进一步的请求都会获取缓存数据，除非它们指定需要新数据。每当数据更新（第一次或刷新）时，服务都会通过$rootScope广播一个“dataReady”事件，主控制器和其他订阅者可以监听该事件。 该服务还负责数据更新，当数据更新时，您还可以通过$rootScope广播事件。 当事件被激活时，所有订阅者都会查询服务，并获取他们需要的数据

---

控制器-避免控制器，使用具有隔离作用域的指令，并使用属性在它们之间传递数据。通过这种方式，您可以确保每个指令都得到了它所需要的，而不是全部。指令可以使用属性、服务、广播/发射或要求其父母/兄弟姐妹密切合作进行通信。

我将根据自己的经验尝试回答您的问题。最近，我构建了一个单页应用程序，并对其架构进行了重构

以下是我的答案：

在控制器之间使用事件是否是一种良好的做法？总之，这是在所有控制器之间共享信息的最灵活的方式，即使它们具有独立的作用域（例如使用

$broadcast

或

$emit

）。这称为观察者设计模式。但是，您可以使用服务而不是事件在它们之间共享数据。如果要使用

$rootScope

，请小心，因为所有

$scope

都继承自

$rootScope

使用附在子控制器作用域上的承诺好吗？首先，你必须了解工作原理。您必须注意避免JS中的属性阴影。其次，我将把

scope.loaded

中

ChildController

的所有逻辑移到

ChildService

这样的服务中。将业务逻辑（如请求等）保留在服务中而不是控制器中，将确保它可以重复使用。 业务逻辑分离是良好的设计原则

如果我开始使用服务，它会改进我的代码吗？我在上面回答了这个问题

另外，为了构建一个好的架构，我读了约翰·帕帕写的这篇文章

我建议进行以下修改：

为了确保数据已加载，我正在使用范围附带的承诺。因此，所有子控制器都将知道加载的数据。。相反，我将使用

$scope.$emit（'loaded'）

在主控制器中发出一个自定义的“loaded”事件。之后，在ChildController中，我将使用

$scope.$on（'loaded'，function（）{}）

来处理事件

我会将

updateUserOptions

函数移动到一个服务中，并将它注入到需要它的控制器中

我希望这有帮助

在控制器之间使用事件是否是一种良好的做法

不，不是，Angular JS 2.0将不推荐使用它。它还常常导致难以管理的事件混乱，难以理解和调试。使用服务在控制器之间共享数据。（将相同的服务注入多个控制器，然后服务保存数据，控制器绑定到该数据并自动同步）我写了一篇解释这个用例的文章

使用附在子控制器作用域上的承诺好吗

不，不是。在服务中使用承诺并解析数据。根本不要使用

$scope

，而是使用

controllerAs

语法$AngularJS1.X中也不推荐使用范围，因为它的使用会导致范围继承的许多不同问题

如果我开始使用服务，它会改进我的代码吗

---

对!！将服务用于所有逻辑和数据操作。仅将控制器用于UI交互，并将所有内容委托给服务。还可以使用

ui路由器

来管理应用程序的状态。

我不会直接回答您的问题，因为我还有其他一些意见。我认为您提到的方法不是构建角度应用程序的最佳方法

主控制器中的所有公共逻辑以及作为主控制器子控制器的不同控制器中的所有其他选项

这是反对安古的

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