https://github.com/contentful/ng-contentful
Contentful module for AngularJS, providing access to the content delivery API
https://github.com/contentful/ng-contentful
Last synced: 10 months ago
JSON representation
Contentful module for AngularJS, providing access to the content delivery API
- Host: GitHub
- URL: https://github.com/contentful/ng-contentful
- Owner: contentful
- Archived: true
- Created: 2014-03-21T15:15:56.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2017-05-29T11:09:11.000Z (about 9 years ago)
- Last Synced: 2024-09-22T15:32:28.525Z (almost 2 years ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 17
- Watchers: 11
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# This repository is deprecated. There is no further support or maintenence planned.
You can find a more up to date solution by the community at [https://github.com/jvandemo/angular-contentful](https://github.com/jvandemo/angular-contentful)
---
# ng-contentful
ng-contentful is a [AngularJS][angularjs] module for accessing the [Contentful][contentful] CMS
[content delivery API][docs] and integrate content like blog posts and
articles into your website or single-page app.
It wraps the [contentful.js][cfjs] 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.
## Installation
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).
## Setup
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) {
contentfulClientProvider.setOptions({
// any other options, see contentful.js documentation
});
contentfulClientProvider.setSpaceId('mySpaceId');
contentfulClientProvider.setAccessToken('myAccessToken');
});
```
## Usage
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
### contentfulClient
Require the `contentfulClient` service and call the available methods
(see [Contentful.js documentation][cfjs]. Process the responses via
Promises:
myApp.controller('SpaceController', function ($scope, contentfulClient) {
contentfulClient.space().then(function (space) {
$scope.space = space;
});
});
### ContentTypeList
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.
### EntryController
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.
## Example
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][cfjs]):
```js
ContentTypeList.loadAllContentTypes();
contentfulClient.entries().then(function(entries){
$scope.entries = entries;
});
```
Then, to iterate over your entries in a template:
```html
Entry {{entryTitle()}}
-
{{field.name}}: {{entry.fields[field.id]}}
```
You can see an example in this Plunker: http://plnkr.co/edit/JboHnB7AgzpizfjbzuIq
[angularjs]: http://angularjs.org
[contentful]: http://contentful.com
[docs]: https://www.contentful.com/developers/documentation/content-delivery-api/
[cfjs]: https://github.com/contentful/contentful.js