https://github.com/useallfive/angular-contentful-service
A contentful.js wrapper for Angular w/ request caching
https://github.com/useallfive/angular-contentful-service
angular contentful contentful-js-sdk
Last synced: 11 days ago
JSON representation
A contentful.js wrapper for Angular w/ request caching
- Host: GitHub
- URL: https://github.com/useallfive/angular-contentful-service
- Owner: UseAllFive
- License: mit
- Created: 2017-10-27T03:58:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-11-12T22:32:40.000Z (over 3 years ago)
- Last Synced: 2025-04-14T06:55:25.774Z (11 days ago)
- Topics: angular, contentful, contentful-js-sdk
- Language: TypeScript
- Homepage: https://goo.gl/j58FoJ
- Size: 272 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[]() [](https://github.com/UseAllFive/angular-contentful-service) [](https://github.com/UseAllFive/angular-contentful-service/issues) [](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2FUseAllFive%2Fangular-contentful-service)
# Angular Contentful Service
A [contentful.js](https://github.com/contentful/contentful.js/) wrapper for [Angular](http://angular.io) that makes our lives just a bit easier. Also, requests to the Contentful API are cached for improved performance!
## Installation
### Install with NPM
```
npm i --save angular-contentful-service
```
### Install contentful
If you haven't already, make sure you install contentful
```
npm i --save contentful
```
### Add to your app module
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ContentfulModule } from 'angular-contentful-service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ContentfulModule.forRoot({
space: 'yadj1kx9rmg0', // your space ID
accessToken: 'fdb4e7a3102747a02ea69ebac5e282b9e44d28fb340f778a4f5e788625a61abe', // your access token
}),
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Use the Contentful Service
```typescript
import { Component } from '@angular/core';
import { ContentfulService } from 'angular-contentful-service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private cs: ContentfulService) {}
getEntries(query?: any) {
this.cs.getEntries(query).then(res => console.log(res));
}
getEntry(id: string, query?: any) {
this.cs.getEntry(id, query).then(res => console.log(res));
}
}
```
## Configuration options
```typescript
{
space: string;
accessToken: string;
insecure?: boolean;
host?: string;
basePath?: string;
httpAgent?: any;
httpsAgent?: any;
proxy?: {
host: string;
port?: number;
auth?: {
username: string;
password: string;
};
};
headers?: any;
application?: string;
integration?: string;
resolveLinks?: boolean;
retryOnError?: boolean;
}
```
## Service methods
### getEntries()
Return all entries filtered by Contentful query
```typescript
getEntries(query?: any): Promise>
```
Information on `EntryCollection` type found here: https://github.com/contentful/contentful.js/blob/master/index.d.ts#L34
Example:
```typescript
this.cs.getEntries({include: 2});
```
### getEntry()
Return a single entry object based on `id` and optional `query` params
```typescript
getEntry(id: string, query?: any): Promise>
```
Information on `Entry` type found here: https://github.com/contentful/contentful.js/blob/master/index.d.ts#L65
Example:
```typescript
this.cs.getEntry('3xd57HfJlSM2qmm8C6cueK', {include: 2})
```
## Contribute
Please feel free to contribute to this repository. To do so, simply clone this repository and run `ng serve` to get the project working locally.
## Brought to you by
[](http://useallfive.com)