Last month, we launched the industry-first open-source web integration platform Glue42 Core. We are now pleased to announce the release of the latest addition to our integration platform developer toolkit – the @glue42/ng NPM package. The library makes the integration of Angular applications in the Glue42 interoperability environment easier and aligns with the architectural guidelines of Angular.
Why do we need a Glue42 Angular Wrapper?
Out of the box, Glue42 interoperability in web applications can be consumed through the framework-agnostic Glue web library – all it takes is to instantiate a Glue object and subsequently use it wherever necessary. However, this approach does not scale very well across large and complex applications – thankfully, the Angular framework provides the necessary abstractions for a well structured, scalable architecture – the so-called Modules and Services.
Based on our experience, developers who integrate Glue42 in their Angular projects end up wrapping it in a Module / Service – so we decided to spend some extra effort and build and maintain that reusable part of the platform.
Glue42 Enterprise Compatibility
From the very beginning, we are designing Glue42 Core as a web-native counterpart of Glue42 Enterprise, reimagined within the constraints of the Web. Like everything else related to Glue42 Core, @glue42/ng is fully compatible with the Enterprise environment, making it possible for your apps to run and integrate both in the standard browser environment and in the Glue42 Desktop client with minimum effort/fork maintenance.
The Glue42Ng Module
The Glue42Ng Module is the initialization point and the place to optionally configure the Glue42 connection. In its simplest form, it looks like this:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Glue42Ng } from "@glue42/ng";
import GlueWeb from "@glue42/web";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Glue42Ng.forRoot({ factory: GlueWeb, holdInit: false })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Afterward, you can inject the GlueStore in your code like this:
import { Component, OnInit } from '@angular/core';
import { Glue42Store } from '@glue42/ng';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private readonly glueStore: Glue42Store) { }
public ngOnInit(): void {
this.glueStore.glue.interop.register('multiply', (args) => args.arg1 * args.arg2 );
}
}
Get Started
To learn more about the capabilities and the usage of @glue42/ng, get started with the Angular tutorial section from our documentation. If you would like to share some feedback with us, open an issue in Github. Happy coding!
Tags
