多部分视图的角度控制器结构

Posted 2023-04-12

【中文标题】多部分视图的角度控制器结构

【英文标题】：Angular controller structure for multipart view

【发布时间】：2015-02-26 15:16:49

【问题描述】：

我需要使用 AngularJS 和 web api 在 SPA 中创建此布局。工作流程如下：

当控制器加载时，从 api 获取两组数据（上表和左表 - 例如 2 次调用 api/data1 和 api/data2) 只要用户点击上方表格中的一行，详细信息就会被提取到右侧的框中 (api/data1/3434/detail) 当用户点击详细信息框中的某些条目时，相关条目会在左侧表格中突出显示。

我开始创建一个包含所有内容的视图，也是一个为所有必要的东西公开属性的控制器，但现在它看起来像这样（伪）

myPageController
    table1Data : Array<IData1Model>;
    table2Data : Array<IData2Model>;
    userSelectedFromTable1 : IData1Model;
    userSelectedFromTable2 : IData2Model;

我觉得这不是很好的做法。有没有办法将部分子组织成某种局部视图？子控制器？或者这是一种常见的方法？当他要为多种数据/api端点服务时，通常的控制器是什么样的？

---

编辑

我应该澄清一下，这只是一个更大的应用程序的一个特定页面（部分）。大多数部分只是一种数据的前端，例如一个控制器、一个模型、一个 api 调用等。将页面视为某种仪表板，其中显示多个数据并相互交互。

【问题讨论】：

你绝对应该调查和使用 UI-Router - github.com/angular-ui/ui-router/wiki

拜托，拜托，请不要拥有一个庞大的控制器。我不认为子控制器是第一个答案，尽管嵌套控制器当然可以工作。我会尝试完全解耦您的控制器，使它们彼此独立。如果您需要在控制器之间进行通信，您可以使用服务来实现。

@RadimKöhler UI-路由器？你是说ngRoute吗？ (.when("blah", templateUri...)?

@xvdiff NO NO NO 我的意思是 UI-Router 不是 ngRoute。这是一个有很多可能性的状态机。这里我整理了一些非常有用的资源***.com/a/20581135/1679310

@RadimKöhler 最近几天我一直在研究 UI-router，但我仍然不确定应该如何解决当前的问题，主要是因为缺乏高级示例。我用类似于上图的多视图做了一个小例子，但是有很多未解决的问题，例如..视图如何相互通信（例如点击获取数据）等。你有任何高级示例吗？ ui路由器？

【参考方案1】：

有没有办法将部分子组织成某种局部视图？子控制器？

这些部分确实应该是指令。您将左视图作为指令，右视图作为指令，控制器是两个指令实例之间的胶水。

控制器概览：

myPageController
    tablesData : IData1Model[];
    userSelectedTable : IData1Model;