AngularJS Integration

Warning: for a new project, you should consider using the API Platform's Progressive Web App generator (that supports React and Vue.js) instead of this Angular v1 integration.

警告: 新しいプロジェクトでは、この Angular v1 統合の代わりに、API プラットフォームのプログレッシブ Web アプリ ジェネレーター (React と Vue.js をサポートする) の使用を検討する必要があります。

Restangular

API Platform works fine with AngularJS v1. The popular Restangular REST client library for Angular can easily be configured to handle the API format.

API プラットフォームは AngularJS v1 で正常に動作します。人気のある Angular 用の RestangularREST クライアント ライブラリは、API 形式を処理するように簡単に構成できます。

Here is a working Restangular config:

これは、作業中のRestangular構成です:

'use strict';

var app = angular
    .module('myAngularjsApp')
    .config(['RestangularProvider', function(RestangularProvider) {
        // The URL of the API endpoint
        RestangularProvider.setBaseUrl('http://localhost:8000');

        // JSON-LD @id support
        RestangularProvider.setRestangularFields({
            id: '@id',
            selfLink: '@id'
        });
        RestangularProvider.setSelfLinkAbsoluteUrl(false);

        // Hydra collections support
        RestangularProvider.addResponseInterceptor(function(data, operation) {
            // Remove trailing slash to make Restangular working
            function populateHref(data) {
                if (data['@id']) {
                    data.href = data['@id'].substring(1);
                }
            }

            // Populate href property for the collection
            populateHref(data);

            if ('getList' === operation) {
                var collectionResponse = data['hydra:member'];
                collectionResponse.metadata = {};

                // Put metadata in a property of the collection
                angular.forEach(data, function(value, key) {
                    if ('hydra:member' !== key) {
                        collectionResponse.metadata[key] = value;
                    }
                });

                // Populate href property for all elements of the collection
                angular.forEach(collectionResponse, function(value) {
                    populateHref(value);
                });

                return collectionResponse;
            }

            return data;
        });
    }]);

ng-admin

If you want to use ng-admin, set the Restangular config, then create your entities like in the following example :

ng-admin を使用する場合は、Restangular 構成を設定してから、次の例のようにエンティティを作成します。

'use strict';

var nga = NgAdminConfigurationProvider;

var admin = nga
    .application('My First Admin')
    .baseApiUrl('http://localhost:8000');

var article = nga.entity('articles');
article.identifier(nga.field('@id'));
article.url(function(entityName, viewType, identifierValue) {
    var url = '/' + entityName;

    if (viewType === 'ListView' || viewType === 'CreateView') {
        return url;
    }

    return identifierValue ? decodeURIComponent(identifierValue) : url;
});

article.listView().fields([
    nga.field('title'),
    nga.field('content')
]);

admin.addEntity(article);
nga.configure(admin);

You can look at what we have done on api-platform/admin.

api-platform/admin で行ったことを確認できます。