v3.0 AngularJS Integration

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.

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.

Here is a working Restangular config:

'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 :

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

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop