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.
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.
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.
The main application file describes the different possible URL routes. The prefix for API calls is also configured here.
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.
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!
- Demo application installation instructions
- API reference docs for the Hippo GoGreen API
- HTML5Rocks, information on specific HTML5 features and when to use them in your apps
- Hippo Meetups where we like to discuss what we are currently are working on AngularJS
- Download Hippo GoGreen
- How to enable a RESTful interface with Hippo CMS