Contentful module for AngularJS, providing access to the content delivery API

Module License: MIT

Added by: Sam Deering





Stars: 18

Watchers: 18

Forks: 2

Module Description


ng-contentful is a AngularJS module for accessing the Contentful CMS content delivery API and integrate content like blog posts and articles into your website or single-page app.

It wraps the contentful.js module into AngularJS modules, integrates its asynchronous operations in the digest-cycle and provides a couple of helpers for displaying content.

What is Contentful ?

Contentful is a flexible and future-friendly content management platform to create and manage your content as well as to deliver it onto mobile and web applications and any other platform.


This module is not being maintained or updated anymore. You can find a more up to date solution by the community at


bower install ng-contentful

Then just include the file by script-tag.
Note that you also need to include contentful.js (declared as a dependency in the bower.json).

<script type="text/javascript" charset="utf-8" src="bower_components/contentful/dist/contentful.min.js"></script>
<script type="text/javascript" charset="utf-8" src="bower_components/ng-contentful/ng-contentful.js"></script>


  1. Require the module
  2. In the config phase you set up your connection like so:
    var myApp = angular.module('myApp', ['ng-contentful']);
    myApp.config(function (contentfulClientProvider) {
        // any other options, see contentful.js documentation


There are currently three services available:

  • contentfulClient: The base service to make requests to the server
  • ContentTypeList: Mechanism to synchronously and asynchronously look up contentTypes
  • EntryController: Controller to help work with entries


Require the contentfulClient service and call the available methods (see Contentful.js documentation. Process the responses via Promises:

myApp.controller('SpaceController', function ($scope, contentfulClient) { (space) {
    $ = space;


Provides three methods:

  • lookupContentType(id): lookup the contentType by id by fetching the information from the server if necessary. Returns a promise.
  • loadAllContentTypes(): Loads all available contentTypes from the server. Returns a promise
  • getContentType(id): Synchronously returns contentType. Returns null if contentType is not yet know to the client.


The EntryController assumes there's an entry on the scope.

Exposes two methods:

  • $scope.entryTitle(): Returns the title for an entry
  • $scope.contentType(): Returns the contentType for an entry if available locally. If not available, it triggers a lookup and when the lookup is done, $apply gets called so that it then returns the contentType.


A minimum working code example would have two parts besides the setup (see section "Setup").

First, you need to load the ContentTypes and entries (for additional arguments to the entries call or other methods available on contentfulClient please refer to the Contentful.js documentation):


  $scope.entries = entries;

Then, to iterate over your entries in a template:

<div ng-repeat="entry in entries track by" ng-controller="EntryController">
  Entry {{entryTitle()}}
    <li ng-repeat="field in contentType().fields track by">
      {{}}: {{entry.fields[]}}

You can see an example in this Plunker:

Module stats last updated: 2017-11-14 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!