Update angular.js integration example.
This commit is contained in:
parent
fa338c4828
commit
f5ce9620c1
|
@ -1,4 +1,4 @@
|
||||||
Integrating converse.js into other frameworks
|
Integrating converseijs into other frameworks
|
||||||
=============================================
|
=============================================
|
||||||
|
|
||||||
Angular.js
|
Angular.js
|
||||||
|
@ -8,7 +8,7 @@ Angular.js has the concept of a `service <https://docs.angularjs.org/guide/servi
|
||||||
which is a special kind of `provider <https://docs.angularjs.org/guide/providers>`_.
|
which is a special kind of `provider <https://docs.angularjs.org/guide/providers>`_.
|
||||||
|
|
||||||
An angular.js service is a constructor or object which provides an API defined by the
|
An angular.js service is a constructor or object which provides an API defined by the
|
||||||
writer of the service. The goal of a service is to organize and share code, so
|
author of the service. The goal of a service is to organize and share code, so
|
||||||
that it can be used across an application.
|
that it can be used across an application.
|
||||||
|
|
||||||
So, if we wanted to properly integrate converse.js into an angular.js
|
So, if we wanted to properly integrate converse.js into an angular.js
|
||||||
|
@ -16,7 +16,7 @@ application, then putting it into a service is a good approach.
|
||||||
|
|
||||||
This lets us avoid having a global ``converse`` API object (accessible via
|
This lets us avoid having a global ``converse`` API object (accessible via
|
||||||
``windows.converse``), and instead we can get hold of the converse API via
|
``windows.converse``), and instead we can get hold of the converse API via
|
||||||
angular.js dependency injection, when we specify it as a dependency for our
|
angular's dependency injection, when we specify it as a dependency for our
|
||||||
angular components.
|
angular components.
|
||||||
|
|
||||||
Below is an example code that wraps converse.js as an angular.js service.
|
Below is an example code that wraps converse.js as an angular.js service.
|
||||||
|
@ -24,16 +24,27 @@ Below is an example code that wraps converse.js as an angular.js service.
|
||||||
.. code-block:: javascript
|
.. code-block:: javascript
|
||||||
|
|
||||||
angular.module('converse', []).service('converse', function() {
|
angular.module('converse', []).service('converse', function() {
|
||||||
var deferred = new $.Deferred(),
|
// We create three promises, which will be resolved at various times
|
||||||
promise = deferred.promise();
|
var loaded_deferred = new $.Deferred(), // Converse.js has been loaded
|
||||||
|
connected_deferred = new $.Deferred(), // An XMPP connection has been established
|
||||||
|
roster_deferred = new $.Deferred(); // The contacts roster has been fetched.
|
||||||
|
|
||||||
|
var loaded_promise = loaded_deferred.promise(),
|
||||||
|
connected_promise = connected_deferred.promise(),
|
||||||
|
roster_promise = roster_deferred.promise();
|
||||||
|
|
||||||
|
// This is the API of the service.
|
||||||
var service = {
|
var service = {
|
||||||
'load': _.constant(promise),
|
'waitUntilLoaded': _.constant(loaded_promise),
|
||||||
'initialize': function initConverse(options) {
|
'initialize': function initConverse(options) {
|
||||||
this.load().done(_.partial(this.api.initialize, options));
|
this.waitUntilLoaded().done(_.partial(this.api.initialize, options));
|
||||||
}
|
},
|
||||||
|
'waitUntilConnected': _.constant(connected_promise),
|
||||||
|
'waitUntilRosterFetched': _.constant(roster_promise),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Here we define the core components of converse.js that will be
|
||||||
|
// loaded and used.
|
||||||
define("converse", [
|
define("converse", [
|
||||||
"converse-api",
|
"converse-api",
|
||||||
// START: Removable components
|
// START: Removable components
|
||||||
|
@ -93,7 +104,7 @@ your components, for example:
|
||||||
// Your custom code can come here..
|
// Your custom code can come here..
|
||||||
|
|
||||||
// Then when you're ready, you can initialize converse.js
|
// Then when you're ready, you can initialize converse.js
|
||||||
converse.load().done(function () {
|
converse.waitUntilLoaded().done(function () {
|
||||||
converse.initialize({
|
converse.initialize({
|
||||||
'allow_logout': false,
|
'allow_logout': false,
|
||||||
'auto_login': 'true',
|
'auto_login': 'true',
|
||||||
|
@ -108,7 +119,7 @@ your components, for example:
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
You might have noticed the ``load()`` method being called on the ``converse``
|
You might have noticed the ``waitUntilLoaded()`` method being called on the ``converse``
|
||||||
service. This is a special method added to the service (see the implementation
|
service. This is a special method added to the service (see the implementation
|
||||||
example above) that makes sure that converse.js is loaded and available. It
|
example above) that makes sure that converse.js is loaded and available. It
|
||||||
returns a jQuery promise which resolves once converse.js is available.
|
returns a jQuery promise which resolves once converse.js is available.
|
||||||
|
|
Loading…
Reference in New Issue
Block a user