Nonprofit Pizza Maker

    rage-angular
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    Image of Angular

    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

    Install

    npm i rage-angular

    DownloadsWeekly Downloads

    5

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • armyw0w