Bloomreach

Bloomreach Documentation version

Blog / 2014

AngularJS and Content Management Systems

​ Niels Dequeker

​ 2014-01-23

Using JavaScript MVC frameworks such as Angular, Ember and React to build interactive websites has grown in popularity for enterprise companies. These frameworks allow the JavaScript code to be tested, applications to have a rich user interface, introduces useful conventions, and allows for the use of new methods like single page applications. 

Managing the content of a website, however, is not a task for an MVC framework. You’ll need to use your Angular application in combination with a compatible Content Management System (CMS) to deliver content without ended up with hard coded text in your code.

While marketeers or (web) editors can very easily write, translate and order content with the CMS, developers can use AngularJS to display the content being managed.


The rise of modern web applications

One of the interesting shifts in the web development world, is how modern web applications are moving more logic to the client instead of the server. Before this, the client was basically loading a new page for every click.

Nowadays, you see more and more self-contained web applications, having a rich user interface and triggering interaction. This is possible because a lot of HTML5 features matured and the rise of JavaScript MVC frameworks.

You could write a large web application before without using a framework. But the advantages of a framework like AngularJS are massive. Especially when working in bigger teams, on larger applications. Often you need to structure a lot of files and modularize components. Frameworks can also provide support for writing tests, two-way data-binding, dependency management etc.


Introducing REST for decoupling

It is common for web applications to consume a RESTful API for communication with the server. By doing this, the REST API can be used to e.g. fetch, update, create and delete resources.

AngularJS provides default functionality to consume RESTful API’s. We have outfitted BloomReach's CMS (previously known as Hippo CMS) with REST support to retrieve content. Content is fetched from the CMS via HTTP requests, and you can build the user interactive application with AngularJS. By decoupling both, you enable continuous deployment for the front end application.


GoGreen, a sample website using BloomReach's CMS

The GoGreen demo website is build using Freemarker and JSP. However GoGreen also provides such a REST API. This allows external developers to create interactive web applications using BloomReach for the content management system.

You can play with the different endpoints on the API browser page.

We'd like to show how easy it is to use the RESTful API. To do this, we developed an application using AngularJS and the API of the GoGreen website.

 

Because there is no backend logic involved, you can just start writing frontend code. Focusing on building a great experience. The application is rather straightforward. The two important files here are app.js and services.js.

app.js  
The main application file describes the different possible URL routes. The prefix for API calls is also configured here.

services.js  
The communication with the external API is managed inside the ProductsService. Services in AngularJS are singletons. They provide a great way for separating logic from your controllers.

Source  
The source code for this demo application is available on GitHub: https://github.com/onehippo/demo-angular-hippo

The web is moving forward at a rapid pace. BloomReach's CMS allows you to make use of these modern technologies and still leverage the benefits of a CMS.

We are looking forward to see what applications external developers will come up with!

Further reference

 

We're looking for new developers to help us out, interested? 

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?