AngularJSのサービスとサーバーと通信するサービス

24-07-2022
Toanngo92
0 Comments

AngularJSのサービスの概念は、特定のタスクを実行し、エンティティをパーソナライズするのに役立ち、コードの保守とテストが簡単で、サービスはAngularJSで記述されたアプリケーションで非常に重要な役割を果たします。Angularが提供してくれた利用可能なサービスはすでにあります。ただし、新しいサービスを作成することで完全に拡張できます。 AngularJSに組み込まれているサービスの一部を次に示します。

 $anchorScroll $animate $cacheFactory $compile $controller $document $exceptionHandler $filter $http $httpBackend $interpolate $interval $locale $location $log $parse $q $rootElement $rootScope $sce $sceDelegate $templateCache $templateRequest $timeout $window $event

Mục lục

いくつかの人気のあるサービスを紹介するか、使用する

$scopeと$rootscope

詳細については、AngularJSの記事スコープをご覧ください

$ window

純粋なJavaScriptのウィンドウオブジェクトに似ています。

$ event

純粋なJavaScriptのイベントオブジェクトに似ており、イベントをキャッチするために使用されます

$ location

純粋なJavaScriptのロケーションオブジェクトに類似した現在のブラウザのURLを表します

$ http

この$httpサービスを使用するには、REST APIアーキテクチャを理解する必要があります。開始する前に、サービス通信とRESTAPIの概念の記事で詳細を確認してください。

ドキュメント： https ：//docs.angularjs.org/api/ng/service/$http

angleJSの$httpは、.get（）、. post（）メソッドを介してサーバーと通信し、Ajax（）を介してデータを取得または送信するangularJSのサービス（ビジネス）です。メッセージデータはJSONとして返され、このメカニズムは非同期です。メカニズム、javascriptはサーバー側に要求を送信し、ソースコードは応答を待たずに実行を継続し、サーバーがデータをブラウザーに送り返すと、戻りデータをキャッチして続行します。プログラマーが定義したコードを実行します。データの解析、HTMLの更新など、返されたデータを処理します。GET、POST、PUT、DELETEなどの基本的なRESTAPIメソッドが定義されています。 $httpサービスで利用できます。

