AngularJS AJAX – $http를 사용하여 AJAX 호출하기

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

AngularJS AJAX

AJAX는 Asynchronous의 약자입니다. Java스크립트와 XML. AJAX는 주로 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트하도록 설계되었습니다.

이 기술을 설계한 이유는 클라이언트와 서버 사이의 왕복 횟수와 사용자가 특정 정보를 요청할 때마다 발생하는 전체 페이지 새로 고침 횟수를 줄이기 위해서였습니다.

AJAX는 서버와 백그라운드에서 소량의 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있게 했습니다. 즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있었습니다.

많은 최신 웹 애플리케이션은 실제로 페이지를 새로 고치거나 서버에서 데이터를 가져오기 위해 이 기술을 따릅니다.

$resource를 사용하여 서버와 높은 수준의 상호 작용

Angular는 Ajax 요청을 처리하기 위해 두 가지 API를 제공합니다. 그들은

  • $resource
  • $http

높은 수준에서 서버와 상호 작용하는 데 사용되는 Angular의 "$resource" 속성을 살펴보겠습니다.

더 높은 수준의 상호 작용에 관해 이야기할 때, 이는 서버가 기능과 관련하여 제공해야 하는 것에 대해서만 관심을 가질 뿐, 이 기능과 관련하여 서버가 세부적으로 수행하는 작업에 대해서는 관심을 두지 않는다는 것을 의미합니다.

예를 들어, 서버가 특정 회사의 직원 정보를 유지 관리하는 애플리케이션을 호스팅하는 경우 서버는 GetEmployeeDetails, SetEmployeeDetails 등의 기능을 클라이언트에 노출할 수 있습니다.

따라서 높은 수준에서 우리는 이 두 함수가 무엇을 할 수 있는지 알고 있으며, $resource 속성을 사용하여 호출할 수 있습니다. 하지만 "GetEmployeeDetails"와 "SetEmployeeDetails 함수"의 세부 사항과 구현 방법을 정확히 알지 못합니다.

위의 설명은 REST 기반 아키텍처에 대한 설명입니다.

  • REST는 Representational State Transfer의 약자로, 많은 현대 웹 기반 시스템에서 따르는 아키텍처입니다.
  • 이는 GET, POST, PUT 및 DELETE의 일반 HTTP 동사를 사용하여 웹 기반 애플리케이션에서 작업할 수 있음을 의미합니다.

그럼 다음과 같은 목록을 유지하는 웹 애플리케이션이 있다고 가정해 보겠습니다. 행사.

모든 이벤트 목록을 확인하고 싶다면,

  • 웹 애플리케이션은 다음과 같은 URL을 노출할 수 있습니다. http://example/events and
  • 애플리케이션이 REST 기반 아키텍처를 따르는 경우 "GET" 동사를 사용하여 전체 이벤트 목록을 가져올 수 있습니다.

예를 들어, ID가 1인 이벤트가 있다면 URL을 통해 이 이벤트의 세부 정보를 얻을 수 있습니다. http://example/events/1

$resource 객체가 무엇인가요?

Angular의 $resource 객체는 REST 기반 아키텍처에서 애플리케이션을 제공하는 서버와 협력하는 데 도움이 됩니다.

다양한 기능과 함께 @resource 문의 기본 구문은 다음과 같습니다.

@resource 문의 구문

var resource Object = $resource(url);

ResourceObject가 있으면 아래 함수를 사용하여 필요한 REST 호출을 수행할 수 있습니다.

1. get([params], [success], [error]) – 표준 GET 호출을 만드는 데 사용할 수 있습니다.

2. save([params], postData, [success], [error]) – 이는 표준 POST 호출을 만드는 데 사용할 수 있습니다.

3. query([params], [success], [error]) – 표준 GET 호출을 수행하는 데 사용할 수 있지만 응답의 일부로 배열이 반환됩니다.

4. 제거([params], postData, [success], [error]) – 이는 표준 DELETE 호출을 수행하는 데 사용할 수 있습니다.

