使用AngularJS获取对spark服务器的请求

所以我正在做这个项目，我需要创建一个管理控制台来显示用户、帐户等的列表。 大部分工作已经完成了，我的队友制作了一个Spark服务器，它基本上提供了我们所有的数据，并给了我一个端点，这是一个JSON文件供我访问。问题是我是AngularJS新手，我不知道如何使用AngularJS进行GET和Post请求。我只是想查看JSON文件并将其发布到它（端点），我不太确定现在如何编写它。所以，任何帮助都是非常感谢的，我看过很多文章，也做了很多测试，我只是无法访问我需要的东西。提供给我的端点如下所示：

:

当你点击链接时，它看起来像这样

[
  {
    "password": "password",
    "phoneNumber": "5712474645",
    "name": "Daniel",
    "id": "1994661273",
    "email": "dkrinke@gmu.edu",
    "username": "dkrinke"
  },
  {
    "password": "password",
    "phoneNumber": "1234567890",
    "name": "Brad",
    "id": "1466124435",
    "email": "bwebber@gmu.edu",
    "username": "bWebber"
  }
]

我制作了一个简单的HTML文件，其中有一些角度，我认为可以解决这个问题

---

常用、惯用且可维护的方法是将数据访问逻辑封装到专用的AngularJS服务中。该服务本身将使用内置于HTTP客户端服务中的框架，该服务使用JSON友好的默认行为进行优化

为了利用前面提到的AngularJS HTTP客户端服务，我们将实际创建一个可注入的服务工厂，该工厂将接收HTTP客户端作为参数并返回我们的服务。服务本身将只是一个简单的对象，它公开了一个函数来从API端点获取用户

这是我们的服务工厂的样子

(function () {

  userService.$inject = ['$http']; // tell AngularJS to inject HTTP service as first param
  function userService($http) {
    var apiUrl = 'http://54.87.197.206:8080/SparkServer/admin/api/v1/listOf/users';

    var service = {
      getUsers: function() {
        return $http.get(apiUrl)
          .then(function (response) {
            return response.data;
          });
      },
      createUser: function(user) {
        return $http.post(apiUrl, user)
          .then(function (response) {
            return response.data;
          });
      }
    };

    return service;
  }

(function () {

  UsersController.$inject = ['userService']; // inject the service we registered above
  function UsersController(userService) {
    var that = this;
    this.users = []; // initialize to empty array while we wait for data to load

    userService.getUsers()
      .then(function (users) {
        that.users = users;
      })
      .catch(function (error) {
        console.error(error);
      });

    this.newUser = {};

    this.createUser = function (user) {
      return userService.createUser(that.newUser)
        .then(function (user) {
          that.users.push(user);
          that.newUser = {};
        })
        .catch(function (error) {
          console.error(error);
        });
    };
  }
}());

现在我们已经创建了服务工厂，并使用

$inject

属性告诉AngularJS注入它的

$http

服务，我们只需要注册它

  angular.module('app') // assumes module is already defined by other code
    .factory('userService', userService);

}());

现在我们可以将

userService

注入控制器、指令或其他服务

例如，我们可能有一个需要访问服务（工厂返回的对象）的

userscoontroller

下面是这样一个控制器的外观

(function () {

  userService.$inject = ['$http']; // tell AngularJS to inject HTTP service as first param
  function userService($http) {
    var apiUrl = 'http://54.87.197.206:8080/SparkServer/admin/api/v1/listOf/users';

    var service = {
      getUsers: function() {
        return $http.get(apiUrl)
          .then(function (response) {
            return response.data;
          });
      },
      createUser: function(user) {
        return $http.post(apiUrl, user)
          .then(function (response) {
            return response.data;
          });
      }
    };

    return service;
  }

(function () {

  UsersController.$inject = ['userService']; // inject the service we registered above
  function UsersController(userService) {
    var that = this;
    this.users = []; // initialize to empty array while we wait for data to load

    userService.getUsers()
      .then(function (users) {
        that.users = users;
      })
      .catch(function (error) {
        console.error(error);
      });

    this.newUser = {};

    this.createUser = function (user) {
      return userService.createUser(that.newUser)
        .then(function (user) {
          that.users.push(user);
          that.newUser = {};
        })
        .catch(function (error) {
          console.error(error);
        });
    };
  }
}());

创建user.html

<form ng-submit="$ctrl.createUser()">
  name:
  <input type="text" ng-model="$ctrl.newUser.name" name="name" />
  password:
  <input type="password" ng-model="$ctrl.newUser.password" name="password" />
  confirm password:
  <input type="password" ng-model="$ctrl.newUser.confirmPassword" name="confirm-password" />

  <input type="submit" id="submit" value="Submit" />
</form>

---

非常感谢你，阿伦！快速跟进，所以如果我想创建该数据的HTML视图，我只需在HTML文件中使用ng repeat，类似于ng repeat中的user.username，对吗？哦，如果我需要发出post请求，比如我需要添加一个包含所有元素的新用户怎么办？是的，使用ng repeat枚举html中的用户。我添加了创建用户的存根代码，您需要根据应用程序其余部分的连接方式对其进行轻微调整。嗯，我对如何编写服务工厂有点困惑。因此，我在一个单独的js文件中初始化了这个应用程序，如下所示：var app=angular.module（'app'，[]）；然后在一个单独的名为theFactory.js的文件中放入您给我的第一个代码存根，我就这么做了吗？或者我需要做一些类似angular.module（'app'）.factory的事情（在这里插入存根代码）；抱歉问了这么多问题，我对大多数angularjs语法还是很陌生