rage-angular v1.0.4
RAGE Angular
Hi, my name is Armyw0w, I made this Module to integrate Angular in RAGE Multiplayer (for the CEF more exactly)
Installation
You need NodeJS installed (You can download it from here)
npm install rage-angular@latest
Import module
I hope you know to import the module, if not, you should take a look here
IMPORTANT!
If you don't inject the RAGE in a component the RageJS.Init() callback it will never be called.
Don't put the Angular builded files in client_packages, the application it will never work!!!
Adding the Middleman between Client and Angular
You need to add a javascript library to use the module.
Get the library and put in the index.html
Calling the Client from Angular (synchronized)
Now you can call a function from Angular to client (with mp.trigger) and wait for a response from client (optional)
This is a sample example about how to call a client function without the callback function
constructor(private rage: RAGE)
{
rage.Client.call(
{
fn: "testFunction",
args: [
10,
'some string'
]
});
}
Now let's start talking about the callback function
constructor(private rage: RAGE)
{
rage.Client.call(
{
fn: "testFunction",
args: [
10,
'some string'
]
},
(response: any) => {
console.log(response);
});
}
Before calling the mp.trigger, because we have the callback function we need to put the function in a some kind of register which have all function which are waiting for a response from the client.
It's better to not put the callback parameter if you don't send a response back to Angular.
Now let's go on the client-side
angular = mp.browsers.new('package://Angular/index.html');
mp.events.add('testFunction', function(responseId, arg1, arg2) {
// responseId could be undefined if you haven't the callback function set
mp.gui.chat.push("received: " + arg1 + ", " + arg2);
mp.gui.chat.push("we send a response to : " + responseId);
// Sending back a response
angular.execute("RageJS.sendFuncResponseToRAGE('" + responseId + "','testFunction','My response is: NO!');");
});
I will do a library for Client-side, the aboxe example it's just to show you how to catch the call.
The responseId parameter it's the unique id from that register.
And now the console.log(response) will print
My response is: NO!
!! If you don't send an object through sendFuncResponseToRange, don't put as first character the '{'
!! In the function I check if the first character is '{', and if it is, the all string will be converted in an object
Listening the custom events in Angular
!! This it will be rewriten !!
import { Component } from '@angular/core';
import { RAGE } from 'rage-angular';
@Component({
selector: 'my-component'
})
export class ChatComponent
{
private sub: any;
constructor(private Rage: RAGE) {
this.sub = Rage.listen.subscribe(
(data) => {
console.log(data);
}
);
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
The Rage.listen will send a RAGEEvent, you have the interface here:
interface RAGEEvent {
func: string | number;
args: any[];
}
So you can verify if sent event is yours
import { Component } from '@angular/core';
import { RAGE } from 'rage-angular';
@Component({
selector: 'my-component'
})
export class ChatComponent
{
private sub: any;
constructor(private Rage: RAGE) {
this.sub = Rage.listen.subscribe(
(data) => {
if (data.func === 'MyNewEvent') {
// Great
alert ( data.args[0] );
}
else if ( data.func === 0 ) {
// Great
alert ( data.args[0] );
}
}
);
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
TO DO
- Add call Client function from Angular (sync)
- Add better documentation (see the Source)
- Removed arguments limit.
- Add call Angular function from Client (sync)
- Remove posibility to send a object argument
- Add all RAGE functions/events
- Create a library for client-side