How to create a simple company website with Cosmic and Angular

Community Articles
Community Articles How to create a simple company website with Cosmic and Angular

* This article will assume some basic knowledge of Angular so it can focus on the specific task of requesting and showing data from Cosmic


Take a look at the repository and install the app

What is this app about?

A typical company website is just a set of pages structured in a more or less simple navigation. We want to create a website that allows the user to create any number of pages and decide the structure for the navigation, without the need to wait for a code release. For that, we are going to rely on Cosmic and create the structure to hold this project. On this example, our bucket will have the following object types:

  • Pages. This is a simple object, with no additional metafields.
  • Navigation. It will hold a collection of Pages.
  • Presets. This is a configuration object with a list of attributes that will help us start our app. It will hold the value for the homepage and the main navigation that we will use for the menu of our site.

Using the API

Now that we defined the structure of our data, we need to create our Angular app (I recommend using the Angular CLI) and create a service to make our calls to the Cosmic API. See how simple is to request a single page object from Cosmic:

get a single page and save it to the stream to keep it cached for the session

Note that, for nested objects, Cosmic will not return the full tree, so sometimes you will need to concatenate calls to make the most of our service, e.g.: When fetching the main presets, you would probably want to include the navigation pages.

this call will combine the result of getNavigation into the result of getPreset

Our api calls need to be authenticated with a read key, we can include that on each method, but the easiest may be to create an interceptor. This will intercept all http requests, so we check if it's a Cosmic request and append the read key where necessary.

intercept and append the read or write parameters

Routing to the pages

At this point, our website does nothing, the first thing it needs to do is to know how to load its first page. We need to create a routed module for the Pages, and set it to load on the root. Once inside the module, on its own routing, we will set a route for the parameter :slug to load the Page Component. And what happens when there is no route specified? This will be our most common scenario, for that, we set an empty route with a Guard.

A guard will be executing when matching a route and before loading the component, so we will use it to fetch the main presets from Cosmic, and redirect the app to the homepage we stablished.

from Angular 7.1, canActivate can return either a boolean or an UrlTree


Now we have a route configuration that will load the Page component, and this is the way to load a page using the slug from the parameter list:

now we can use the page object on our template

With this, we have a way to navigate via url, but we should also load a menu so the user can see the pages available. For that, we will add a menu component on the core module, as it will be shared throughout the app. Our menu will be composed of a navigation list, a logo and the company name; all of this is defined on the presets, so the menu will have a call like this:

note that we specifically ask to include the navigation by adding "true" as a parameter to the method

All of this would allow you to quickly create a website using Angular and Cosmic, all that is left to do is to create the templates and extend the configuration to meet your needs.

You may also like

This article shows you how to create a blazing fast Gridsome blog using Cosmic source plugin. Let’s get started.
The Cosmic team was honored to to speak at Toyota Connected for the Ember.js Dallas Meetup this week. Cosmic co-founder Tony Spiro presented "Building Modern Apps with API Services" to illustrate the growing trend of offloading core dev tasks onto best-in-class API services.
In this tutorial, I'll show you how to deploy your Gatsby Blog to Netlify and trigger automatic rebuilds on content edits using Cosmic Webhooks.
Filtering data is one of the most common feature of any data facing application, wheather it's a fron-end app or a back-end application. The Filter function is used to find records in a table or a dataset that meets certain criteria.
One of the largest problems I’ve faced while working on projects is having to deal with integrating content and events into third-party services.It’s time consuming, and as the demands in the application in question grows, so does the mental strain in having to keep up to pace with all the changes
In this tutorial, we're going to build a digital shrine to the great musical artists of our time and to listening to music by album - the way great artists meant it to be listened to! In the process, you'll learn a little bit about Cosmic, React, CSS Grid, Flexbox, Material UI and Spotify's aweso

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales