How to run custom AngularJS or jQuery libraries in embedded form?

741 views
Skip to first unread message

Andrew Kim

unread,
May 22, 2015, 6:56:52 PM5/22/15
to camunda-...@googlegroups.com
Hi all,

Is there anybody lucky for this ?
I tried like this example [1][2], but still not working...

How to run custom AngularJS or jQuery libraries in embedded form?
(Is there some kind of version conflict with angularJS and jQuery, if it is then how to use it, like jQuery noConflict?)




Sebastian Stamm

unread,
May 26, 2015, 2:42:37 AM5/26/15
to camunda-...@googlegroups.com
Hi Andrew,

could you describe your issue in more detail? What have you tried to include your scripts, what errors are you getting?

The tasklist already includes jquery, which you can use in your custom scripts with requirejs:

define('custom-script', [ 'jquery' ],
function ($) {
  $(...);
});

Cheers
Sebastian

Andrew Kim

unread,
May 27, 2015, 5:01:41 PM5/27/15
to camunda-...@googlegroups.com
Hi Sebastian,

Thank you for reply, your comment was helpful to figure it out. 
By the way, I have questions as below,

[1] If I changed ngDeps's name like "ui.custom" in tasklist/scripts/config.js, then there is error as below, 
so I need to use only "ui.bootstrap". Do we need to use only this pre-defined word or we need to change the angularJS's configuration to use custom name ??

[2] Is it possible to use multiple jQuery or angularJS, becuase some 3rd party libraries are only working for old versions of jQuery or angularJS.


Thank you and have a great day!

---------------------------------------------- [chrome console] ------------------------------------------------------------------------------------------------------------------------------------------------------------
Uncaught Error: [$injector:modulerr] Failed to instantiate module cam.tasklist.custom due to:
Error: [$injector:modulerr] Failed to instantiate module ui.custom due to:
Error: [$injector:nomod] Module 'ui.custom' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    at Array.forEach (native)
    at Array.forEach (native)
http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=ui.custom&p1=Error…2Fscripts%2Fdeps.js%3A4%3A20161%0A%20%20%20%20at%20Array.forEach%20(native)
    at Array.forEach (native)
    at Array.forEach (native)
http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=cam.tasklist.custo…ocalhost%3A8080%2Fcamunda%2Fapp%2Ftasklist%2Fscripts%2Fdeps.js%3A4%3A21621)
---------------------------------------------- [chrome console] ------------------------------------------------------------------------------------------------------------------------------------------------------------


Sebastian Stamm

unread,
May 29, 2015, 5:00:33 AM5/29/15
to camunda-...@googlegroups.com
Hi Andrew,

I am glad you could figure it out. To your questions:

1: Are you creating a new angular module in your custom script? The line to register a new angular module would look something like angular.module('my.custom.module', []); This module name you have to use in the ngDeps array.
2: I am afraid that this is not easily doable. The problem is, that angular and jquery both pollute the global namespace with their top level objects $ and angular. Since these names are already taken by the version the tasklist uses, trying to load them in a new version will create problems.

Cheers
Sebastian

Andrew Kim

unread,
Jun 1, 2015, 9:44:54 AM6/1/15
to camunda-...@googlegroups.com
Hi Sebastian,

Thank you for replay in detail. 

It was a jquery script and now working fine, but I'll refer to your comment when I use angular module.
I understand that [2] is very difficult issue to every web applications :)


Have a great day.


Reply all
Reply to author
Forward
0 new messages