142 | {{ $contentfulEntry | json }}
143 |
144 | ```
145 |
146 | to specify the number of levels of linked entries to resolve.
147 |
148 | #### Fetch an entry by query string
149 |
150 | Often you want to fetch an entry by a property other than `sys.id`.
151 |
152 | Therefore the directive also allows you to specify a query string instead of an id like this:
153 |
154 | ```xml
155 | 156 | Hi {{ $contentfulEntry.fields.name }}! 157 |
158 | ``` 159 | 160 | **Notice** 161 | 162 | Behind the scenes all entries matching your query will be fetched and the first item will be assigned to `$contentfulEntry`. 163 | 164 | To reduce data traffic it is highly recommended to use a query string that results in only one entry or add a `limit=1` statement to your query like this: 165 | 166 | ```xml 167 |168 | Hi {{ $contentfulEntry.fields.name }}! 169 |
170 | ``` 171 | 172 | ## The contentful-entries directive 173 | 174 | Fetches multiple Contentful entries asynchronously in the background and makes them available in your child markup as `$contentfulEntries` as soon as a response from Contentful is received. 175 | 176 | Takes an optional query string value to pass to the Contentful content delivery API. 177 | 178 | For example, to fetch all entries in your space: 179 | 180 | ```xml 181 |-
182 |
- 183 | {{ entry.fields.name }} 184 | 185 |
-
193 |
- 194 | {{ dog.fields.name }} 195 | 196 |
-
200 |
- 201 | {{ dog.fields.name }} 202 | 203 |
-
212 |
-
213 |
{{ dog.fields.name }} 214 |
215 |
216 |
-
421 |
-
422 |
{{ dog.fields.name }} 423 |
424 |
425 |
Simple demo app
10 |This simple demo uses the following Contentful configuration:
11 |-
12 |
- Space: cfexampleapi 13 |
- Access token: b4c0n73n7fu1 14 |
Status: IdleBusy
16 |Actions: 17 | 24 |
25 |Response
26 |Please select an action from the dropdown above27 |
{{response | json}}
28 |
29 |
30 |
--------------------------------------------------------------------------------
/examples/how-to-use-the-directives/app.js:
--------------------------------------------------------------------------------
1 | (function () {
2 |
3 | // Modules
4 | angular.module('app', ['contentful']);
5 |
6 | angular
7 | .module('app')
8 | .config(function (contentfulProvider) {
9 | contentfulProvider.setOptions({
10 | space: 'cfexampleapi',
11 | accessToken: 'b4c0n73n7fu1'
12 | });
13 | });
14 |
15 | })();
16 |
--------------------------------------------------------------------------------
/examples/how-to-use-the-directives/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Directives demo
10 |This simple demo uses the following Contentful configuration:
11 |-
12 |
- Space: cfexampleapi 13 |
- Access token: b4c0n73n7fu1 14 |
Get all dogs
16 |-
17 |
- 18 | {{ dog.fields.name }} 19 | 20 |
Get one entry
22 |{{ $contentfulEntry | json }}
23 | Get one entry and resolve links
24 |{{ $contentfulEntry | json }}
25 | Get all entries
26 |{{ $contentfulEntries.total }} items found:
28 |-
29 |
-
30 |
{{ entry.sys.id }}31 |
32 |
';
72 |
73 | $httpBackend
74 | .expectGET(expectedHost + '/spaces/dummySpace/entries?access_token=dummyAccessToken')
75 | .respond(200, '');
76 |
77 | var element = $compile(markup)($rootScope);
78 | $rootScope.$digest();
79 | $httpBackend.flush();
80 | });
81 |
82 | it('should perform a request to the correct API endpoint when invalid query string is passed', function () {
83 |
84 | var queryString = 'customQuery';
85 | var markup = '
{{$contentfulEntries}}
';
86 |
87 | $httpBackend
88 | .expectGET(expectedHost + '/spaces/dummySpace/entries?access_token=dummyAccessToken')
89 | .respond(200, 'fake-response');
90 |
91 | var element = $compile(markup)($rootScope);
92 | $rootScope.$digest();
93 | $httpBackend.flush();
94 | });
95 |
96 | it('should perform a request to the correct API endpoint when valid query string is passed', function () {
97 |
98 | var queryString = 'query=test';
99 | var markup = '
{{$contentfulEntries}}
';
100 |
101 | $httpBackend
102 | .expectGET(expectedHost + '/spaces/dummySpace/entries?access_token=dummyAccessToken&query=test')
103 | .respond(200, 'fake-response');
104 |
105 | var element = $compile(markup)($rootScope);
106 | $rootScope.$digest();
107 | $httpBackend.flush();
108 | });
109 |
110 | it('should perform a request to the correct API endpoint when an expression is passed', function () {
111 |
112 | var queryString = 'query=test';
113 | var $scope = $rootScope.$new();
114 | $scope.query = queryString;
115 | var markup = '
{{$contentfulEntries}}
';
116 |
117 | $httpBackend
118 | .expectGET(expectedHost + '/spaces/dummySpace/entries?access_token=dummyAccessToken&query=test')
119 | .respond(200, 'fake-response');
120 |
121 | var element = $compile(markup)($scope);
122 | $rootScope.$digest();
123 | $httpBackend.flush();
124 | });
125 |
126 | it('should make the entries available as $contentfulEntries', function () {
127 |
128 | var markup = '
{{$contentfulEntries}}
';
129 |
130 | $httpBackend
131 | .expectGET(expectedHost + '/spaces/dummySpace/entries?access_token=dummyAccessToken')
132 | .respond(200, sampleResponse);
133 |
134 | var element = $compile(markup)($rootScope);
135 | $rootScope.$digest();
136 | $httpBackend.flush();
137 |
138 | expect(element.html()).to.contain(JSON.stringify(expectedOutcome));
139 | });
140 |
141 | });
142 |
--------------------------------------------------------------------------------
/test/unit/contentful/directives/contentful-entry.directive.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('contentfulEntry directive', function () {
4 |
5 | var contentfulProvider;
6 | var $httpBackend;
7 | var $compile;
8 | var $rootScope;
9 | var customOptions = {
10 | space: 'dummySpace',
11 | accessToken: 'dummyAccessToken',
12 | secure: true
13 | };
14 |
15 | // Expected host to check against when using custom options above
16 | var expectedHost = 'https://cdn.contentful.com:443';
17 |
18 | beforeEach(function () {
19 |
20 | // Define a fake module so we can configure the provider
21 | // before injecting the service
22 | var fakeModule = angular.module('fakeModule', []);
23 | fakeModule.config(function (_contentfulProvider_) {
24 | contentfulProvider = _contentfulProvider_;
25 | contentfulProvider.setOptions(customOptions);
26 | });
27 |
28 | // Load the module
29 | module('contentful', 'fakeModule');
30 |
31 | // Instantiate the service
32 | inject(function (_$httpBackend_, _$compile_, _$rootScope_) {
33 | $httpBackend = _$httpBackend_;
34 | $compile = _$compile_;
35 | $rootScope = _$rootScope_;
36 | });
37 |
38 | });
39 |
40 | afterEach(function () {
41 | $httpBackend.verifyNoOutstandingExpectation();
42 | $httpBackend.verifyNoOutstandingRequest();
43 | });
44 |
45 | it('should perform a request to the correct API endpoint when id is specified', function () {
46 |
47 | var id = 'customId';
48 | var markup = '
';
49 |
50 | $httpBackend
51 | .expectGET(expectedHost + '/spaces/dummySpace/entries/' + id + '?access_token=dummyAccessToken')
52 | .respond(200, 'fake-response');
53 |
54 | var element = $compile(markup)($rootScope);
55 | $rootScope.$digest();
56 | $httpBackend.flush();
57 | });
58 |
59 | it('should perform a request to the correct API endpoint when an expression is specified', function () {
60 |
61 | var id = 'customId';
62 | var $scope = $rootScope.$new();
63 | $scope.entryId = id;
64 | var markup = '
';
65 |
66 | $httpBackend
67 | .expectGET(expectedHost + '/spaces/dummySpace/entries/' + id + '?access_token=dummyAccessToken')
68 | .respond(200, 'fake-response');
69 |
70 | var element = $compile(markup)($scope);
71 | $rootScope.$digest();
72 | $httpBackend.flush();
73 | });
74 |
75 | it('should perform a request to the correct API endpoint when query string is specified', function () {
76 |
77 | var queryString = 'content_type=dog&fields.name=bob';
78 | var markup = '
';
79 |
80 | $httpBackend
81 | .expectGET(expectedHost + '/spaces/dummySpace/entries?access_token=dummyAccessToken&' + queryString)
82 | .respond(200, 'fake-response');
83 |
84 | var element = $compile(markup)($rootScope);
85 | $rootScope.$digest();
86 | $httpBackend.flush();
87 | });
88 |
89 | it('should make the entry available as $contentfulEntry', function () {
90 |
91 | var id = 'customId';
92 | var markup = '
{{$contentfulEntry}}
';
93 |
94 | $httpBackend
95 | .expectGET(expectedHost + '/spaces/dummySpace/entries/' + id + '?access_token=dummyAccessToken')
96 | .respond(200, 'fake-response');
97 |
98 | var element = $compile(markup)($rootScope);
99 | $rootScope.$digest();
100 | $httpBackend.flush();
101 |
102 | expect(element.html()).to.contain('fake-response');
103 | });
104 |
105 | });
106 |
--------------------------------------------------------------------------------
/test/unit/contentful/services/contentful-helpers.service.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('contentfulHelpers service', function () {
4 |
5 | var contentfulHelpers;
6 |
7 | var sampleResponse = {
8 | items: [
9 | {
10 | someValue: 'wow',
11 | someLink: {sys: {type: 'Link', linkType: 'Entry', id: 'suchId'}}
12 | }
13 | ],
14 | includes: {
15 | Entry: [
16 | {sys: {type: 'Entry', id: 'suchId'}, very: 'doge'}
17 | ]
18 | }
19 | };
20 |
21 | var expectedOutcome = [
22 | {
23 | // Value stays the same
24 | someValue: 'wow',
25 |
26 | // Link gets replaced by the actual object from `includes.Entry`
27 | someLink: {sys: {type: 'Entry', id: 'suchId'}, very: 'doge'}
28 | }
29 | ];
30 |
31 | beforeEach(module('contentful'));
32 |
33 | beforeEach(inject(function(_contentfulHelpers_){
34 | contentfulHelpers = _contentfulHelpers_;
35 | }));
36 |
37 | describe('resolveResponse', function () {
38 |
39 | it('should be a method', function () {
40 | expect(contentfulHelpers.resolveResponse).to.be.a('function');
41 | });
42 |
43 | it('should return the expected object', function () {
44 | expect(contentfulHelpers.resolveResponse(sampleResponse)).to.deep.equal(expectedOutcome);
45 | });
46 |
47 | });
48 |
49 | describe('isQueryString', function () {
50 |
51 | it('should be a method', function () {
52 | expect(contentfulHelpers.isQueryString).to.be.a('function');
53 | });
54 |
55 | });
56 |
57 | describe('isQueryString(id)', function () {
58 |
59 | it('should return false', function () {
60 | expect(contentfulHelpers.isQueryString('31Eu8SwBxCEuSOIWEu8wUM')).to.equal(false);
61 | });
62 |
63 | });
64 |
65 | describe('isQueryString(stringwith?)', function () {
66 |
67 | it('should return false', function () {
68 | expect(contentfulHelpers.isQueryString('stringwith?')).to.equal(true);
69 | });
70 |
71 | });
72 |
73 | describe('isQueryString(stringwith=)', function () {
74 |
75 | it('should return false', function () {
76 | expect(contentfulHelpers.isQueryString('stringwith=')).to.equal(true);
77 | });
78 |
79 | });
80 |
81 | describe('isQueryString(stringwith&)', function () {
82 |
83 | it('should return false', function () {
84 | expect(contentfulHelpers.isQueryString('stringwith&')).to.equal(true);
85 | });
86 |
87 | });
88 |
89 |
90 | });
91 |
--------------------------------------------------------------------------------
/test/unit/contentful/services/contentful.service.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Contentful service', function () {
4 |
5 | var contentful;
6 | var contentfulProvider;
7 | var $http;
8 | var $httpBackend;
9 | var $q;
10 | var customOptions = {
11 | space: 'dummySpace',
12 | accessToken: 'dummyAccessToken',
13 | secure: true
14 | };
15 |
16 | // Expected host to check against when using custom options above
17 | var expectedHost = 'https://cdn.contentful.com:443';
18 |
19 | beforeEach(function () {
20 |
21 | // Define a fake module so we can configure the provider
22 | // before injecting the service
23 | var fakeModule = angular.module('fakeModule', []);
24 | fakeModule.config(function (_contentfulProvider_) {
25 | contentfulProvider = _contentfulProvider_;
26 | contentfulProvider.setOptions(customOptions);
27 | });
28 |
29 | // Load the module
30 | module('contentful', 'fakeModule');
31 |
32 | // Instantiate the service
33 | inject(function (_$http_, _$q_, _contentful_, _$httpBackend_) {
34 | $http = _$http_;
35 | $q = _$q_;
36 | contentful = _contentful_;
37 | $httpBackend = _$httpBackend_;
38 | });
39 |
40 | });
41 |
42 | afterEach(function () {
43 | $httpBackend.verifyNoOutstandingExpectation();
44 | $httpBackend.verifyNoOutstandingRequest();
45 | });
46 |
47 | describe('provider', function () {
48 |
49 | it('should exist', function () {
50 | expect(contentfulProvider).to.be.an('object');
51 | });
52 |
53 | describe('#setOptions', function () {
54 |
55 | it('should be a function', function () {
56 | expect(contentfulProvider.setOptions).to.be.a('function');
57 | });
58 |
59 | });
60 |
61 | describe('#setOptions()', function () {
62 |
63 | it('should return the provider', function () {
64 | expect(contentfulProvider.setOptions()).to.equal(contentfulProvider);
65 | });
66 |
67 | });
68 |
69 | });
70 |
71 | describe('instance', function () {
72 |
73 | describe('#options', function () {
74 |
75 | it('should be an object', function () {
76 | expect(contentful.options).to.be.an('object');
77 | });
78 |
79 | it('should contain custom options passed to provider using setOptions()', function () {
80 | expect(contentful.options['default'].space).to.equal(customOptions.space);
81 | expect(contentful.options['default'].accessToken).to.equal(customOptions.accessToken);
82 | expect(contentful.options['default'].secure).to.equal(customOptions.secure);
83 | });
84 |
85 | });
86 |
87 | describe('#_$http', function () {
88 |
89 | it('should be an object', function () {
90 | expect(contentful._$http).to.be.a('function');
91 | });
92 |
93 | it('should equal $http by default', function () {
94 | expect(contentful._$http).to.equal($http);
95 | });
96 |
97 | });
98 |
99 | describe('#_$q', function () {
100 |
101 | it('should be an object', function () {
102 | expect(contentful._$q).to.be.a('function');
103 | });
104 |
105 | it('should equal $q by default', function () {
106 | expect(contentful._$q).to.equal($q);
107 | });
108 |
109 | });
110 |
111 |
112 | describe('#asset', function () {
113 |
114 | it('should be a function', function () {
115 | expect(contentful.asset).to.be.a('function');
116 | });
117 |
118 | });
119 |
120 | describe('#asset(id)', function () {
121 |
122 | it('should perform a request to the correct API endpoint', function (done) {
123 | var id = 'customId';
124 | $httpBackend
125 | .expectGET(expectedHost + '/spaces/dummySpace/assets/' + id + '?access_token=dummyAccessToken')
126 | .respond(200, '');
127 | contentful.asset(id).then(
128 | function () {
129 | done();
130 | },
131 | function () {
132 | done();
133 | }
134 | );
135 | $httpBackend.flush();
136 | });
137 |
138 | });
139 |
140 | describe('#assets', function () {
141 |
142 | it('should be a function', function () {
143 | expect(contentful.assets).to.be.a('function');
144 | });
145 |
146 | });
147 |
148 | describe('#assets()', function () {
149 |
150 | it('should perform a request to the correct API endpoint', function (done) {
151 | $httpBackend
152 | .expectGET(expectedHost + '/spaces/dummySpace/assets?access_token=dummyAccessToken')
153 | .respond(200, '');
154 | contentful.assets().then(
155 | function () {
156 | done();
157 | },
158 | function () {
159 | done();
160 | }
161 | );
162 | $httpBackend.flush();
163 | });
164 |
165 | });
166 |
167 | describe('#contentType', function () {
168 |
169 | it('should be a function', function () {
170 | expect(contentful.contentType).to.be.a('function');
171 | });
172 |
173 | });
174 |
175 | describe('#contentType(id)', function () {
176 |
177 | it('should perform a request to the correct API endpoint', function (done) {
178 | var id = 'customId';
179 | $httpBackend
180 | .expectGET(expectedHost + '/spaces/dummySpace/content_types/' + id + '?access_token=dummyAccessToken')
181 | .respond(200, '');
182 | contentful.contentType(id).then(
183 | function () {
184 | done();
185 | },
186 | function () {
187 | done();
188 | }
189 | );
190 | $httpBackend.flush();
191 | });
192 |
193 | });
194 |
195 | describe('#contentTypes', function () {
196 |
197 | it('should be a function', function () {
198 | expect(contentful.contentTypes).to.be.a('function');
199 | });
200 |
201 | });
202 |
203 | describe('#contentTypes()', function () {
204 |
205 | it('should perform a request to the correct API endpoint', function (done) {
206 | $httpBackend
207 | .expectGET(expectedHost + '/spaces/dummySpace/content_types?access_token=dummyAccessToken')
208 | .respond(200, '');
209 | contentful.contentTypes().then(
210 | function () {
211 | done();
212 | },
213 | function () {
214 | done();
215 | }
216 | );
217 | $httpBackend.flush();
218 | });
219 |
220 | });
221 |
222 | describe('#entry', function () {
223 |
224 | it('should be a function', function () {
225 | expect(contentful.entry).to.be.a('function');
226 | });
227 |
228 | });
229 |
230 | describe('#entry(id)', function () {
231 |
232 | it('should perform a request to the correct API endpoint', function (done) {
233 | var id = 'customId';
234 | $httpBackend
235 | .expectGET(expectedHost + '/spaces/dummySpace/entries/' + id + '?access_token=dummyAccessToken')
236 | .respond(200, '');
237 | contentful.entry(id).then(
238 | function () {
239 | done();
240 | },
241 | function () {
242 | done();
243 | }
244 | );
245 | $httpBackend.flush();
246 | });
247 |
248 | });
249 |
250 | describe('#entries', function () {
251 |
252 | it('should be a function', function () {
253 | expect(contentful.entries).to.be.a('function');
254 | });
255 |
256 | });
257 |
258 | describe('#entries()', function () {
259 |
260 | it('should perform a request to the correct API endpoint', function (done) {
261 | $httpBackend
262 | .expectGET(expectedHost + '/spaces/dummySpace/entries?access_token=dummyAccessToken')
263 | .respond(200, '');
264 | contentful.entries().then(
265 | function () {
266 | done();
267 | },
268 | function () {
269 | done();
270 | }
271 | );
272 | $httpBackend.flush();
273 | });
274 |
275 | });
276 |
277 | describe('#space', function () {
278 |
279 | it('should be a function', function () {
280 | expect(contentful.space).to.be.a('function');
281 | });
282 |
283 | });
284 |
285 | describe('#space()', function () {
286 |
287 | it('should perform a request to the correct API endpoint', function (done) {
288 | $httpBackend
289 | .expectGET(expectedHost + '/spaces/dummySpace?access_token=dummyAccessToken')
290 | .respond(200, '');
291 | contentful.space().then(
292 | function () {
293 | done();
294 | },
295 | function () {
296 | done();
297 | }
298 | );
299 | $httpBackend.flush();
300 | });
301 |
302 | });
303 |
304 | });
305 |
306 | });
307 |
--------------------------------------------------------------------------------