如何使用角度将 UI 与控制器分开？

【问题标题】：How to separate UI from controller with angular?如何使用角度将 UI 与控制器分开？
【发布时间】：2014-01-22 02:04:01
【问题描述】：

我正在开发 Angular Web 应用程序，我怀疑是否可以将 UI 与控制器完全分开？

我有一个控制器方法，它向服务器发送请求以检索数据。如果发生错误，我需要用一些友好的消息通知用户。所以我想我必须调用 UI 框架的某些 api 来通过弹出窗口或某种 toast 通知用户。但是这样做，是否意味着我将 UI 代码嵌入到我的控制器逻辑中？这不是 UI 和控制器之间干净分离的反面吗？如果我想切换到另一个 UI 框架，这意味着我还需要更改我的控制器代码。

我是网络应用程序的新手，希望有人能澄清我的疑问。你会怎么做？

【问题讨论】：

通常您会构建与外部资源通信或执行第三方操作（如 toast 消息）的服务...

标签： angularjs code-separation

【解决方案1】：

我有一个控制器方法，它向服务器发送请求以检索数据。如果发生错误，我需要用一些友好的消息通知用户。所以我想我必须调用UI框架的某些api

您不一定需要这样做。在您的 UI 中，您可以使用向用户显示问题的 HTML（UI 代码）。使用ng-if，此 UI 代码对用户隐藏。如果您的控制器检测到负载故障，它可以在控制器上设置一个值，该值将执行以下操作

导致 UI 代码显示
可选，在 UI 代码中设置显示信息

<div ng-if="displayError">{{errorMsg}}</div>

然后，在您的控制器中，如下所示：

MyService.getData().then(
    function(responseData) {

        $scope.goodData = responseData;
    },

    function(failure) {

        $scope.displayError = true;
        $scope.errorMsg = "Failed to Retrieve Data"

    }
);

【讨论】：

感谢贾斯汀的快速回复。