Angular Migration Guide

This guide will document the process for migrating the KomMonitor Web Client from AngularJS to Angular. It will give you a list of relevant online resources, list the current migration status of components and show best practices for a component-wise migration.

Resources

• https://joelbinn.gitbooks.io/hybrid-angular-angularjs-application-with-angular/content/ch1-making-the-hybrid.html
  Guide that shows how to create a hybrid Angular application.
• styling guidelines for the angularjs version here
• latest version of web-client has typescript support the guidelines for the typescript version can be found here

Migration Status

Component Name	Status	Issues
(InfoModal)	closed	Closing the modal does not work properly

Best practices

component Creation

Angular uses component-based architecture, which means each component should have its own styles. This promotes encapsulation and reusability. In AngularJS, styles might have been defined globally or through various other mechanisms. In Angular, you can use the styles or styleUrls properties in the component metadata to define styles.

Command : ng generate component [component-name]

// Angular Component
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: '<div>Hello from Angular!</div>',
styleUrls: ['./example.component.css'] // or use 'styles' property for inline styles
})
export class ExampleComponent {}

Module Creation

The kommonitor makes use of modules to provide and better structure and organization of the angular application and we can achieve that using the NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule(https://angular.io/api/core/NgModule).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ]
, bootstrap: [ AppComponent ] })
export class AppModule { }

Services

In Angular, services are used to organize and share code and data across components,or fetch data from API’s or other sources. They are typically used for tasks like fetching data from a server, managing state, and performing business logic.

Command : ng generate service [service-name] @Injectable is a decorator provided by Angular that is used to indicate that a class may have dependencies that need to be injected. It is typically used with services in Angular

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class ServiceCreated {
// Your service logic here }

Injecting a service into a component

We need to make the service available at both th elevels of the angular at both levels At the NgModule level, using the providers field of the @[NgModule] decorator.

@NgModule({
declarations: [HeroComponent]
providers: [Service-name]
})
class HeroListModule {}

At the Component level, using the providers field of the @Component decorator. @Component({ selector: 'component-selector', template: '...', providers:[Service-name] }) class HeroComponent {}

Using Service/dependency within the component

The most common way to use the service/dependency is to use in the constructor class so it can be mad e available throughout the class.If a requested service instance isn't available , the injector creates one using the registered provider, and adds it to the injector before returning the service to Angular. @Component({ … })
class HeroListComponent {
constructor(private service: HeroService) {}
}

Alternatively we can use inject Decorator

@Inject() is a manual mechanism for letting Angular know that a parameter must be injected.

import { Component,Inject } from '@angular/core';
import { kommonitorDataExchangeService } from 'utils/genericServices/kommonitorDataExchangeService/kommonitor-data-exchange-service.module';
@Component({
selector: 'app-my-component',
template: ``<br/> <br/> ,
})
export class MyComponent {
constructor(@Inject(kommonitrDataExhangeService) private kommonitorDataExchangeService: kommonitorDataExchangeService) {
}
}

Credits

Substantial work for creating this migration guide has been done as part of Google Summer of Code 2023.