Page History

...

We use the classic cars from the My first content app tutorial as sample content. The cars are typical structured content: each car has the same content type and same fields. You can publish it to a website or consume it from a client-side application like we do in this tutorial. With the Magnolia Delivery endpoint API you can access any Magnolia workspace.

Image Modified

If you want to know how to fetch content app data on the server side, for instance from a FreeMarker template script, see Accessing content on the server side.

...

• Install a Magnolia bundle with a custom content app.
• Configure the delivery endpoint in a light module.
• Test REST access and think about REST security.
• Write an Angular app which consumes JSON from the configured REST endpoint.

Architecture overview:

Image Modified

Install a Magnolia bundle containing the app-tutorial content app

...

This content app has two subapps:

• The Browser subapp
  Image Modified

• The Detail subapp 
  Image Modified

Content in the app-tutorial

...

This is the products workspace displayed in the Tools>JCR browser app:

Image Modified

Look at the image property. It stores an asset ID, a reference to an asset stored on the dam workspace.

...

Reload the file in your browser. Now you can see the detail of the Aston Martin DB5 in your browser. Cool, isn't it!?

Image Modified

carsList controller

...

• Line 1: Again custom components APP_CONFIG, globalData and utils are injected.
• Lines 5-10: selectCar is executed when you click a car in the list. The function sets globalData.productPath so it indirectly triggers the execution of the carDetail controller.
  We remove the slash at the very begining, since we want a path relative to the rootPath as defined in the configuration for the carFinder prefix of the delivery endpoint.
• Lines 12-14: clickCategory maintains the $scope variable carCategories. Since this changes the state of a controller $scope variable, the UI gets repainted - the list items get updated.
• Line 21, 22: The controller executes an HTTP#get method. Here the URI for the JSON call requests the cars root folder and contains the argument depth.

Final result:

Image Modified

The angular app is now fully functional. Congratulations! 

...