A blog to share my path from total ignorance to becoming... what's the word? 'enlighted'?
This week, the server side of things
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
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:
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:
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
Later on, when the app is finished, you want to compile your Angular app bundle it into a much faster production copy using
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:
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:
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"