構文：

 $http({ method: 'GET', url: '/endpoint', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } // optional }) .then( function (success) { // do something when success }, function (error) { // do something when error } );

さらに、2つのメソッドのショートカットもあり、構文がより簡潔になり、適用するのに適したメソッドを選択できます。

 app.run(function($http) { $http.defaults.headers.common['Authorization'] = 'Basic APIKEY'; }); // optinal config header $http.get('/someUrl', config).then(successCallback, errorCallback); $http.post('/someUrl', data, config).then(successCallback, errorCallback);

$ httpサービスは関数であり、1つのパラメーターを取ります。このパラメーターは、要求の構成オブジェクト（オブジェクト）です。このオブジェクトは、HTTPメソッドの状態、URLパスを定義し、はいの場合はメソッドのヘッダーを構成します。または、構成できます。メソッドがPOSTの場合は本文…

httpリクエストが送信または返されるときのオブジェクトは、次の構造を持っています。

data ：標準に従ってサーバー側から返されるデータであり、文字列またはテキストのいずれかです。
ステータス：HTTPステータスコード
ヘッダー：ヘッダー情報を参照してください
config ：httpリクエスト設定オブジェクトへの参照

HTTPメソッドが呼び出されると、返されるオブジェクトはpromiseオブジェクトと呼ばれます。このオブジェクトには標準メソッド.then（）が含まれています。つまり、成功したリターンシグナルの後で、何かを実行し、成功またはエラーを処理するときに状況をキャッチします。 then（）関数のパラメーターは2つのコールバック関数であり、パラメーターは成功変数であり、要求が成功したときにオブジェクトを格納します。エラー変数は、要求でエラーが発生したときにオブジェクトを格納します。成功した場合、エラーが発生したときのエラー変数と同様に、成功変数で返されたデータを使用して何かを実行するという意味を理解できます。

これは、$ httpサービスのget（）メソッドを使用してサーバーと通信する例です。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', []); // app.run(function($http) { // $http.defaults.headers.common['Authorization'] = 'Basic keyMhcG4dscdHl3Nf'; // }); app.controller('listUserController', function ($scope, $http) { $scope.listUser = []; $scope.getListUser = $http({ url: "https://urlservcer", method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } }).then( function (data) { $scope.users = data.data.records; }, function (error) { console.log(error); alert("get list Failed"); }); // $scope.getListUser(); }); </script> </html>

上記の例を考慮して、$ httpサービスを介してサーバーにgetメソッドを送信しています。取得された後のデータは、.then（）メソッドを介して返されます。このメソッドには、2つのパラメーターが渡されます。別の関数、最初のパラメーターはリクエストを正常に送信したときのコールバック関数（200）。2番目のパラメーターは、リクエストがエラーを報告したときに呼び出される関数です。

さらなる開発では、ユーザーのリストを表示するCRUD機能を実装し、getメソッドとpostメソッドを組み合わせてサーバー側に新しいユーザーを追加できます。

$ resources

ドキュメント： https ：//docs.angularjs.org/api/ngResource/service/$resource

angleJSの$resourceサービスを使用すると、$ httpと同様にRESTアプリケーションにアクセスできますが、データ標準はJSON標準を満たし、正しい構造に準拠している必要があります。つまり、$ resourceはエンドポイントからデータを受信し、データには独自の正規化があります。データと対話してからデータを送り返します。これは、CRUDアプリケーションの開発に非常に役立ちます。比較すると、$httpは$resourceよりも多様なサーバーと対話しますが、$ resourceを使用すると、サーバー層のデータが正規化されている場合、操作が高速になります。

例$resource.application

ステップ1：リソースフォルダーにindex.htmlファイルを作成します

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example resourece</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> --> <script src="https://code.angularjs.org/1.2.32/angular-resource.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', ['ngResource']); // app.run(function($http) { // $http.defaults.headers.common['Authorization'] = 'Bearer keyMhcG4dscdHl3Nf'; // }); app.controller('listUserController', function ($scope, $resource) { $scope.users = []; $scope.getListUsers = $resource('http://localhost/resource/listuser.json').query(function(){ $scope.users = $scope.getListUsers; }); // console.log( $scope.getListUsers); }); </script> </html>

手順2：オブジェクトのjson構造配列を使用して、インデックスファイルと同じレベルにファイルlistuser.jsonを作成します。

 [ { "id": "recFrt8MNiEg4jInj", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0911222333", "username": "toan1234", "fullname": "username 3" } }, { "id": "recT2YNM75XbD4E4T", "createdTime": "2022-04-27T13:15:49.000Z", "fields": { "phonenumber": "0932159215", "username": "to9an1134", "fullname": "Toan ngo vinh" } }, { "id": "recaE9soCIeZgyhVP", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0932321592", "username": "toanngo92", "fullname": "toan ngo" } }, { "id": "rectJwBmOAsWDWHnw", "createdTime": "2022-04-28T01:03:47.000Z", "fields": { "phonenumber": "0932159215", "username": "to9an1134", "fullname": "Toan ngo vinh" } }, { "id": "recvDBMvANFv5UiK8", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0782222567", "username": "toan123", "fullname": "username 2" } } ]

RESTAPIを介してアクセスした場合の$httpと$resourceの違い

AJAXを介した$httpサービス処理メカニズム、およびほとんどのプログラマーは、このビジネスを通じてGET、POST、DELETE …を作成し、返されたオブジェクトを処理する場合に使用しますが、実際のプロジェクトではあまり一般的に使用されていません。その複雑な構造、少ないサンプルコード、および戻りデータは約束されていないため、新規参入者がアクセスするのはより困難です。

RESTfulシナリオでは、$resourceが$httpをハグします。つまり、RESTful Webサービスでは、$resourceが使用するオプションです。 $ httpを使用すると、他の構造でサーバーにリクエストを送信できます。たとえば、APIのデータ構造に従わないWebサイトにリクエストを送信し、リクエストから返されたhtmlコンテンツ全体として返されたデータを受信します。 $ resourceに関しては、RESTfulの構造に従います。

長方形

ドキュメント：

RESTサービスにアクセスできるサービスの1つは、依存性注入によってプロジェクトに注入されるサードパーティのライブラリであるRestangularです。書き込むコードの量を減らすことでHTTPリクエストを簡素化し、angularJSのデフォルトの$ httpを置き換えるインタラクティブなRESTfulAPIアプリケーションを作成するために使用できます。もちろん、デフォルトのメソッドは完全です。

Restangularの強み：

すべてのHTTPメソッドをサポートします
URLを何度も書き換える必要はありません。リソースのエンドポイントを一度定義するだけで、次回はエンドポイント構造に従って通信します。
カスタムメソッド構成を許可する

RestangularでGETメソッドを実装する場合の例：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> <!-- bat buoc phai load lodash truoc khi load restangular --> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/restangular@1.6.1/src/restangular.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', ['restangular']); app.config(function (RestangularProvider) { RestangularProvider.setBaseUrl('https://api.airtable.com/v0/apppcdfKQ5q5rch7A'); RestangularProvider.setDefaultHeaders({ 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' }); }); app.controller('listUserController', function ($scope, Restangular) { $scope.users = []; $scope.getListUsers = Restangular.all('user').doGET().then(function (result) { $scope.users = result.records; console.log($scope.users); }); console.log($scope.getListUsers); }); </script> </html>

クライアント/サーバー通信時のエラー処理

実際には、接続の問題、サーバーインフラストラクチャの障害、データベースの障害など、多くの状況が発生するため、エラー処理と例外ログは通信において非常に重要です。

これらの例外をキャッチするには、try、catch、finallyブロックを使用します。 angleJSでは、例外をキャッチするために使用される$ exceptionHandleサービスがあり、アプリケーションのルートに影響を与えないため、時間を節約する方法があります。これらのエラーは通常、構文に関連していないためです。

angleJSの例外の例：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', []); app.config(function($provide){ $provide.decorator('$exceptionHandler',function($delegate){ return function (exception,cause){ console.log(exception,cause); $delegate($exception,cause); } }); }); app.controller('listUserController', function ($scope, $http) { $scope.users = []; $http({ url: "https://api.airtable.com/v0/apppcdfKQ5q5rch7A/user", method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } }).then( function (data) { console.log(data); $scope.users = data.data.records; console.log($scope.users); }, function (error) { console.log(error); alert("get list Failed"); }); // $scope.getListUser(); }); </script> </html>

THÊM BÌNH LUẬN Cancel reply

次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。

Dịch vụ thiết kế Wesbite
NỘI DUNG MỚI CẬP NHẬT

MacOSにPHPを手動でインストールする

SQLServer2019のSQLの高度な機能

AzureSQLの紹介

SQLServerのJSONデータ

LinuxおよびUnixOSにPHPを手動でインストールする