1 - Get a List of Documents
Reset the workspace to step 1:
git checkout -f step-1
The most important changes are listed below. You can see the full diff on GitHub.
The Document Collection Resource
In this step a documents list view is added to the app. The list is populated with data retrieved from the Content REST API's Document Collection resource, available from your local Hippo CMS server at the following URL:
http://localhost:8080/site/api/documents
The response consists of a JSON object with some properties concerning page navigation (they will be used in step 5) and an items array of objects representing documents in Hippo's content repository:
{
"offset":0,
"max":100,
"count":13,
"total":13,
"more":false,
"items":[
{
"name":"breakfast",
"id":"b8f5eb45-7200-452a-b26e-3118a0dc60b8",
"link":{
"type":"local",
"id":"b8f5eb45-7200-452a-b26e-3118a0dc60b8",
"url":"http://localhost:8080/site/api/documents/b8f5eb45-7200-452a-b26e-3118a0dc60b8"
}
},
{
"name":"introduction-speech",
"id":"18e36c35-429d-4fee-b76e-eeabcbfc08bb",
"link":{
"type":"local",
"id":"18e36c35-429d-4fee-b76e-eeabcbfc08bb",
"url":"http://localhost:8080/site/api/documents/18e36c35-429d-4fee-b76e-eeabcbfc08bb"
}
}
]
}
Note that each item includes a link to the URL at which the content of the document can be accessed. That's covered in the next step.
Rendering the Documents List in the App
This step adds a DocumentsService to retrieve the data from the Document Collection resource and a documents-list view to render a list of documents. The DocumentsController calls the DocumentsService and adds the response to the scope so the view can render the list.
Dependencies
Dependencies to the ngRoute and ngResource services are added to the app:
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
app.js
var hippoRestApp = angular.module('hippoRestApp', [ 'ngRoute', 'ngResource' ]);
DocumentsService
A new DocumentsService implements a getList function which uses the $resource service to retrieve the data from the Documents resource.
app.js
hippoRestApp.constant('apiPrefix', 'http://localhost:8080/site/api/');
app.js
hippoRestApp.factory('DocumentsService', function($resource, apiPrefix) {
return {
getList : function() {
return $resource(apiPrefix + 'documents/', {}).get();
}
}
});
DocumentsController
The DocumentsController calls the DocumentsService's getList function and adds the response to the scope as documents:
app.js
hippoRestApp.controller('DocumentsController', function($scope,
DocumentsService, apiPrefix) {
DocumentsService.getList().$promise.then(function(response) {
$scope.documents = response;
});
});
View and Routing
The new documents-list view iterates through the items array in the Document Collection resource's response and renders each item's name property in a list. Routing is added to map a URL ('/') to the view's template and the controller.
documents-list.html
<h2>Documents</h2>
<ul>
<li ng-repeat="document in documents.items">{{document.name}}</li>
</ul>
index.html
<body ng-app="hippoRestApp">
<div class="container" ng-controller="DocumentsController">
<div ng-view></div>
</div>
</body>
app.js
hippoRestApp.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'document-list.html',
controller : 'DocumentsController'
}).otherwise('/');
});
Experiments
- Use Hippo CMS to create some additional documents and check if they show up in the app. Publish the new documents and check again. The Content REST API only returns published documents.
Summary
This step added a view to the app which renders a list of documents retrieved from a Hippo CMS server using the Content REST API's Document Collection resource. Now go to step 2 to learn how to retrieve and render a single document's actual content.