Philip's Blog

My road to Clarity ... UI – Part 2

clarity

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 (wink) 

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 10.200.171.12

or change the base directory with

--base directory

etc.

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:

Modules 
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. 

or 

Components 
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.

and 

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"