使用 ui-router 时如何构造 angular.js 应用程序组件？答案

【问题标题】：How to structure angular.js app components when using ui-router?使用 ui-router 时如何构造 angular.js 应用程序组件？
【发布时间】：2015-02-25 21:48:52
【问题描述】：

由于有状态路由支持，我决定使用 angular-ui-router 而不是 ng-route。

但是，我对如何以一种有意义的方式布局和存储我的应用程序组件感到有些困惑。有什么想法或例子可以帮助我吗？

注意：我现在对我的结构使用基于组件的方法。这意味着，我有例如“./components/ObjectSidebar”。但我也对实施一个由“HeaderController”、“MainPageController”、“FooterController”等组成的“整体应用程序结构”非常感兴趣。我是否将这些组件都包含在同一个页面中？我将如何构建我的应用程序以模块化“MainPageController”下的所有组件（然后可以包括我的其他组件，例如“ObjectSidebar”等等。

【问题讨论】：

感谢您的回复。我目前正在以基于组件的方式对控制器进行分组。例如。 ObjectSidebar 或 ObjectEditView 或其他。但我有点被撕裂了，因为我还想要一个更高级别的控制器结构，它类似于高级页面组件，这样我就可以创建一个动态页眉、页脚等。话虽如此，我不太确定如何以模块化、实用的方式布置文件夹/命名空间

标签： javascript angularjs requirejs angular-ui-router

【解决方案1】：

这是我不久前写的一些东西，它可能是一个很好的起点（或一个很好的对话开始者）关于如何布局具有权限的 UI 路由器应用程序：https://gist.github.com/bvaughn/90343c06467e9bcb8d27

如果您想进一步聊天（或对 Gist 有疑问），请随时回复。 :)

【讨论】：

谢谢。那东西看起来很有帮助，而且很详细。我将把防止手动 URL 输入的 $rootScope 代码放在哪里？那只是在我的应用程序模块中吗？另外，如果您想了解更多我的困惑，我刚刚回复了上面的人
没有问题。我希望它对你有帮助。 :) 我可能会将$rootScope sn-p 放在您模块的主要run 块中。如果您要问更高级的问题，您实际上可能想查看一些 Todd Motto 的 Angular 最佳实践指南。 github.com/toddmotto/angularjs-styleguide
高级页面模块化有实际意义吗？例如。对于聊天应用程序：'home' 'chats' 'settings' 每个页面加载一个通用控制器，其中包含内部片段的覆盖结构？
我认为这种事情是个案。我可以想象一个会有意义的应用程序。