如何使用AngularJS从服务器端获取数组

How to GET an array from server-side using AngularJS?

本文关键字：获取 数组 服务器端 何使用 AngularJS      更新时间：2023-09-26

所以我正在为团队制作一个web应用程序。我已经实现了登录和注册页面，我组的一些成员正在服务器(node.js与express框架)和数据库端工作，我正在使用angularjs框架在前端/客户端工作。我需要在angularjs中制作一个"团队列表页面"，基本上可以获取团队名称数组(登录的人可能有几个不同的软件开发组，他/她可能正在与之合作)。

team_list.html的服务器端尚未实现，但将在我完成客户端后实现。

我的问题是:我不确定如何在angularjs中从服务器/数据库端获取数组。我知道我应该以某种方式使用ng-repeat指令以及GET方法，但我不确定如何做到这一点。特别是如何使用数组。

下面是我到目前为止编写team_list.html的代码: 

        var page = angular.module('teamListPage', []);
        page.controller('listController', function($scope, $http) {
            console.log("inside the controller");
            //need to figure out how to pass info to server to retrieve the correct page
            $scope.submit = function() {
                console.log("inside the login function");
                console.log()
            }
            $scope.enterTeamPage = function() {};
    
        }
<!DOCTYPE html>
<html>
    
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  title>Team List</title>
</head>
    
<body>
    
    <h1>
        Welcome to Your Team Pages!
    </h1>
    
    <div  ng-controller="listController">
        <form id="Teams" ng-app="teamListPage">
            <fieldset>
                <legend>Your Teams</legend>
                <ul>
                    <div ng-repeat"x in teamList">
                        <td>{{x.Name}}</td>
                        <p>
                            <input type="button" id="enter" name="enter" value="Enter Home Page" />
                        </p>
                    </div>
                </ul>
            </fieldset>
        </form>
    </div>
    
    <p>
        <input type="button" id="Create" name="Create" value="Create New Team" />
    </p>
   
</body>
</html>

您可以使用$http服务:

$http.get('url').then(function (response) {
    // Success case
    $scope.teamList = response.data;
}, function (error) {
    // Error case
});

查看$http文档以了解更多关于该服务的信息

在您的控制器中使用GET方法和$HTTP请求请求数据，您可以像下面这样简单地做到这一点

$scope.teamList = []; 
$http.get("url_to_fetch_data.js")
.then(function(response) {
    $scope.teamList = response.data;//This Data should be Array of Objects with properties 
});

//然后可以在视图中重复

<div ng-repeat"x in teamList">
    <td>{{x.Name}}</td>
</div>

在Angular中，我们几乎只使用$resource来处理请求。你需要把它包含在你的HTML中，因为它是一个外部模块，还需要把它添加到你创建的angular模块的依赖数组中，但它极大地简化了使用外部资源的工作，并支持开箱使用的CRUD操作。

所以，在你的html中添加: 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.min.js"></script>

当然，这可以来自任何你喜欢的CDN。

然后在你的javascript中，将这一行改为:

var page = angular.module('teamListPage', ['ngResource']);

创建控制器时，确保注入$resource:

page.controller('listController', function($scope, $resource) {} // You don't need $http if you use $resource.

现在在你的控制器中，你可以做如下操作:

$scope.teamList = $resource('teams_url').query();

当然，你传递给$resource函数的url将是你的nodejs开发者决定的，但这足以在你的控制器中获取数据并准备显示。要在视图中显示它，只需像您建议的那样添加ng-repeat，类似于:

<div ng-repeat="member in teamList">{{member.name}}</div>

注意事项:

  1. $resource上的.query()方法期望返回一个数组。这就是你想要的，但是如果你调用一个返回JSON对象的路由，你会得到一个错误。
  2. $resource实际上返回一个对象或数组(在本例中是数组)，并附带一个承诺。承诺存在于。$promise属性中。因此，如果你需要做一些事情，比如对数组排序或执行其他类型的转换，你总是可以使用附带在承诺上的提供的。then函数。例:$scope.teamList.$promise.then(function() { // do something here });;但你不需要仅仅把东西放到视图上，因为$resource会在它最终从服务器返回时自动把所有数据放到数组或对象中。这意味着ng-repeat会在它可用的时候把它捡起来并显示给你。

$resource还提供了一个。get()方法，该方法获取单个记录，以及一个。save()方法，该方法使用您传递的对象创建post请求(例如$resource('some_api_url').save({name: 'John'});)。

我喜欢并使用它，因为它是一个非常干净的界面，使处理ajax请求非常简单和直观。虽然还有许多其他的方法可以做到这一点，但这是我们在工作中所做的，它似乎使事情变得非常清楚和容易理解。

请参阅$resource文档，了解更多有关它的工作原理以及如何在项目中使用它的信息。

相关文章：