RESTAPI用のシンプルなAngularJSフロントエンド

投稿日: 2019-10-19 2022-10-30
タグ: REST

1. 概要

このクイックチュートリアルでは、単純なAngularJSフロントエンドからRESTfulAPIを使用する方法を学習します。

テーブルにデータを表示し、リソースを作成して更新し、最後に削除します。

2. RESTAPI

まず、単純なAPIを簡単に見てみましょう– Feedリソースをページ付けで公開します。

改ページされる–得る / api / myFeeds？page = {page}＆size = {size}＆sortDir = {dir}＆sort = {propertyName}
作成 – POST / api / myFeeds
アップデート – PUT / api / myFeeds / {id}
消去 – DELETE / api / myFeeds / {id}

ここでの簡単な注意は、ページ付けが次の4つのパラメーターを使用していることです。

ページ：要求されたページのインデックス
size ：ページあたりの最大レコード数
sort ：ソートに使用されるプロパティの名前
sortDir ：並べ替え方向

Feedリソースの例を次に示します。

{
    "id":1,
    "name":"baeldung feed",
    "url":"/feed"
}

3. フィードページ

それでは、フィードページを見てみましょう。

<script 
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script 
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js">
</script>
<script th:src="@{/resources/ng-table.min.js}"></script>
<script th:src="@{/resources/mainCtrl.js}"></script>

<a href="#" ng-click="addNewFeed()">Add New RSS Feed</a>
<table ng-table="tableParams">
    <tr ng-repeat="row in $data track by row.id">
        <td data-title="'Name'" sortable="'name'">{{row.name}}</td>
        <td data-title="'Feed URL'" sortable="'url'">{{row.url}}</td>
        <td data-title="'Actions'">
            <a href="#" ng-click="editFeed(row) ">Edit</a>
            <a href="#" ng-click="confirmDelete(row.id) ">Delete</a>
        </td>
    </tr>
</table>
</div>
</body>
</html>

ng-table を使用してデータを表示したことに注意してください。これについては、次のセクションで詳しく説明します。

4. Angularコントローラー

次に、AngularJSコントローラーを見てみましょう。

var app = angular.module('myApp', ["ngTable", "ngResource"]);
app.controller('mainCtrl', function($scope, NgTableParams, $resource) {
    ...   
});

ご了承ください：

ngTable モジュールを挿入して、ユーザーフレンドリーなテーブルにデータを表示し、ページ付け/並べ替え操作を処理するために使用しました
また、 ngResource モジュールを挿入して、RESTAPIリソースへのアクセスに使用しました

5. AngularJS DataTable

ng-tableモジュールを簡単に見てみましょう。構成は次のとおりです。

$scope.feed = $resource("api/myFeeds/:feedId",{feedId:'@id'});
$scope.tableParams = new NgTableParams({}, {
    getData: function(params) {
        var queryParams = {
            page:params.page() - 1, 
            size:params.count()
        };
        var sortingProp = Object.keys(params.sorting());
        if(sortingProp.length == 1){
    	    queryParams["sort"] = sortingProp[0];
    	    queryParams["sortDir"] = params.sorting()[sortingProp[0]];
        }
        return $scope.feed.query(queryParams, function(data, headers) {
            var totalRecords = headers("PAGING_INFO").split(",")[0].split("=")[1];
            params.total(totalRecords);
            return data;
        }).$promise;
    }
});

APIは特定のスタイルのページ付けを想定しているため、これに合わせて表でカスタマイズする必要があります。 ng-moduleからparamsを使用し、ここで独自のqueryParamsを作成します。

ページネーションに関するいくつかの追加の注意事項：

params.page（）は1から始まるため、APIと通信するときにインデックスがゼロになるようにする必要もあります。
params.sorting（）はオブジェクトを返します–たとえば、 {“ name”：“ asc”} なので、キーと値を2つの異なるパラメーターとして分離する必要があります– sort 、 sortDir
応答のHTTPヘッダーから合計要素数を抽出します

6. その他の操作

最後に、 ngResource モジュールを使用して多くの操作を実行できます– $ resource は、使用可能な操作に関して完全なHTTPセマンティクスをカバーします。カスタム機能を定義することもできます。

前のセクションでqueryを使用して、フィードリストを取得しました。 getとqueryの両方がGETを実行しますが、queryは配列応答の処理に使用されることに注意してください。

**6.1. 新しいフィードを追加します**

新しいフィードを追加するには、 $resourceメソッドsaveを次のように使用します。

$scope.feed = {name:"New feed", url: "http://www.example.com/feed"};

$scope.createFeed = function(){
    $scope.feeds.save($scope.feed, function(){
        $scope.tableParams.reload();
    });
}

**6.2. フィードを更新します**

次のように、 $resourceで独自のカスタムメソッドを使用できます。

$scope.feeds = $resource("api/myFeeds/:feedId",{feedId:'@id'},{
    'update': { method:'PUT' }
});

$scope.updateFeed = function(){
    $scope.feeds.update($scope.feed, function(){
        $scope.tableParams.reload();
    });
}

PUTリクエストを送信するために独自のupdateメソッドを構成した方法に注意してください。

**6.3. フィードを削除します**

最後に、deleteメソッドを使用してフィードを削除できます。

$scope.confirmDelete = function(id){
    $scope.feeds.delete({feedId:id}, function(){
        $scope.tableParams.reload();
    });
}

7. AngularJsダイアログ

それでは、 ngDialog モジュールを使用して、フィードを追加/更新するための簡単なフォームを表示する方法を見てみましょう。

これがテンプレートです。別のHTMLページまたは同じページで定義できます。

<script type="text/ng-template" id="templateId">
<div class="ngdialog-message">
    <h2>{{feed.name}}</h2>
    <input ng-model="feed.name"/>
    <input ng-model="feed.url"/>
</div>
<div class="ngdialog-buttons mt">
    <button ng-click="save()">Save</button>
</div>
</script>

次に、ダイアログを開いてフィードを追加/編集します。

$scope.addNewFeed = function(){
    $scope.feed = {name:"New Feed", url: ""};
    ngDialog.open({ template: 'templateId', scope: $scope});
}
$scope.editFeed = function(row){
    $scope.feed.id = row.id;
    $scope.feed.name = row.name;
    $scope.feed.url = row.url;
    ngDialog.open({ template: 'templateId', scope: $scope});
}
$scope.save = function(){
    ngDialog.close('ngdialog1');
    if(! $scope.feed.id){
        $scope.createFeed();
    } else{
        $scope.updateFeed();
    }
}

ご了承ください：

$ scope.save（）は、ユーザーがダイアログのSaveボタンをクリックしたときに呼び出されます
$ scope.addNewFeed（）は、ユーザーがフィードページの Add New Feed ボタンをクリックすると呼び出され、新しい Feed オブジェクトを初期化します（ id [なし） X158X]）
$ scope.editFeed（）は、ユーザーがフィードテーブルの特定の行を編集するときに呼び出されます

8. エラー処理

最後に、AngularJSを使用して応答エラーメッセージを処理する方法を見てみましょう。

サーバーエラー応答をリクエストごとではなくグローバルに処理するために、インターセプターを $httpProviderに登録します。

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q,$rootScope) {
        return {
            'responseError': function (responseError) {
                $rootScope.message = responseError.data.message;
                return $q.reject(responseError);
            }
        };
    });
}]);

そして、これがHTMLでのメッセージ表現です。

<div ng-show="message" class="alert alert-danger">
    {{message}}
</div>

9. 結論

これは、AngularJSからRESTAPIを使用することについての簡単な説明でした。

このチュートリアルの完全実装は、 githubプロジェクトにあります。これはEclipseベースのプロジェクトであるため、そのままインポートして実行するのは簡単です。

getdocs

13036