如何在 AngularJS 中定义布局答案

【问题标题】：How to define layout in AngularJS如何在 AngularJS 中定义布局
【发布时间】：2015-06-15 21:10:09
【问题描述】：

我是 Angular JS 的新手...我们的屏幕布局分为 4 个部分..

<table>
  <tr>
    <td>Section 1</td>
    <td>Section 2</td>
    <td>Section 3</td>
  </tr>
  <tr>
    <td colspan="3">section 4 - main content</td>
  </tr>
</table>

最好的方法是什么？将它们定义为单独的视图？并使用 ng-include 标记？定义一个 div 并附加一个控制器并包含相应的代码...我正在寻找将每个部分的 HTML 代码分离到它自己的 HTML 中的选项。任何帮助将不胜感激。

【问题讨论】：

忘了提...每个部分应该能够独立地重新加载数据..
您应该考虑为每个部分创建一个自定义指令。如果这些部分相似，您可以创建一个指令并给它们各自的范围。如果它们完全不同，您可以为每一个创建一个指令。指令可以加载 HTML“模板”并有自己的逻辑与它们相关联。阅读：docs.angularjs.org/guide/directive

标签： html angularjs layout sections

【解决方案1】：

这取决于您打算如何处理这些部分。我建议调查一下：

指令 - 如果您希望每个部分都成为自己的“组件”（它自己的 html、控制器等）。如果您计划重用某个部分，则指令方法特别有用。
UI 路由器 (https://github.com/angular-ui/ui-router)。如果您有多个页面，每个页面都有自己的部分集。例如，如果您有一个主要部分和一个根据页面更改的导航部分 - UI-Router 可以更改您的主要部分和导航部分中的内容。

希望这会有所帮助。

【讨论】：