AngularJS AJAX – $http を使用して AJAX 呼び出しを行う

AngularJS AJAX

AJAXはAsynchronousの略称です Javaスクリプトと XML。AJAX は主に、ページ全体を再読み込みせずに Web ページの一部を更新するために設計されました。

このテクノロジーを設計した理由は、クライアントとサーバーの間で行われる往復回数と、ユーザーが特定の情報を必要とするたびに発生していたページ全体の更新回数を削減することでした。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期的に更新できます。つまり、ページ全体を再読み込みせずに、Web ページの一部を更新できます。

最近の Web アプリケーションの多くは、実際にこの手法に従ってページを更新したり、サーバーからデータを取得したりしています。

$resource を使用したサーバーとの高レベルの対話

Angular は、Ajax リクエストを処理するために XNUMX つの異なる API を提供します。 彼らです

  • $リソース
  • $http

Angular の「$resource」プロパティを見ていきます。これは、高レベルでサーバーと対話するために使用されます。

より高いレベルでの対話について話すとき、それは、サーバーがこの機能に関して詳細に何を行うかではなく、サーバーが機能に関して何を提供するかについてのみ気にすることを意味します。

たとえば、サーバーが特定の会社の従業員情報を管理するアプリケーションをホストしている場合、サーバーは GetEmployeeDetails、SetEmployeeDetails などの機能をクライアントに公開する可能性があります。

つまり、大まかに言えば、これら 2 つの関数で何ができるかはわかっており、$resource プロパティを使用してそれらを呼び出すことができます。しかし、“GetEmployeeDetails” 関数と “SetEmployeeDetails 関数” の詳細や、それがどのように実装されているかは正確にはわかりません。

上記の説明は、REST ベースのアーキテクチャと呼ばれるものについて説明しています。

  • REST は Representational State Transfer として知られており、多くの最新の Web ベース システムで採用されているアーキテクチャです。
  • これは、通常の HTTP 動詞の GET、POST、PUT、および DELETE を使用して Web ベースのアプリケーションを操作できることを意味します。

それでは、次のリストを保持する Web アプリケーションがあると仮定しましょう。 イベント .

すべてのイベントのリストを取得したい場合は、

  • Web アプリケーションは次のような URL を公開できます。 http://example/events
  • アプリケーションが 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.remove([params], postData, [success], [error]) – これは標準の DELETE 呼び出しを行うために使用できます。

以下に示すすべての関数では、「params」パラメータを使用して、URL で渡す必要がある必須パラメータを提供できます。

たとえば、

  • Topic: 'Angular' の値を get 関数の '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.services」を使用して作成されます。DemoApp は Angular アプリケーションに与えられた名前です。
  2. この新しいサービスの詳細を作成するには、.factory メソッドが使用されます。
  3. 「Entry」はサービスに付ける名前で、任意の名前を付けることができます。
  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() の XNUMX 番目の引数は、サーバーからデータが到着したときに実行されるコールバックです。 コード全体の可能な出力は、「サンプル」Web サイトから公開されたイベントのリストを返す 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 動詞に基づいて Web アプリケーションによって公開される機能に他なりません。
  • $resource オブジェクトは、RESTFUL Web アプリケーションと高レベルで対話するために Angular で使用されます。つまり、Web アプリケーションによって公開される機能のみを呼び出しますが、機能の実装方法は気にしません。
  • Web アプリケーションからデータを取得するために使用できる $http サービスについても調べました。 これが可能なのは、$http サービスが Web アプリケーションをより詳細なレベルで操作できるためです。
  • $http サービスの機能により、これを使用して、 MySQL または PHP アプリケーション経由の MS SQL Server。その後、ng-repeat ディレクティブを使用してデータをテーブルにレンダリングできます。