Commit f5ce9620 authored by JC Brand's avatar JC Brand

Update angular.js integration example.

parent fa338c48
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 ...@@ -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. ...@@ -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. ...@@ -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: ...@@ -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: ...@@ -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.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment