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.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like

This article shows you how to create a blazing fast Gatsby JS blog using Cosmic source plugin. Let’s get started.
In this tutorial, I'm going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic and deploy it to Netlify.
Cosmic lets you build one-to-one as well as one-to-many Object Relationships within your Bucket Dashboard. To help you and your team manage content more seamlessly, you can now see your Connected Objects located on the Object’s Edit page in the Dashboard.
Cosmic makes it easy to deploy your websites and applications to the web. You can deploy an app from any git repository to the Cosmic App Server from any Bucket. Cosmic uses Dokku (Docker + Heroku-like deployment) to deploy your app from any GitHub, BitBucket or any other public repo.
Blazing fast blog built using React Static that utilizes the power of Cosmic.
Here we build a progressive web app in React.js with the power of Cosmic. It respond with status 200 and carries data when you disconnected to internet and in Chrome browser (both mobile and desktop) it gives an option to install the app on home screen.

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales