How to properly modularize AngularJS App?

Question

How does one properly modularize an Angularjs app? I have an HTML page with separate parts, which I want to have separate controllers. At the moment I have one single controller, which serves the whole page. Different parts of the HTML page share the same scope data. Could someone provide a short and neat example with multiple controllers serving parts of the same page and sharing common scope data? I'm quite new to Angular.

Many thanks.

Answer 1

这个问题太宽泛，无法完全回答，但这里有一些提示：

1. 在需要操作DOM时使用指令/组件
2. 控制器应该尽可能少的代码。将逻辑/服务器调用放在服务层中。
3. 如果您需要具有多个控制器共享数据的复杂导航系统，您可能需要检查ui-router（https://github.com/angular-ui/ui-router）。它是一个状态机，您可以在其中嵌套状态及其关联的视图。子状态的控制器继承父状态，允许共享数据。
4. 如果不是ui-router 2在控制器中共享数据的方式：事件（$ on，$ emit），存储服务中共享的数据并使用$ watch来监视更改。