XMPP: AngularJs + Strophe.js

Question

I have a basic XMPP client running on strophe.js.

When I enter, I create handlers such as

connect = new Strophe.Connection('http://localhost/http-bind');
...
...

    connect.addHandler(on_message, null, "message", "chat");
    connect.addHandler(on_presence, null, "presence");

...
...

and then I “listen” to those

function on_presence(presence) {
// handling presence
}

function on_message(presence) {
// handling presence
}

Therefore, I am trying to "convert" it to AngularJS. The first part is pretty simple. I have a controller that handles part of the login perfectly:

angular.module('app').controller('loginCtrl', function($scope) {
connect = new Strophe.Connection('http://website.com/http-bind');

connect.connect(data.jid, data.password, function (status) {
  if (status === Strophe.Status.CONNECTED) {
    connect.addHandler(on_message, null, "message", "chat");
    connect.addHandler(on_presence, null, "presence");
  }
}
})

But how do I really start to listen to these events (on_message, on_presence) in the angular context for all the controllers that I have.

Answer 1

As suggested above (or below), I wrapped strophe in a service, so my "login" mechanism looks like this:

.controller('loginCtrl', function(xmppAuth) {

    xmppAuth.auth(login, password);

})

any of my services:

.service('xmppAuth', function() {

return {

auth: function(login, password) {
   connect = new Strophe.Connection('http://mydomain.net/http-bind');
   connect.connect(login, password, function (status) {
       if (status === Strophe.Status.CONNECTED) {
           // we are in, addHandlers and stuff
       }
   }
}

}

})

Answer 2

Wrap Strophe Angular. Angular , Strophe Service ( Injection Dependency).

Answer 3

Or maybe you can create a module for Strophe and then include the module in your application and then include strophe as a variable, wherever you use it.