This is the third article in the Angular / Prismic series. In the previous two articles, we launched the default Angular project and integrated Prismic to create a homepage with a banner and some content.

This article requires that you have already gone through the previous two articles. If you have not already gone through them, here are the links.

1. Getting Started wit Prismic & Angular
2. Adding Slices to your Homepage

Here is the project code you need to start this tutorial but we suggest going through these articles if you have not already.

In this article we will expand on this and add more pages to demonstrate how to add routes to your website.

Create a Page Custom Type

Let's start by creating a new Custom Type for our pages. Head to your Prismic repository, navigate to your Custom Types, then click "New" to create a new type.

Select the "Repeatable Type" option and enter "Page" for the name. Make sure that this automatically generates the API ID of "page".

Click "Create new custom type." This will take you to the Custom Type edit screen where you can add the content fields to the new type.

For the sake of time & space, we won't go through how to setup the content fields manually. Instead here is the final JSON code for the Page Custom Type that you can paste into the JSON Editor.

{
  "Main": {
    "uid": {
      "type": "UID",
      "config": {
        "placeholder": "meaningful-unique-identifier...",
        "label": "Unique ID"
      }
    },
    "title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1",
        "label": "Title"
      }
    },
    "body": {
      "type": "Slices",
      "fieldset": "Slice zone",
      "config": {
        "choices": {
          "text_section": {
            "type": "Slice",
            "fieldset": "Text Section",
            "description": "Simple text section with either one or two columns",
            "icon": "text_fields",
            "non-repeat": {
              "rich_text": {
                "type": "StructuredText",
                "config": {
                  "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
                  "label": "Rich Text",
                  "placeholder": "Text..."
                }
              }
            },
            "repeat": {}
          },
          "quote": {
            "type": "Slice",
            "fieldset": "Quote",
            "description": "A stylized quote",
            "icon": "format_quote",
            "non-repeat": {
              "quote_text": {
                "type": "StructuredText",
                "config": {
                  "single": "paragraph",
                  "label": "Quote Text"
                }
              }
            },
            "repeat": {}
          },
          "full_width_image": {
            "type": "Slice",
            "fieldset": "Full Width Image",
            "description": "A wide, thin image",
            "icon": "broken_image",
            "non-repeat": {
              "image": {
                "type": "Image",
                "config": {
                  "constraint": {
                    "width": 980,
                    "height": 300
                  },
                  "thumbnails": [],
                  "label": "Image"
                }
              }
            },
            "repeat": {}
          }
        }
      }
    }
  }
}

Save the Page type.

Here we just created a new type with the following fields:

• UID (Unique Identifier) field - to use for the urls of our pages