아래에 제공된 모든 함수에서 'params' 매개변수는 URL에 전달되어야 하는 필수 매개변수를 제공하는 데 사용될 수 있습니다.

예를 들어,

  • 다음과 같이 get 함수에서 Topic: 'Angular' 값을 'param'으로 전달한다고 가정합니다.
  • 얻다('http://example/events' ,'{ 주제: 'Angular' }')
  • URL http://example/events?Topic=Angular get 함수의 일부로 호출됩니다.

관련 기사

AngularJS $resource 속성을 사용하는 방법

$resource 속성을 사용하려면 다음 단계를 따라야 합니다.

단계 1) "angular-resource.js" 파일은 Angular.JS 사이트에서 다운로드하여 애플리케이션에 배치해야 합니다.

단계 2) 애플리케이션 모듈은 $resource를 사용하기 위해 “ngResource” 모듈에 대한 종속성을 선언해야 합니다.

다음 예에서는 'DemoApp' 애플리케이션에서 "ngResource" 모듈을 호출합니다.

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

단계 3) 다음 예제와 같이 REST 엔드포인트로 $resource() 함수를 호출합니다.

이렇게 하면 $resource 개체는 REST 끝점에서 제공하는 필수 기능을 호출할 수 있게 됩니다.

다음 예제에서는 엔드포인트 URL을 호출합니다. http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

위의 예에서는 다음 작업이 수행됩니다.

  1. Angular 애플리케이션을 정의할 때 DemoApp은 Angular 애플리케이션에 지정된 이름인 'DemoApp.services' 문을 사용하여 서비스가 생성됩니다.
  2. .factory 메서드는 새로운 서비스의 세부정보를 생성하는 데 사용됩니다.
  3. '항목'은 당사 서비스에 제공하는 이름으로, 귀하가 제공하려는 이름이 될 수 있습니다.
  4. 이 서비스에서는 $resource API를 호출하는 함수를 생성합니다.
  5. $resource('/example/Event/:1). $resource 함수는 REST 엔드포인트를 호출하는 데 사용되는 서비스입니다. REST 엔드포인트는 일반적으로 URL입니다. 위의 함수에서 URL(/example /Event/:1)을 REST 엔드포인트로 사용하고 있습니다. REST 엔드포인트(/example /Event/:1)는 메인 사이트 "example"에 이벤트 애플리케이션이 있다는 것을 나타냅니다. 이 이벤트 애플리케이션은 REST 기반 아키텍처를 사용하여 개발되었습니다.
  6. 함수 호출의 결과는 리소스 클래스 개체입니다. 이제 리소스 개체에는 호출할 수 있는 함수( get() , query() , save() , Remove(), delete() )가 있습니다.

단계 4) 이제 위 단계에서 반환된 메서드( get() , query() , save() , Remove(), delete() )를 컨트롤러에서 사용할 수 있습니다.

아래 코드 조각에서는 get() 함수를 예로 사용하고 있습니다.

get() 함수를 활용할 수 있는 코드를 살펴보겠습니다.

angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
  var obj = MyFunction.get({ 1: $scope.id }, function() {
    console.log(obj);
  });

위 단계에서,

  • 위 코드 조각의 get() 함수는 /example /Event/:1에 GET 요청을 보냅니다.
  • URL의 매개변수:1은 $scope.id로 대체됩니다.
  • get() 함수는 서버에서 실제 데이터가 들어올 때 자동으로 채워지는 빈 객체를 반환합니다.
  • get()의 두 번째 인수는 서버에서 데이터가 도착할 때 실행되는 콜백입니다. 전체 코드의 가능한 출력은 "예" 웹사이트에서 노출된 이벤트 목록을 반환하는 JSON 개체입니다. 반환될 수 있는 내용의 예는 아래와 같습니다. 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

$http와의 낮은 수준 서버 상호 작용

$http는 원격 서버에서 데이터를 읽는 데 사용되는 또 다른 Angular JS 서비스입니다. 서버에서 읽는 가장 널리 사용되는 데이터 형식은 JSON 형식의 데이터입니다.

