javascript - 当方法影响范围元素时的 Angular 服务设计

Question

我有这个jsfiddle ，基本上是两个按钮的应用程序。当您单击第一个时，它会在我的 Angular Controller (load())中执行一个方法，我试图创建服务来重用逻辑，组织更多代码并实际上尝试遵循最好的方法做法。

首先请告诉我我的理解是否正确。

1. Controller 是向模型传达更改的部分，是我的 View 或演示文稿与应用程序背后的逻辑之间的交互。

2. 服务更多地用于创建在应用程序中运行的进程，从 REST Angular 来看，这将负责调用 REST api，如果计算适用，这就是它们应该驻留的位置。

我的问题是，当 http 调用的回调函数移动范围内并用于在 UI 中执行操作的元素时，我该怎么做？

将 $scope 移动到我的服务层是正确的吗？，我认为不正确有几个原因。

举一个真实的例子，将 fiddle 中的 load() 方法逻辑移动到 loadFromService 方法的最佳方法是什么，我如何发送返回我更新 UI 所需的信息，在本例中为 [source] 和 [invalid] 变量。

基于 fiddle ，当我使用myService.loadFromService()调用它时，我想用“service”值和invalid = true更新源变量;

正确的方法是什么？只是为了澄清，如果我单击执行 Controller 方法的第一个按钮或者单击调用服务的第二个按钮，我想要相同的结果，正确的实现是什么

更新:如果我在 REST 调用之前和之后有一系列条件或规则，最好的方法是什么，我的意思是服务方法不仅执行 REST 调用(执行一些逻辑来设置输入params，并对响应执行一些操作)

Answer 1

执行此操作的正确方法是返回 promise 。

您可以在这篇文章中了解更多相关信息: Processing $http response in service

所以我会像这样实现它:

myApp.service('myService', [ '$http', function($http) {
    this.loadFromService = function() {
        $http.get('http://localhost:8080/person').then( function(res) {
            return res.data;
        });
    };
}]);

在 Controller 中你可以有:

myApp.controller('myController', ['myService', function(myService) {
    $scope.load = function() {
        myService.loadFromService().then(function(data) {
            $scope.data2 = data;
        });
    };
}]);