{"id":214,"date":"2018-06-13T07:14:18","date_gmt":"2018-06-13T07:14:18","guid":{"rendered":"http:\/\/www.futurum.tech\/blog\/?p=214"},"modified":"2026-01-05T11:06:49","modified_gmt":"2026-01-05T11:06:49","slug":"hippo-cms-with-angular-6-how-to-start","status":"publish","type":"post","link":"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/","title":{"rendered":"Hippo CMS and Angular \u2013 A Practical Integration Guide"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Introduction<\/strong><\/h2>\n\n\n\n<p><strong>Hippo CMS and Angular<\/strong> are a powerful combination for building modern, scalable web applications. Thanks to a REST-based architecture, Hippo CMS allows Angular applications to consume content efficiently while keeping content management simple for non-technical users. In this article, we will explain how Hippo CMS works, how its REST API fits into modern frontend development, and why Angular is a great choice for consuming Hippo content.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Is Hippo CMS?<\/strong><\/h2>\n\n\n\n<p>Hippo CMS is an open-source content management system built on Java and designed with flexibility in mind. It follows Java standards, integrates easily with existing systems, and supports structured content models. As a result, editors can manage content comfortably, while developers retain full control over presentation and architecture.<\/p>\n\n\n\n<p>You can read more about the platform on the official<br>Hippo CMS documentation page: <a href=\"https:\/\/www.onehippo.org\/\">https:\/\/www.onehippo.org\/<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Hippo CMS Content REST API<\/strong><\/h2>\n\n\n\n<p>Originally, Hippo CMS focused on server-side rendering using MVC patterns and template engines such as JSP or FreeMarker. However, as frontend development evolved, Hippo adapted to REST-based architectures.<\/p>\n\n\n\n<p>Today, the <strong>Hippo CMS Content REST API<\/strong> exposes published content as JSON, making it easy to consume by frontend frameworks like Angular. Moreover, developers can extend the REST layer with custom endpoints when the generic API is not enough. Thanks to this approach, Hippo CMS fits perfectly into headless and hybrid CMS scenarios.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Use Hippo CMS with Angular?<\/strong><\/h2>\n\n\n\n<p>Angular is a popular framework for building dynamic, component-based user interfaces. When combined with Hippo CMS, Angular applications can retrieve content via REST and display it without tight coupling to the backend.<\/p>\n\n\n\n<p>Additionally, this setup offers several advantages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>clear separation between content and presentation<\/li>\n\n\n\n<li>better scalability and performance<\/li>\n\n\n\n<li>easier frontend maintenance<\/li>\n\n\n\n<li>freedom to design fully custom user interfaces<\/li>\n<\/ul>\n\n\n\n<p>Because of these benefits, Hippo CMS and Angular are often used together in enterprise-level projects.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Content Modeling in Hippo CMS<\/strong><\/h2>\n\n\n\n<p>Before Angular can display content, it must be structured properly in Hippo CMS. Document types define what fields are available, such as titles, images, or rich text. Once created and published, these documents automatically become available through the REST API.<\/p>\n\n\n\n<p>As a result, frontend developers can rely on predictable content structures while editors enjoy a user-friendly interface.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Displaying Hippo CMS Content in Angular<\/strong><\/h2>\n\n\n\n<p>Angular consumes Hippo CMS content through HTTP requests to REST endpoints. The retrieved data can then be mapped to Angular components and displayed in templates.<\/p>\n\n\n\n<p>This approach allows teams to build reusable UI components such as news sections, article pages, or sliders. Furthermore, content updates in Hippo CMS appear instantly in the Angular application after publication, without redeploying the frontend.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Content Editing and Maintenance<\/strong><\/h2>\n\n\n\n<p>One of the biggest advantages of Hippo CMS is how easily content can be updated. Editors can modify text, images, or entire documents and publish changes immediately. Meanwhile, Angular continues to fetch the latest data automatically.<\/p>\n\n\n\n<p>Consequently, developers focus on functionality and design, while editors manage content independently.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Integrating <strong>Hippo CMS and Angular<\/strong> is a practical and future-proof solution for modern web development. Hippo CMS provides a reliable content backend, while Angular delivers a fast and flexible frontend experience. Together, they support headless architecture, improve collaboration between teams, and scale well with growing project requirements.<\/p>\n\n\n\n<p>If you want to learn more, visit the official resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hippo CMS official website: <a href=\"https:\/\/www.onehippo.org\/\">https:\/\/www.onehippo.org\/<\/a><\/li>\n\n\n\n<li>Hippo CMS tutorials: <a href=\"https:\/\/www.onehippo.org\/trails\/demo-tutorials-and-download.html\">https:\/\/www.onehippo.org\/trails\/demo-tutorials-and-download.html<\/a><\/li>\n\n\n\n<li>Angular documentation: <a href=\"https:\/\/angular.io\/docs\">https:\/\/angular.io\/docs<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Hippo CMS and Angular are a powerful combination for building modern, scalable web applications. Thanks to a REST-based architecture, Hippo CMS allows Angular applications to consume content efficiently while keeping content&#8230;<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[242,46],"tags":[],"class_list":["post-214","post","type-post","status-publish","format-standard","hentry","category-english","category-start-ups"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Hippo CMS and Angular \u2013 A Practical Integration Guide - Futurum Technology<\/title>\n<meta name=\"description\" content=\"Learn how Hippo CMS and Angular work together. This guide explains the benefits of using Hippo CMS with Angular applications and REST APIs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hippo CMS and Angular \u2013 A Practical Integration Guide - Futurum Technology\" \/>\n<meta property=\"og:description\" content=\"Learn how Hippo CMS and Angular work together. This guide explains the benefits of using Hippo CMS with Angular applications and REST APIs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/\" \/>\n<meta property=\"og:site_name\" content=\"Futurum Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/futurm.tech\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-13T07:14:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-05T11:06:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.futurum.tech\/blog\/wp-content\/uploads\/2024\/06\/antenna-ZDN-G1xBWHY-unsplash-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Futurum Technology Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@FuturumTech\" \/>\n<meta name=\"twitter:site\" content=\"@FuturumTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Futurum Technology Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/\",\"url\":\"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/\",\"name\":\"Hippo CMS and Angular \u2013 A Practical Integration Guide - Futurum Technology\",\"isPartOf\":{\"@id\":\"https:\/\/www.futurum.tech\/blog\/#website\"},\"datePublished\":\"2018-06-13T07:14:18+00:00\",\"dateModified\":\"2026-01-05T11:06:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.futurum.tech\/blog\/#\/schema\/person\/ed95ddabb8f6f1a57f431b669ca5f9cb\"},\"description\":\"Learn how Hippo CMS and Angular work together. This guide explains the benefits of using Hippo CMS with Angular applications and REST APIs.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.futurum.tech\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hippo CMS and Angular \u2013 A Practical Integration Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.futurum.tech\/blog\/#website\",\"url\":\"https:\/\/www.futurum.tech\/blog\/\",\"name\":\"Futurum Technology\",\"description\":\"Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.futurum.tech\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.futurum.tech\/blog\/#\/schema\/person\/ed95ddabb8f6f1a57f431b669ca5f9cb\",\"name\":\"Futurum Technology Team\",\"sameAs\":[\"https:\/\/futurum.tech\/blog\/\"],\"url\":\"https:\/\/www.futurum.tech\/blog\/index.php\/author\/futurum-technology-team\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hippo CMS and Angular \u2013 A Practical Integration Guide - Futurum Technology","description":"Learn how Hippo CMS and Angular work together. This guide explains the benefits of using Hippo CMS with Angular applications and REST APIs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/","og_locale":"en_US","og_type":"article","og_title":"Hippo CMS and Angular \u2013 A Practical Integration Guide - Futurum Technology","og_description":"Learn how Hippo CMS and Angular work together. This guide explains the benefits of using Hippo CMS with Angular applications and REST APIs.","og_url":"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/","og_site_name":"Futurum Technology","article_publisher":"https:\/\/www.facebook.com\/futurm.tech\/","article_published_time":"2018-06-13T07:14:18+00:00","article_modified_time":"2026-01-05T11:06:49+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/www.futurum.tech\/blog\/wp-content\/uploads\/2024\/06\/antenna-ZDN-G1xBWHY-unsplash-scaled.jpg","type":"image\/jpeg"}],"author":"Futurum Technology Team","twitter_card":"summary_large_image","twitter_creator":"@FuturumTech","twitter_site":"@FuturumTech","twitter_misc":{"Written by":"Futurum Technology Team","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/","url":"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/","name":"Hippo CMS and Angular \u2013 A Practical Integration Guide - Futurum Technology","isPartOf":{"@id":"https:\/\/www.futurum.tech\/blog\/#website"},"datePublished":"2018-06-13T07:14:18+00:00","dateModified":"2026-01-05T11:06:49+00:00","author":{"@id":"https:\/\/www.futurum.tech\/blog\/#\/schema\/person\/ed95ddabb8f6f1a57f431b669ca5f9cb"},"description":"Learn how Hippo CMS and Angular work together. This guide explains the benefits of using Hippo CMS with Angular applications and REST APIs.","breadcrumb":{"@id":"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.futurum.tech\/blog\/index.php\/2018\/06\/13\/hippo-cms-with-angular-6-how-to-start\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.futurum.tech\/blog\/"},{"@type":"ListItem","position":2,"name":"Hippo CMS and Angular \u2013 A Practical Integration Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.futurum.tech\/blog\/#website","url":"https:\/\/www.futurum.tech\/blog\/","name":"Futurum Technology","description":"Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.futurum.tech\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.futurum.tech\/blog\/#\/schema\/person\/ed95ddabb8f6f1a57f431b669ca5f9cb","name":"Futurum Technology Team","sameAs":["https:\/\/futurum.tech\/blog\/"],"url":"https:\/\/www.futurum.tech\/blog\/index.php\/author\/futurum-technology-team\/"}]}},"_links":{"self":[{"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/posts\/214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=214"}],"version-history":[{"count":40,"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":3351,"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/posts\/214\/revisions\/3351"}],"wp:attachment":[{"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.futurum.tech\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}