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

AngularJS AJAX

AJAX는 비동기 JavaScript 및 XML의 약식입니다. AJAX는 주로 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트하도록 설계되었습니다.

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

AJAX를 사용하면 뒤에서 서버와 소량의 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있습니다. 즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있다는 의미입니다.

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

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

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

  • $resource
  • $http

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

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

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

따라서 높은 수준에서 우리는 이 두 함수가 무엇을 할 수 있는지 알고 $resource 속성을 사용하여 호출할 수 있습니다. 하지만 우리는 그 내용을 정확히 알지 못합니다.tails GetEmployeeDe의tails” 및 “SetEmployeeDetails 기능”과 구현 방법을 설명합니다.

위의 설명은 REST 기반이라고 알려진 것을 설명합니다. archi강의.

  • REST는 표현 상태 전송(Representational State Transfer)으로 알려져 있습니다. archi많은 최신 웹 기반 시스템에서 강의가 이어졌습니다.
  • 이는 GET, POST, PUT 및 DELETE의 일반 HTTP 동사를 사용하여 웹 기반 애플리케이션에서 작업할 수 있음을 의미합니다.

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

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

  • 웹 애플리케이션은 다음과 같은 URL을 노출할 수 있습니다. http://example/events
  • 애플리케이션이 follo인 경우 "GET" 동사를 사용하여 전체 이벤트 목록을 가져올 수 있습니다.wing REST 기반 archi강의.

예를 들어 ID가 1인 이벤트가 있는 경우 de를 얻을 수 있습니다.tails URL을 통해 이 이벤트를 확인하세요. http://example/events/1

$resource 객체가 무엇인가요?

Angular의 $resource 객체는 REST 기반 애플리케이션을 제공하는 서버 작업에 도움이 됩니다. archi강의.

다양한 기능과 함께 @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 속성을 사용하려면 다음을 따르세요.wing 다음 단계를 따라야 합니다.

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

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

팔로우에서wing 예를 들어 'DemoApp' 애플리케이션에서 "ngResource" 모듈을 호출하고 있습니다.

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

단계 3) 다음과 같이 REST 엔드포인트를 사용하여 $resource() 함수 호출wing 예.

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

더 폴로wing 예에서는 엔드포인트 URL을 호출합니다. http://example/events/1

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

위의 예에서 다음과 같습니다.wing 일이 진행되고 있어요

  1. Angular 애플리케이션을 정의할 때 DemoApp은 Angular 애플리케이션에 지정된 이름인 'DemoApp.services' 문을 사용하여 서비스가 생성됩니다.
  2. .factory 메소드는 de를 생성하는 데 사용됩니다.tails 이 새로운 서비스의.
  3. '항목'은 당사 서비스에 제공하는 이름으로, 귀하가 제공하려는 이름이 될 수 있습니다.
  4. 이 서비스에서는 $resource API를 호출하는 함수를 생성합니다.
  5. $resource('/example/Event/:1). $resource 함수는 REST 엔드포인트를 호출하는 데 사용되는 서비스입니다. REST 끝점은 일반적으로 URL입니다. 위 함수에서는 URL(/example /Event/:1)을 REST 엔드포인트로 사용하고 있습니다. REST 엔드포인트(/example /Event/:1)는 기본 사이트 “example”에 이벤트 애플리케이션이 있음을 나타냅니다. 이 이벤트 애플리케이션은 REST 기반을 사용하여 개발되었습니다. archi강의.
  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 )는 다음을 반환합니다.wing 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 개체를 표시할 수 있습니다.

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

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

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

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

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 개체에 대해 "이름"이라는 키와 "설명"이라는 값이 표시됩니다.

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