Как получить массив со стороны сервера с помощью AngularJS?

Поэтому я работаю над веб-приложением, созданным для команд. У меня уже реализована страница входа и регистрации, и некоторые члены моей группы работают на сервере (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>


node.js javascript arrays web-development-server angularjs
person asddddddaaaad2    schedule 08.10.2016    source источник
comment
как насчет $http.get? см.: stackoverflow.com/questions/18477711/   -  person jmunsch    schedule 08.10.2016

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете воспользоваться услугой $http:

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

Ознакомьтесь с https://docs.angularjs.org/api/ng/service/$http, чтобы узнать больше об этой службе.

person cesarcosta99    schedule 08.10.2016
comment
как это будет печатать массив? - person asddddddaaaad2; 08.10.2016
comment
К этому времени у вас уже была установлена ​​переменная области видимости. Вы можете распечатать в представлении или сделать console.log. - person cesarcosta99; 08.10.2016

arrow_upward
0
arrow_downward

Внутри вашего контроллера запрашиваются данные с использованием метода 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>
person Ganesh Devkate    schedule 08.10.2016

arrow_upward
0
arrow_downward

Мы используем $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();

Конечно, URL-адрес, который вы передаете функции $resource, будет тем, что решат ваши разработчики nodejs, но этого достаточно, чтобы получить данные в вашем контроллере и подготовить их к отображению. Чтобы получить его в представлении, просто добавьте ng-repeat, как вы предложили, аналогично:

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

Некоторые предостережения здесь:

  1. метод .query() для $resource ожидает возврата массива. Это то, что вам нужно, но если вы вызовете маршрут, который возвращает объект JSON, вы получите сообщение об ошибке.
  2. $resource фактически возвращает объект или массив (в данном случае массив) с прикрепленным обещанием. Обещание живет в свойстве .$promise. Поэтому, если вам нужно что-то сделать, например отсортировать массив или выполнить какое-то другое преобразование, вы всегда можете использовать предоставленную функцию .then, прикрепленную к обещанию. например $scope.teamList.$promise.then(function() { // do something here });. Но вам это не нужно только для того, чтобы что-то отображалось в представлении, поскольку $resource автоматически поместит все эти данные в массив или объект, когда они, наконец, вернутся с сервера. Это означает, что ng-repeat просто подберет его, как только он станет доступен, и отобразит его для вас.

$resource также предоставляет метод .get(), который получает одну запись, и метод .save(), который создает почтовый запрос с переданным вами объектом (например, $resource('some_api_url').save({name: 'John'});.

Мне нравится и я использую его, потому что это действительно чистый интерфейс, который делает работу с ajax-запросами очень простой и интуитивно понятной. Хотя есть много других способов сделать это, но это то, что мы делаем на работе, и это, кажется, делает вещи очень ясными и легкими для понимания.

Дополнительную информацию о том, как работает и как использовать его в своем проекте.

person John Halbert    schedule 08.10.2016