AngularJS를 사용하여 서버 측에서 배열을 얻는 방법은 무엇입니까?

그래서 저는 팀을 위해 만들어진 웹 응용 프로그램을 만들고 있습니다. 이미 로그인 및 가입 페이지가 구현되어 있고 내 그룹의 구성원 중 일부가 서버 (node.js와 익스프레스 프레임 워크) 및 데이터베이스 측에서 작업하고 있으며 프론트 엔드/클라이언트 측에서 작업하고 있습니다. angularjs 프레임 워크를 사용합니다. 기본적으로 팀 이름의 배열을 가져 오는 angularjs의 "팀 목록 페이지"를 만들 필요가 있습니다 (로그인 한 사람이 여러 가지 소프트웨어 개발 그룹을 가질 수 있습니다).AngularJS를 사용하여 서버 측에서 배열을 얻는 방법은 무엇입니까?

team_list.html의 서버 측은 아직 구현되지 않았지만 클라이언트 측과 완료 될 것입니다.

내 문제는 : 어떻게 angularjs에서 서버/데이터베이스 측면에서 배열을 가져올 모르겠다. 어떻게 든 ng-repeat 지시어와 GET 메서드를 사용해야한다는 것을 알고 있지만 어떻게해야하는지 정확히 모르겠습니다. 특히 배열을 사용하여이를 수행하는 방법. 알고하는 $http docs을 보라

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

 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>

출처

2016-10-08 asddddddaaaad2

'$ http.get'은 어떨까요? 참조하십시오 : http://stackoverflow.com/questions/18477711/force-angularjs-service-to-return-data-before-loading-controller – jmunsch

당신은 $http 서비스를 사용할 수 있습니다 여기에

지금까지 team_list.html 내 코드입니다 서비스에 대한 자세한 정보.

출처

2016-10-08 01:18:52

이 어떻게 배열을 인쇄 할 것이라고? – asddddddaaaad2

이번에는 이미 범위 변수를 설정했습니다. 보기에서 인쇄하거나'console.log'를 할 수 있습니다. –

컨트롤러 요청 데이터 내부

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>

출처

2016-10-08 01:24:43

우리 Angular로 요청을 처리하기 위해 $ resource를 거의 독점적으로 사용하십시오. HTML로, 외부 모듈로 포함시킬뿐만 아니라 생성 된 각 모듈에 대한 의존성 배열에 추가해야하지만, 외부 리소스로 작업하는 것을 대폭 간소화하고, CRUD 작업을 즉시 지원합니다 .

그래서, 당신의 HTML에 추가 :

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.min.js"></script>

이 CDN는 물론, 선호하는 어떤에서 할 수있다.

는 그런 다음 자바 스크립트, 수 있도록이 줄을 변경 :

이

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

이제 컨트롤러에 당신이 할 수 있습니다 : 당신이 당신의 컨트롤러를 만들 때

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

것은, $ 자원을 주입해야 다음 :

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

물론 $ resource 함수에 전달하는 URL은 r nodejs 개발자가 결정하지만 컨트롤러에서 데이터를 가져 와서 표시 할 준비가되었습니다.여기

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

몇 가지주의 사항 :

이

$ 자원에 .query() 메소드는 배열을 기대하고보기에 그것을 얻으려면, 단지, 당신은 제안처럼, 비슷한 겨 반복을 추가 반환 될 어떤 것을 원하지만 JSON 객체를 반환하는 경로를 호출하면 오류가 발생합니다.
$ resource는 실제로 약속이 첨부 된 객체 또는 배열 (이 경우 배열)을 반환합니다. 약속은 $ promise 속성에 있습니다. 따라서 배열을 정렬하거나 다른 유형의 변환을 수행하는 것과 같이 무언가를해야한다면 항상 약속에 첨부 된 .then 함수를 사용할 수 있습니다. 예 : $scope.teamList.$promise.then(function() { // do something here });. 그러나 $ resource는 서버에서 마침내 돌아올 때 배열이나 객체에 모든 데이터를 자동으로 넣기 때문에 뷰를 가져 오는 것만으로는 필요하지 않습니다. 즉, ng-repeat은 사용 가능한 한 빨리 가져 와서 표시합니다.

$ 자원은 단일 레코드를 가져 갔지() 메소드를 제공하고, 당신이 통과 객체와 POST 요청을 생성하는 .save() 메소드 (예 : $resource('some_api_url').save({name: 'John'});.

내가 좋아하는 정말 깨끗한 인터페이스이고 아약스 요청을 다루는 작업은 정말 간단하고 직관적이기 때문에 사용하십시오.하지만이 작업을 수행하는 다른 많은 방법이 있지만 이것이 우리가 작업 할 때하는 일이며 매우 명확하고 이해하기 쉬운 것으로 보입니다

어떻게 작동하고 프로젝트에서 사용하는지에 대한 자세한 내용은 $resource documentation을 참조하십시오.

출처

2016-10-08 06:41:03

AngularJS를 사용하여 서버 측에서 배열을 얻는 방법은 무엇입니까?

답변

관련 문제