Getting Started with Angular and Agility CMS


This guide is meant for developers. Want to learn why Agility CMS and Angular work so well together?

Angular paired with Agility CMS is a stack that delivers remarkable Developer Experience (DX), enables lightning-fast User Experiences (UX), and allows for best-in-class Editor Experience (EX). This tutorial is aimed to help you get started with Angular and Agility CMS using a starter site.

Here is what we'll cover:

  1. Develop Components, not Websites
  2. Create a Free Agility CMS Account
  3. Get The Code and Set Up your Environment

Develop Components, not Websites

When building a site with Angular and Agility, we always recommend developers start by taking a look at our agilitycms-angular-starter, rather than starting from a blank slate. It showcases features such as our native Page Management and shows how you should structure your Angular website. Our Angular and Agility starter serves as an example based on our recommended best-practices.

Editors have fine-grain control with the ability to manage all aspects of their page. They're able to control what pages are on their website, and what is on each page. This means you can focus on building UI Components (i.e. Page Modules and Page Templates) that editors will use/reuse to compose their pages.

What's in a Page?

Page in Agility CMS has the following structure:

  • SEO Fields - title, url slug, description, keywords
  • Page Template - the layout of the page, which defines Content Zones
    • Content Zones {} - the areas where editors can add/manage Modules
      • Modules []- self-contained functional UI components representing what is on a page

All of your pages will be dynamically composed at build time, and incrementally updated as content changes.

Your entire website's look and feel will be dictated by the Page Templates and Page Modules you have available to your editors.

Page Templates and Modules

These will correspond to module TypeScript and HTML components in your source code and will automatically be rendered for you.

Sign up for a Free Agility CMS Account

In order to get started with Agility CMS and Angular, Sign Up for a Free Agility CMS account to gain access to an instance. 


Since the Angular starter is fairly new, in order to showcase best practices, evaluate, and help onboard new users when using Agility CMS with Angular, we recommend signing up for our pre-configured Next.js Starter Blog, which happens to share the same Content Model with the Angular starter.

How to sign up for the Next.js Starter Blog


Get The Code and Set Up your Environment

Once your Next.js Starter Blog template instance is up and running, you'll want to get the Angular code for it and configure it to connect to your Agility CMS Instance.

Setting up your Development Environment



1 out of 1 found this helpful



Please sign in to leave a comment.