使用工厂公开一个简单的API

Lio*_*rez 6 javascript factory angularjs

我正在尝试编写一个公开简单用户API的工厂.我是AngularJS的新手,我对工厂以及如何使用它们有点困惑.我见过其他主题,但没有一个与我的用例很匹配.

为简单起见,我想要实现的唯一功能是将所有用户放入阵列中,然后通过注入的工厂将它们传递给控制器​​.

我将用户存储在json文件中(现在我只想读取该文件,而不修改数据)

users.json:

[
{
    "id": 1,
    "name": "user1",
    "email": "a@b.c"
},
{
    "id": 2,
    "name": "user2",
    "email": "b@b.c"
}
]
Run Code Online (Sandbox Code Playgroud)

我想写的工厂应该是这样的:

UsersFactory:

app.factory('usersFactory', ['$http', function ($http) {
    return {
        getAllUsers: function() {
            return $http.get('users.json').then(
                function(result) {
                    return result.data;
                },
                function(error) {
                    console.log(error);
                }
            );
        }
    };
}]);
Run Code Online (Sandbox Code Playgroud)

最后,控制器调用将是这样的:

UsersController

app.controller('UsersCtrl', ['$scope', 'usersFactory', function($scope, usersFactory){
    usersFactory.getAllUsers().then(function (result) {
        $scope.users = result;
    });
}]);
Run Code Online (Sandbox Code Playgroud)

我在网上搜索过,似乎以这种方式使用工厂并不是一个好习惯,如果我想实现更多功能,比如在数据源中添加/删除新用户,或者某种方式将数组存储在工厂中,这不是那种方法.我见过一些使用工厂的地方new UsersFactory().

尝试使用API​​时,使用工厂的正确方法是什么?

是否可以使用包含$http.get()结果的对象初始化工厂,然后以这种方式从控制器中使用它?

var usersFactory = new UsersFactory(); // at this point the factory should already contain the data consumed by the API
usersFactory.someMoreFunctionality();   
Run Code Online (Sandbox Code Playgroud)

And*_*ell 2

我没看出你们工厂有什么问题。如果我理解正确的话,你想添加功能。一些小的改变将使这成为可能。这就是我要做的(请注意,调用getAllUsers会清除任何更改):

app.factory('usersFactory', ['$http', function ($http) {
  var users = [];
  return {
      getAllUsers: function() {
          return $http.get('users.json').then(
              function(result) {
                  users = result.data;
                  return users;
              },
              function(error) {
                  users = [];
                  console.log(error);
              }
          );
      },
      add: function(user) {
          users.push(user);
      },
      remove: function(user) {
          for(var i = 0; i < users.length; i++) {
              if(users[i].id === user.id) { // use whatever you want to determine equality
                  users.splice(i, 1);
                  return;
              }
          }
      }
  };
}]);
Run Code Online (Sandbox Code Playgroud)

通常,addremove调用将是http请求(但这不是您在问题中要求的)。如果请求成功,您就知道您的 UI 可以在视图中添加/删除用户。