[AngularJS]为什么使用角服务来收集信息,而不是只是 $http 吗?

发布时间: 2017/4/16 21:21:41
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

两个选项,是更好,为什么︰

示例 a。

  1. 应用模块
  2. 包含模型数据服务
  3. 要从服务调用中数据的控制器

文件 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. 应用模块和控制器从.json 文件通过 $http 服务绘图中的模型数据。
  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.我相信有优势 — — 谁能解释一下吗?

解决方法 1:

哦,一起来的首选的方法,因为它看起来有点以下 separation of concern ,和遵循单一责任原则。

服务

  • 这是负责从后端获取数据
  • 接触到其他组件从单一位置检索数据的各种方法。

控制器

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

为什么方法 B 是坏的吗?

你有简单的 ajax 控制器本身内部调用。你那看起来真漂亮。

但假如你想要有 userData 被显示在两个其他页上,然后将你做什么?我知道你将要太复制相同的代码里面其他的控制器。在这里,问题出现对图片。同样的事情要多次重复此操作,而又没有理由。是否正确?所以复制多个位置上的代码将添加 Code Maintainability 在将来的问题。正是这个原因,你不应该去的第一种方法。

哪里的办法一样去 A 会有更好的可维护性与结构化代码。

编辑

里面你 approach A 你不应该硬代码的所有数据。它应该从服务器通过调用服务器 API 方法或对的调用中检索 .json 文件。还要写下正确的服务代码 approach A ,你可以看到这个解释结束后。通过看重构的代码,你可以看到现在我们已经摆脱的 $q 服务。因为你不需要担心执行自定义的承诺,作为 $http 方法并返回 promise ,使用哪些代码可以按照承诺链模式的利用.then

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
      }
    };
  }
})();
赞助商