如何使用AngularJS從服務器端獲取數組？

Question

因此，我正在為團隊開發一個Web應用程序。 我已經實現了登錄和注冊頁面，並且我的小組中的某些成員正在服務器（帶有Express框架的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文檔，以了解有關該服務的更多信息。

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中，並將其添加到您創建的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>

這里有一些警告：

$ 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文檔。

如何使用AngularJS從服務器端獲取數組？

問題描述

3 個解決方案

解決方案1
0 2016-10-08 01:18:52

解決方案2
0 2016-10-08 01:24:43

解決方案3
0 2016-10-08 06:41:03

如何使用AngularJS從服務器端獲取數組？

問題描述

3 個解決方案

解決方案1 0 2016-10-08 01:18:52

解決方案2 0 2016-10-08 01:24:43

解決方案3 0 2016-10-08 06:41:03

解決方案1
0 2016-10-08 01:18:52

解決方案2
0 2016-10-08 01:24:43

解決方案3
0 2016-10-08 06:41:03