0 - Bootstrapping - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 12. There's an updated version available that covers our most recent release.

21-06-2018

0 - Bootstrapping

Previous - Next

This step is just to introduce the source code files of the hippo-rest-tutorial app.

Before you continue make sure you have set up your local development environment and created your local Bloomreach Experience Manager server as described on the introduction page.

In the hippo-rest-tutorial folder run the following command:

git checkout -f step-0

This resets your workspace to step 0 of the tutorial app.

You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within your working directory to be lost.

The App

The starting point for the tutorial is a very simple AngularJS app consisting of the files index.html and app.js as shown below.

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="app.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="hippoRestApp">
  <div class="container" ng-controller="DocumentsController">
      <p>{{message}}</p>
  </div>
</body>
</html>

app.js

'use strict';

var hippoRestApp = angular.module('hippoRestApp', []);

hippoRestApp.controller('DocumentsController', function($scope) {
  $scope.message = "Nothing here yet";
});

As you can see the app is called hippoRestApp and there is a DocumentsController which at this point doesn't do much yet.

There is also an app.css stylesheet which adds some styling to the app. This is just to make it look nice and is otherwise irrelevant to the tutorial.

In the browser you will now see a message "Nothing here yet".

Summary

Go to step 1 to learn how to retrieve a list of documents using the Content REST API and render the list in the app.

Previous - Next

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?