javascript - 为什么要使用 Angular Service 来收集信息，而不仅仅是 $http？

Question

两个选项，哪个更好，为什么:

示例 A。

1. 应用模块
2. 包含模型数据的服务
3. Controller 从服务调用数据

文件 1:Users.js:

      angular.module('users', []);

文件 2:userService.js:

angular.module('users').service('userService', ['$q', UserService]);

  function UserService($q) {
    var users = [
      {
        name: 'Bob Smith',
        age: 26,
        address: 'London',
      },
      {
        name: 'John Simpson',
        age: 41,
        address: 'New York',
      },
      {
        name: 'Maria West',
        age: 36,
        address: 'Chicago',
      }
    ];

    // Promise-based API
    return {
      loadAllUsers : function() {
        // Simulate async nature of real remote calls
        return $q.when(users);
      }
    };
  }

})();

文件 3:UserController.js:

          angular.module('users').controller('UserController', ['$scope', function($scope) {

        $scope.selected     = null;
        $scope.users        = [];
        $scope.selectUser   = selectUser;
        $scope.toggleList   = toggleUsersList;
        $scope.makeContact  = makeContact;

        userService
          .loadAllUsers()
          .then( function( users ) {
            $scope.users    = [].concat(users);
            $scope.selected = users[0];
          });
}]);

示例 B:

1. 应用程序模块和 Controller 通过 $http 服务从 .json 文件中绘制模型数据。
2. 用于保存模型数据的 json 文件。

文件 1:Users.js:

      angular.module('users', []);

         .controller('userController', [
            '$scope', 
            '$http', 
            function($scope, $http, $routeParams) {

            $http.get('data.json').success(function(data) {
            $scope.userData = data; 
            });

         }]);

文件 2:userService.json

         [
          {
            'name': 'Bob Smith',
            'age': 26,
            'address': 'London',
          },
          {
            'name': 'John Simpson',
            'age': 41,
            'address': 'New York',
          },
          {
            'name': 'Maria West',
            'age': 36,
            'address': 'Chicago',
          }
        ];

B 似乎更合乎逻辑(对我来说也更容易)，但我见过有人做 A。我认为这是一个优势 - 谁能解释一下？

Answer 1

是的，A 看起来是首选方法，因为它看起来有点遵循关注点分离，并遵循单一职责原则。

服务

• 负责从后端获取数据
• 向其他组件公开各种方法以从单个位置检索数据。

Controller

• 在服务和 View 之间进行交流
• 它还处理其他特定于 View 的业务逻辑。

---

为什么方法 B 不好？

您在 Controller 本身内部有简单的 ajax 调用。是的，那看起来真的很不错。

但是假设你想让 userData 显示在另外两个页面上，那么你会怎么做呢？我知道您也将在其他 Controller 中复制相同的代码。问题就在这里出现了。同样的事情会无缘无故地重复多次。正确的？因此，在多个地方复制代码将增加代码可维护性 问题。这就是原因，您不应该采用第一种方法。

如果采用方法 A 会有更好的可维护性和结构化代码。

编辑

在您的方法A 中，您不应该对所有数据进行硬编码。它应该通过调用服务器 API 方法或调用 .json 文件从服务器检索。另外我会写下正确的服务代码approach A，你可以在这个解释结束后看到。通过查看重构代码，您现在可以看到我们已经摆脱了 $q 服务。因为你不需要担心自定义 promise 的实现，因为 $http 方法确实返回 promise，通过使用哪些代码可以遵循 promise 链模式通过使用 .然后

angular.module('users').service('userService', ['$http', UserService]);
  function UserService($http) {
    return {
      loadAllUsers : function() {
        // Simulate async nature of real remote calls
        return $http.get('users.json'); //return promise from herer
      }
    };
  }
})();