The Angular CLI requires a minimum Node.js version of either v12.14 or v14.15.
Install Angular CLI globally. See angular.io/cli. The version of CLI you have will define which Angular version you will have in your project.
npm install @angular/cli -g
To install older versions or downgrade your CLI use the tag @vX-lts
, where X is the version, or use @latest
. See npmjs.com/package/@angular/cli
npm install @angular/cli@v7-lts -g
Set up an Angular app with or without strict mode or routing. It will create a project folder with all needed files including package.json and git etc. It's probably wise to include routing.
ng new weavy-angular-app
cd weavy-angular-app
If you want to try routing and navigating between components, you can follow the example on angular.io/guide/router
You can add the Weavy client in two ways; by including it normally as a script tag in HTML or as an included script in the build.
Open src/index.html
and add the script tags to the <head>
section. Replace {your-server-domain}
with your server domain URL when you have set up your own installation.
index.html
<head>
...
<script src="https://{your-server-domain}/javascript/weavy.jquery.js"></script>
</head>
Download weavy.jquery.js
from your installation.
Copy weavy.jquery.js
to src/assets
Include weavy.jquery.js
in angular.json
scripts section.
Note: You can include jQuery the same way if you want to use it in Angular, but then you should use the unbundled weavy.js
angular.json
{
"projects": {
"weavy-angular-app": {
"architect": {
"build": {
"options": {
"scripts": [
"src/assets/weavy-8.1.0+weavy.9d9087153.jquery.js"
]
}
}
}
}
}
}
To create optimal performance, we will place the Weavy instance in a service. This way it will be reusable for the Weavy component and we will avoid redundant initialization and calls to the server.
The simplest way to create a new service is to use the CLI. It will generate two files in src/app
ng generate service weavy
src/app/weavy.service.spec.ts
src/app/weavy.service.ts
We will create the Weavy instance in the service constructor and delay initialization to on-demand to avoid slow rendering. The service will also handle the authentication.
You must declare Weavy to be able to reference it in the service since it's defined globally.
We create a wrapper for the weavy.space()
function for convenience and to initialize automatically on demand. You may also use all other functionality in Weavy since we expose the Weavy instance as a property in the service.
To handle destruction simply just call weavy.destroy()
in the OnDestroy
hook. You need to import { OnDestroy } from '@angular/core'
and also add class WeavyService implements OnDestroy
.
weavy.service.ts
import { Injectable, OnDestroy } from '@angular/core';
// The Weavy class must be declared for usage
declare let Weavy : any;
@Injectable({
providedIn: 'root'
})
export class WeavyService implements OnDestroy {
initialized: boolean = false;
jwt: any; // String, function or promise
weavy: any; // The weavy instance
constructor() {
// Place your JWT token string here
this.jwt = '{your-generated-jwt-token}';
this.weavy = new Weavy({ jwt: this.jwt, init: false });
}
init(): void {
if (!this.initialized && !this.weavy.isInitialized) {
this.weavy.init();
}
this.initialized = true;
}
space(selector: any): any {
this.init();
return this.weavy.space(selector);
}
ngOnDestroy(): void {
this.weavy.destroy();
}
}
The JWT is for providing user authentication to Weavy. The simplest way to get running is to simply paste a valid JWT string into the example before you run it. The proper way to implement JWT is to create a service that you reference in your Weavy service class constructor. The service should then preferably just return a promise for the token.
You may also use the CLI to create a new component. It will generate two files in src/app/weavy
ng generate component weavy -t -s
src/app/weavy/weavy.component.spec.ts
src/app/weavy/weavy.component.ts
Edit the src/app/weavy/weavy.component.ts
. Define a div in the template field. Use an angular #id
to be able to pass a unique container to Weavy.
weavy.component.ts
@Component({
selector: 'app-weavy',
template: '<div #weavyContainer class="weavy-container"></div>',
styles: ['.weavy-container { display: contents; }']
})
You can bind Weavy options to component properties to be able to reuse your component. This is done using @Input()
to decorate the properties. Note that you need to import { Input } from '@angular/core'
. The keys may be anything you'd like.
export class WeavyComponent implements OnInit {
@Input() spaceKey: string = "angular-global";
@Input() spaceName: string = "Angular Global Space";
@Input() appType: string = "messenger";
@Input() appKey: string = "angular-chat";
@Input() appName: string = "Angular Chat";
}
If you used the angular #id
, you need to also import { AfterViewInit, ViewChild, ElementRef } from '@angular/core'
and add class WeavyComponent implements AfterViewInit
. The element of the container can then be referenced as an ElementRef
using @ViewChild()
decorator.
@ViewChild('weavyContainer') weavyContainer!: ElementRef;
// The weavyContainer is not available until the view has been initialized
ngAfterViewInit() {
console.log(this.weavyContainer!.nativeElement)
}
To make use of the Weavy service we need to import { WeavyService } from '../weavy.service'
in our component and then reference it in the constructor.
constructor(private weavy : WeavyService) { }
To handle destruction we just remove the Weavy app in the OnDestroy
hook. You need to import { OnDestroy } from '@angular/core'
and also add class WeavyComponent implements OnDestroy
.
ngOnDestroy(): void {
this.weavyApp!.remove();
}
Here is the complete component class
weavy.component.ts
import {
Component, OnInit, OnDestroy,
Input,
AfterViewInit, ViewChild, ElementRef
} from '@angular/core';
import { WeavyService } from '../weavy.service';
@Component({
selector: 'app-weavy',
template: '<div #weavyContainer class="weavy-container"></div>',
styles: ['.weavy-container { display: contents; }']
})
export class WeavyComponent implements OnInit, AfterViewInit, OnDestroy
{
@Input() spaceKey: string = "angular-global";
@Input() spaceName: string = "Angular Global Space";
@Input() appType: string = "messenger";
@Input() appKey: string = "angular-chat";
@Input() appName: string = "Angular Chat";
@ViewChild('weavyContainer') weavyContainer!: ElementRef;
weavySpace: any;
weavyApp: any;
constructor(private weavy : WeavyService) { }
ngOnInit(): void {
this.weavySpace = this.weavy.space({
key: this.spaceKey,
name: this.spaceName,
})
}
ngAfterViewInit(): void {
// After the view is initialized and the weavyContainer is available
this.weavyApp = this.weavySpace.app({
type: this.appType,
key: this.appKey,
name: this.appName,
container: this.weavyContainer!.nativeElement
});
}
ngOnDestroy(): void {
this.weavyApp!.remove();
}
}
To use the Weavy component simply reference it in your src/app/app.component.html
template. The component will adjust itself to the size of the parent container, therefore you need to set a height on the surrounding container somehow. Otherwise, the component will have a height of 0. If you want to make use of the properties, you need to reference them from your component class or define them as strings in the property. See angular.io/guide/inputs-outputs
app.component.html
<div style="height: 100vh">
<app-weavy [appType]="'messenger'" [appKey]="'my-chat'"></app-weavy>
</div>
To test the example you can use ng serve, which will compile and start a test server. It also recompiles and reloads the app in the browser whenever you make changes. If you have configured a different server name for your localhost, such as http://mycomputer.local
, you need to specify it as publicHost in the angular.json
serve settings to use it.
angular.json
{
"projects": {
"weavy-angular-app": {
"architect": {
"serve": {
"options": {
"publicHost": "mycomputer.local"
}
}
}
}
}
}
After that, just run serve and open the app in your browser, usually on http://localhost:4200
.
ng serve
Voilà!