A new code sample for Watson Content Hub (WCH) is now available on GitHub. It showcases a navigable site using the following technologies:

  • Angular
  • Bootstrap
  • WCH APIs

Angular components, styled with Bootstrap, are used to construct a navigation and card view. Each card expands to display the full details of a WCH content item. The Angular router is used to automatically update the card list on each navigation click.

The sample demonstrates how to use several WCH concepts:

  • Authentication: Learn how to log in via Angular and start accessing your content items through WCH APIs.
  • Taxonomies & Categories: Create a taxonomy and populate it with several categories. This collection of categories is used to fill in the sample’s navigation. Add a new category to the taxonomy and the navigation automatically includes it, with no code updates necessary.
  • Content Types: Construct a Content Type that is an outline for each content item displayed in the sample. This achieves consistency in cards and detail views across the entire sample.
  • Search API: Clicking a navigation link triggers an Angular route change. The route does a new search for content items within that category, and the Content Type you created. A card is displayed for each result. Adding a content item to a category automatically adds that item to the sample.
  • Image Profiles & Renditions: Create an Image Profile and add a thumbnail rendition. Defining renditions directs WCH to create alternate versions for uploaded images in different dimensions. Adding this Image Profile to the Content Type you created automatically creates the set of renditions for each content item in the sample. A smaller thumbnail rendition is used in displaying cards, while the original, full-size image is rendered in the details view.

The sample is available for download here: sample-article-angular

Screenshot of the running application:


See also: an introduction to Watson Content Hub samples

Join The Discussion

Your email address will not be published. Required fields are marked *