SPA templating API
The Please update your project to use the See it, for example, in our minimal headless SPA demos. The
|
SPA template annotations endpoint
Magnolia SPA template annotations make content from a front-end project editable in Magnolia. This is achieved by injecting annotations (HTML comments) around components which the Magnolia Page editor transforms into controls for web content editors.
Annotations are created on the server and can be retrieved through a dedicated Template annotation endpoint. The advantage is the server renders everything from the attributes. Before, the annotations were created in Magnolia frontend helpers.
Version |
Retrieving annotations
The example below shows how you can retrieve template annotations for the Two columns page in the angular-lm
light module. The light module is part of our angular-sample
demonstration Angular application.
The endpoint path as well as the other environment parameters are configured in the .env
configuration file:
NG_APP_MGNL_HOST=http://localhost:8080
NG_APP_MGNL_CONTEXT_PATH=/magnoliaAuthor
NG_APP_MGNL_API_TEMPLATES=/.rest/template-annotations/v1
NG_APP_MGNL_API_PAGES=/.rest/delivery/pages/v1
NG_APP_MGNL_STATIC=/.resources/angular-lm/webresources/dist
Template annotations for the page can be retrieved through the following URL:
http://localhost:8080/magnoliaAuthor/.rest/template-annotations/v1/angular-sample/two-columns
Page content for single-page applications is delivered through the Delivery API. |
SPA template definitions endpoint
For Single-page applications, we provide a dedicated template definitions endpoint which is used to deliver page, area and component template definitions.
Its implementation class is info.magnolia.rendering.spa.rest.v1.TemplateDefinitionEndpoint
. You don’t need to configure anything in the endpoint.
Example request URL and response for template id mtk:components/textImage
:
http://localhost:8080/magnoliaAuthor/.rest/template-definitions/v1/mtk:components/textImage
{
"mtk:components/textImage": {
"dialog": "mtk:components/textImage",
"templateScript": "/mtk/templates/components/textImage.ftl",
"name": "textImage",
"id": "mtk:components/textImage",
"type": "content",
"renderType": "freemarker"
}
}
Page content for single-page applications is delivered through the Delivery API. |