Question

所以我正在为团队制作一个网络应用程序。我已经实现了登录和注册页面，我的组中的一些成员正在服务器上（带有快速框架的node.js）和数据库端，我正在开发端口/客户端使用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>

Answer 1

您可以使用$http服务：

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

查看$http docs以了解有关该服务的更多信息。

Answer 2

使用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>

Answer 3

我们几乎专门使用$ resource来处理Angular中的请求。您需要将它作为外部模块包含在HTML中，并将其添加到您创建的角度模块的依赖项数组中，但它极大地简化了使用外部资源并支持开箱即用的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>

这里有一些警告：

$ resource上的.query（）方法期望返回一个数组。这是你想要的，但是如果你调用一个返回JSON对象的路由，你就会收到错误。
$ resource实际返回一个对象或数组（在本例中为数组），附加了一个promise。承诺存在于。$ promise属性中。因此，如果您需要执行某些操作，例如对数组进行排序或执行其他类型的转换，您始终可以使用附加到promise的提供的.then函数。例如$scope.teamList.$promise.then(function() { // do something here });。但是你不需要只是为了把事情放到视图上，因为当资源最终从服务器返回时，$ resource会自动将所有数据放入数组或对象中。这意味着ng-repeat只会在可用时立即提取并显示给您。

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

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

有关如何使用以及如何在项目中使用它的更多信息，请参阅$resource documentation。

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

3 个答案: