1概要

このクイックチュートリアルでは、簡単なAngularJSフロントエンドからRESTful APIを利用する方法を学びます。

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


2 REST API

まず、簡単なAPIを見てみましょう。ページ送りで

Feed

リソースを公開します。


  • ページ付けされる –

    __

    GET

/api/myFeeds?page = \ {page}


  • 更新 –



    PUT

    /api/myFeeds/\ {id}


  • 削除 –



    DELETE

    /api/myFeeds/\ {id}

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


  • page

    :要求されたページのインデックス


  • size

    :1ページあたりの最大レコード数


  • sort

    :ソートに使用されるプロパティの名前


  • sortDir

    :ソート方向

これが、

Feed

リソースの外観の例です。

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


3フィードページ

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

<script
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script
  src="https://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>

データを表示するためにhttp://ng-table.com/#/[ng-table]を使用したことに注意してください – 詳細は次のセクションで説明します。


4角度コントローラー

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

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

ご了承ください:

  • データを表示するために使用するために

    ngTable

    モジュールを注入しました

ユーザーフレンドリーなテーブルとページ付け/ソート操作を処理する
** RESTにアクセスするために使用するために

ngResource

モジュールも注入しました。

APIリソース


5 AngularJSデータテーブル

それでは、

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. その他の操作

最後に、__httpsを使用して多くの操作を実行できます。カスタム機能を定義することもできます。

前のセクションでフィードリストを取得するために

query

を使用しました。

get



query

は両方とも

GET

を実行しますが、

query

は配列応答を処理するために使用されます。


6.1. 新しい

Feed


を追加

新しいフィードを追加するために、以下のように

$ resource

method

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.

Feed


を更新する

次のように、

$ 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.

Feed


を削除

最後に、

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

なしで)
**

$ 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のREST APIを利用した簡単な記事です。

このチュートリアルの

完全な実装

はhttps://github.com/eugenp/reddit-app[the github project]にあります – これはEclipseベースのプロジェクトなので、そのままインポートして実行するのは簡単です。