Javascript 为什么要使用Angular服务来收集信息，而不仅仅是$http？

两个选项，哪一个更好以及原因：

例A

应用程序模块

包含模型数据的服务

控制器从服务调用数据

文件1:

Users.js

：

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

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);
      }
    };
  }

})();

          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];
          });
}]);

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

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

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

         }]);

文件2:

userService.js

：

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

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);
      }
    };
  }

})();

          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];
          });
}]);

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

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

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

         }]);

文件3:

UserController.js

：

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

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);
      }
    };
  }

})();

          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];
          });
}]);

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

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

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

         }]);

例B：

应用程序模块和控制器通过$http服务从.json文件中绘制模型数据

保存模型数据的json文件

文件1:

Users.js

：

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

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);
      }
    };
  }

})();

          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];
          });
}]);

      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。我想这有一个优势——有人能解释一下吗？

是的，这是一种更可取的方法，因为它看起来有点像是遵循

分离关注点

，遵循单一责任原则

服务

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

控制器

• 在服务和视图之间进行通信
• 它还处理其他特定于视图的业务逻辑

---

为什么方法B不好？ 在控制器内部有简单的ajax调用。是啊，看起来真不错

但是，假设您想在另外两个页面上显示

userData

，那么您会怎么做？我知道您也将在其他控制器中复制相同的代码。现在问题来了。同样的事情会无缘无故地重复多次。对的因此，在多个位置复制代码将在将来增加代码可维护性问题。这就是原因，你不应该选择第一种方法

其中，对于方法

A

，将有更好的可维护性和结构化代码

编辑

在你的

方法中，你不应该硬编码所有数据。它应该通过调用服务器API方法或调用
.json
文件从服务器检索。另外，我将写下正确的维修代码
方法A
，您可以在本说明结束后看到。通过查看重构代码，您可以看到现在我们已经摆脱了
$q
服务。因为您不需要担心自定义承诺实现，因为
$http
方法确实返回
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
      }
    };
  }
})();

谢谢，解释得很清楚！我对a中的步骤有点困惑，但我会努力的——这是一个好的开始。谢谢你的帮助。@Paulos3000你对方法A还有疑问吗？是的，事实上我有！我有点不确定为什么要在服务功能中安装模型数据。。。这是否会使模型日期的检索和更新更加不稳定/困难？我认为最好是将数据隔离在一个.json文件中，而不涉及角度代码。此外，我无法理解服务函数的$q参数，以及“承诺API”的/function的必要性。@Paulos3000查看我的编辑回答，如果您对它还有任何疑问，请告诉我。“干杯”刚看到编辑。很好的解释。再次感谢你的帮助。