Angular 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 Angular 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['member'];
        collectionResponse.metadata = {};

        // Put metadata in a property of the collection
        angular.forEach(data, function (value, key) {
          if ('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.

Angular Integration

Table of Contents

# Restangular

# ng-admin