AngularJS is hot. More and more companies are using a JavaScript MVC framework to build their interactive web sites. It allows JavaScript code to be tested, applications to have a rich user interface and it introduces useful conventions.

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

 

But it doesn’t allow you to manage the content of your website. You want to use your AngularJS web site application in combination with a Content Management System (CMS). This way you don’t end 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 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 Hippo CMS

The Hippo 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 the Hippo CMS as content management system.

 

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

 

Demo application  
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. Hippo 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