My road to Clarity ... UI - Part 2


Philip Kriener

Philip Kriener

A blog to share my path from total ignorance to becoming... what's the word? 'enlighted'?

This week, the server side of things

Server Setup

It was fairly easy to get started. We used Photon OS, because

"Project Photon OS™ is an open source, minimal Linux container host that is optimized for cloud-native applications, cloud platforms, and VMware infrastructure"

... well, we could have used any other Linux to accomplish the same outcome, but for our project it seemed obvious to stick with the same manufacturer


Backend (and Frontend) Framework

nodejs is the JavaScript run-time environment that executes the JavaScript code. When you have installed it on your Linux server (whichever flavor you prefer) you can use the npm package manager (which comes with nodejs) to install the the Angular CLI globally. This is recommended, since VMware is using CLI to update the Clarity components.

To install Angular CLI you just have to run:

npm install -g @angular/cli

Sometimes, if something breaks, or you have changed something, I found it easier to just run "npm install" - or "npm update" again. Since the packages are nicely separated from your code, you can easily set up multiple dev servers if you like and just change the component code.

Checkout the Getting started documentation provided by Angular, but in essence, this is all you have to do:

Then you can build your app

Build the new workspace and a starting project structure etc. using the CLI command:

ng new my-app

To run the app during development, Angular comes with its own server for you to run locally. This is quite awesome, because you can leave the server running and it listens for changes. So when you change any file in the app, Angular will recompile and restart the server immediately for you to test the latest changes.

Simply navigate to the directory you have placed your app into and run:

ng serve

You can append the ng serve command with changes to the host

ng serve --host

or change the base directory with

--base directory


Later on, when the app is finished, you want to compile your Angular app bundle it into a much faster production copy using

ng build

Angular architecture

You need components that define your app. Each component comes with its own TypeScript and HTML files, as well as a CSS file for component based styling and route guard protection. The latter helps you to ensure that non-public components are protected. This is actually quite easy:

Access control

the route guard file basically just consists of one function: if "canActivate()" returns TRUE, the route is open, otherwise you can specify a different destination if desired.

I won't be able to go into too much detail here, but you can find a bunch of tutorials online, even if you want to implement authentication provider using OAuth2 etc.

Checkout the Angular guide on architecture to find more on:

Angular NgModules differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.


Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.


Templates, directives, and data binding
A template combines HTML with Angular markup that can modify HTML elements before they are displayed. Template directives provide program logic, and binding markup connects your application data and the DOM.

Next week: read about some coding tips and tricks in "My road to Clarity... UI – Part 3"





Thank you! Your message has been sent!
Oops! Something went wrong while submitting the form.