Api Platform conference
Register now
v2.6 AngularJS Integration
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

API Platform Conference 2024: meet the best PHP, JavaScript and API experts

Learn more about the event, register for the conference, and get ready for two days of inspiration, ideas, and knowledge-sharing with our incredible lineup of renowned specialists and advocates.

Register now

# 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
    .config(['RestangularProvider', function(RestangularProvider) {
        // The URL of the API endpoint

        // JSON-LD @id support
            id: '@id',
            selfLink: '@id'

        // 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

            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) {

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

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

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

    return identifierValue ? decodeURIComponent(identifierValue) : url;



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