Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Update angular.js integration example.

Browse Source
This commit is contained in:
JC Brand 2016-11-02 14:17:05 +00:00
parent fa338c4828
commit f5ce9620c1
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/source/other_frameworks.rst
View File

@ -1,4 +1,4 @@
Integrating converse.js into other frameworks
Integrating converseijs into other frameworks
=============================================
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>`_.
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.
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
``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.
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
angular.module('converse', []).service('converse', function() {
var deferred = new $.Deferred(),
promise = deferred.promise();
// We create three promises, which will be resolved at various times
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 = {
'load': _.constant(promise),
'waitUntilLoaded': _.constant(loaded_promise),
'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", [
"converse-api",
// START: Removable components
@ -93,7 +104,7 @@ your components, for example:
// Your custom code can come here..
// Then when you're ready, you can initialize converse.js
converse.load().done(function () {
converse.waitUntilLoaded().done(function () {
converse.initialize({
'allow_logout': false,
'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
example above) that makes sure that converse.js is loaded and available. It
returns a jQuery promise which resolves once converse.js is available.