How Pages Work in Angular

We believe that Editors  (you know, the folks actually creating content) should have full control over their website pages and not rely on a developer.

The agilitycms-angular-starter makes it easy to source content, but it also assists with generating your Pages for you based on your sitemap in Agility CMS.

This means that editors in the CMS control what pages are available, what their URLs are, and exactly what UI components (we call these Page Modules) make up each page.

Page Generation

The following example is based on the Blog Template instance. Don't have one? Sign up for one!

Screen_Shot_2021-04-20_at_10.05.16_AM.png

The above figure represents a sitemap of Pages as well as the UI Components (Page Modules) that are on each page - all are managed in the CMS. 

This means that when a build occurs in your Nuxt site, the following pages will be auto-generated for you:

  • /
  • /blog
  • /blog-posts/* - your dynamic page route for all of your blog posts (i.e. /blog/my-first-post)
  • /about

Page Rendering

It can generate and serve those pages in response to requests from browsers. It can also pre-generate Angular Templates as HTML files that you serve later. The agilitycms-angular-starter uses the agility-page.component.ts file to source the Static Pages and Dynamic Page Items from your Sitemap in Agility, and the agility-page.component.html is what renders your Page Modules.

agility-page.component.ts:

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Routes, RouterModule, Router, ActivatedRoute } from '@angular/router';

import { AgilityService } from '../../agility/agility.service';
import { Title } from '@angular/platform-browser';
import { isDevMode } from '@angular/core';

@Component({
  selector: 'app-agility-page',
  templateUrl: './agility-page.component.html',
  styleUrls: ['./agility-page.component.css'],
})
export class AgilityPageComponent implements OnInit {
  public pageInSitemap: any = null;
  public page: any = null;
  public pageStatus: number = 0;
  public dynamicPageItem: any = null;
  public isPreview: boolean;

  constructor(
    private location: Location,
    private router: Router,
    private route: ActivatedRoute,
    private titleService: Title,
    private agilityService: AgilityService
  ) {
    this.pageStatus = 0;
    this.isPreview = isDevMode();
  }

  async ngOnInit(): Promise {
    try {
      const sitemapFlat = await this.agilityService.getSitemapFlat();

      let currentPath = location.pathname;
      if (currentPath.indexOf('?') !== -1)
        currentPath = currentPath.substring(0, currentPath.indexOf('?'));
      if (currentPath === '/') [currentPath] = Object.keys(sitemapFlat);

      this.pageInSitemap = sitemapFlat[currentPath];

      if (!this.pageInSitemap) {
        this.pageStatus = 404;
        console.error(`404 - Page ${currentPath} not found in sitemap.`);
        return;
      }

      //get the page object
      this.page = await this.agilityService.getPage(this.pageInSitemap.pageID);

      if (!this.page) {
        console.error(
          `500 - Page ${currentPath} with id ${this.pageInSitemap.pageID} could not be loaded.`
        );
        this.pageStatus = 500;
        return;
      }

      //get the dynamic page item
      if (this.pageInSitemap.contentID > 0) {
        this.dynamicPageItem = await this.agilityService.getContentItem(
          this.pageInSitemap.contentID
        );
      }

      //set the document title...
      this.titleService.setTitle(this.pageInSitemap.title);

      this.pageStatus = 200;
    } catch (error) {
      console.error('An error occurred: ', error);
      this.pageStatus = 500;
    }
  }
}

agility-page.component.html:

<ng-template [ngIf]="pageStatus === 0"></ng-template
<ng-template [ngIf]="pageStatus === 404">Page not found.</ng-template>
<ng-template [ngIf]="pageStatus === 500">Error loading page.</ng-template>
<ng-template [ngIf]="pageStatus === 200">

	<ng-container *ngFor="let zone of page.zones | keyvalue">
		<ng-container *ngFor="let moduleRef of zone.value">
			<app-agility-module [moduleObj]="moduleRef" [page]="this.page" [dynamicPageItem]="this.dynamicPageItem"></app-agility-module>
		</ng-container>
	</ng-container>

</ng-template>
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.