우리가 PHP 페이지 ( http://example/angular/getTopics.PHP ) 다음 JSON 데이터를 반환합니다.

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

서버에서 위의 데이터를 가져오는 데 사용할 수 있는 $http를 사용하는 AngularJS 코드를 살펴보겠습니다.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

위의 예에서

  1. $http 서비스의 "get" 기능을 사용할 수 있도록 컨트롤러 기능에 $http 서비스를 추가하고 있습니다.
  2. 이제 HTTP 서비스의 get 함수를 사용하여 URL에서 JSON 개체를 가져옵니다. http://example /angular/getTopics.PHP
  3. '응답' 객체를 기반으로 데이터 레코드를 반환하는 콜백 함수를 생성한 후 이를 $scope 객체에 저장합니다.
  4. 그런 다음 컨트롤러에서 $scope.names 변수를 사용하고 이를 뷰에서 사용하여 그에 따라 JSON 개체를 표시할 수 있습니다.

SQL에서 데이터를 가져오는 방법 및 MySQL AngularJS를 사용하는 서버

Angular를 사용하여 실행 중인 서버에서 데이터를 가져올 수도 있습니다. MySQL 또는 SQL.

아이디어는 PHP 페이지가 MySQL 데이터베이스 또는 Asp.Net MS에 접속하는 페이지 SQL 서버 데이터베이스인 경우 PHP와 ASP.Net 페이지가 모두 JSON 형식으로 데이터를 렌더링하는지 확인해야 합니다.

다음은 SQL에서 데이터를 가져오는 방법에 대한 단계별 프로세스입니다. MySQL AngularJS를 사용하는 서버.

PHP 사이트(http://example /angular/getTopics.PHP) 다음 중 하나에서 데이터를 제공합니다. MySQL 또는 SQL 데이터베이스.

단계 1) 다음에서 데이터를 가져옵니다. MySQL 데이터베이스
첫 번째 단계는 PHP 페이지가 다음에서 데이터를 가져오는지 확인하는 것입니다. MySQL 데이터베이스를 구축하고 JSON 형식으로 데이터를 제공합니다.

단계 2) $http 서비스를 사용하여 JSON 데이터 가져오기
$http 서비스를 사용하여 JSON 데이터를 가져오려면 위에 표시된 유사한 코드를 작성하세요.

서버에서 위의 데이터를 가져오는 데 사용할 수 있는 $http를 사용하는 AngularJS 코드를 살펴보겠습니다.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

단계 3) 다음을 사용하여 뷰에서 데이터를 렌더링합니다. ng-repeat 지시어

아래에서는 ng-repeat 지시문을 사용하여 $http 서비스의 "get" 메서드에서 반환된 JSON 개체의 각 키-값 쌍을 살펴봅니다.

각 JSON 개체에 대해 "이름"이라는 키를 표시하고 값은 "Descript이온".

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

요약

  • AJAX의 전체 형식은 비동기입니다. Java스크립트 그리고 XML.
  • 우리는 무엇인지 살펴보았습니다. 평안한 아키텍처는 GET, POST, PUT, DELETE와 같은 일반 HTTP 동사를 기반으로 웹 애플리케이션에서 노출되는 기능에 불과합니다.
  • $resource 객체는 Angular와 함께 상위 수준에서 RESTFUL 웹 애플리케이션과 상호 작용하는 데 사용됩니다. 즉, 웹 애플리케이션에 의해 노출된 기능만 호출할 뿐 기능이 구현되는 방식에는 신경 쓰지 않는다는 의미입니다.
  • 또한 웹 애플리케이션에서 데이터를 가져오는 데 사용할 수 있는 $http 서비스도 살펴보았습니다. 이는 $http 서비스가 보다 세부적인 수준에서 웹 애플리케이션과 작동할 수 있기 때문에 가능합니다.
  • $http 서비스의 강력한 기능으로 인해 이 서비스를 사용하여 MySQL 또는 PHP 애플리케이션을 통한 MS SQL Server. 그런 다음 ng-repeat 지시어를 사용하여 데이터를 테이블로 렌더링할 수 있습니다.

당신은 좋아할 것입니다 :