Fun with Angular and Kubernetes

1. Introduction

   Basic idea of the project is to make a website made with Angular and its functionality of revealing interesting facts or secrets about cats. And it is use of a kitty image as the trigger for revealing these facts.

2. Website Development with Angular

   In order to start the development process we need to Angular environment, I have already completed. Kindly refer below link if are a beginner in the Angular.

   Reference: How to create Angular workspace

   https://medium.com/@dgongoragamboa/how-to-create-an-angular-project-from-scratch-b4031abeb4de

   Angular concepts involves as follows:

   a. Components

   1. 

      

      

      b. Data binding: In our project we have used property binding and two - way binding.

      

      Breakup code of the snippet as follows:

      • The [src]="image" attribute binding syntax binds the src attribute of the image element to a property named image in the component class.

      • The (click)="onChange()" event binding syntax attaches a click event handler to the image element. When the image is clicked, the onChange() method is called.

c. Services using API call

I have created service component, which contains the logic of for making HTTP requests to fetch data from an external API. There are various free API available in over internet, I have used below API URL.

Reference: To get free API

https://apipheny.io/free-api/

Kindly refer below link if you want to use service to call external API.

Reference: How to use API call using service in Angular

https://www.telerik.com/blogs/angular-basics-how-to-use-httpclient

Below are break down of the code:

• Injectable and HttpClient are imported from the @angular/core and @angular/common/http modules, respectively. These imports are necessary to define an injectable service and to make HTTP requests.

• @Injectable decorator is applied to the KubeServiceService class. This decorator marks the class as injectable

• url: This property stores the URL of the external API endpoint from which data will be fetched.

• The constructor of the service class takes an instance of HttpClient as a parameter. HttpClient is a service provided by Angular's HttpClientModule for making HTTP requests

• users(): This method makes an HTTP GET request to the specified URL (this.url) using the HttpClient instance (this.http). It returns an Observable that emits the response data from the HTTP request

d. Modules: It is a mechanism for organizing and packaging components, directives, pipes, and services into cohesive units of functionality. In our code kube module will group together two components i.e header and footer.

e. HttpClient Module

Source code uploaded in below GitHub link: https://github.com/sandeep15rana/angular-cat

3. Container and Dockerization

   Before we are going to containerise the application, there could be scenarios where we want to run our Angular application in different IP and Port. Attached screenshot for reference where we can add --host and --port flag while startup.

   Reference: To start Angular Application on different port

   https://stackoverflow.com/questions/40717449/how-to-change-angular-port-from-4200-to-any-other

   

   

   

   

   In above screenshot I have created Dockerfile for Image creation and Kubernetes menifest files for Deployment and Service object. After running it will show the output as attached and Angular application ready to access over internet.

   If you want to containerise the angular application kindly refer below link which will help.

   Reference: Containerised Angular Application

   https://serengetitech.com/tech/how-to-dockerize-your-angular-14-application/#:~:text=To%20get%20started%2C%20the%20prerequisites,running%20the%20Angular%20Docker%20container

4. Exploring Cat Secrets and Facts

   Below is the actual Application page of our website. If we click of kitty's image secret of the kitty will trigger as shown in the figure.

Thank you for reading :)

Let me know the feedback and feel free to reach out for any suggestion or any doubt.