Angular and GWT side-by-side

[manstis]

Hello,

I am trying to mashup a webapp using both AngularJS and GWT.

Is this at all possible? I'd like to embed a GWT Widget in an AngularJS application.

I've been looking at this bridge; but it appears to provide the ability to write Angular Controllers, Directives etc with GWT, but the example webapp views are native Angular.

Any pointers would be appreciated.

With kind regards,

Mike

[manstis]

I've read https://github.com/cromwellian/angulargwt/blob/master/README.md and understand I can create a GWT Angular module that can be consumed by/within an Angular application; but I'm none the wiser about re-using GWT Widgets in Angular applications.

Thanks for your time.

Mike

[h0ru5]

Hey Mike, actually I do this a lot.

I normally use it to write Angular controllers etc. in Java (typesafe & rich tooling), and use them from JS but you can use it the other way around as well.

You can assign a widget to the element within a directive and use all the good stuff in Angular to configure & control it.

check out an example here

tl;dr: (in link function of a directive)

 element.get(0).appendChild((Node) myWidget.getElement());

Best' Johannes

[manstis]

Thanks Johannes, that's sure going to be helpful..

I wonder whether you can help with another question (if there's a better place to ask, please let me know - IDK, IRC, mailing list, forum etc):

My GWT Angular module needs to use other Angular objects and methods; for example:

myGWTmodule.config(function($routeProvider) {...} );

myGWTmodule.run(function(an_angularJS_service1, another_angularJS_service2) {...} );

Looking at the deferred binding codegen, it looks like I'm out on my own with this...

(Hmmm... beginning to think simply using a native block to interact with Angular is going to easier).

With kind regards,

Mike

[manstis]

Hmm, I tried JSNI, but the GWT compiler changes variable names I really don't want replaced.

For example:

myGWTmodule.config(function($routeProvider) {...} );

becomes (something like):

a.config(function(b) {...} );

Angular then complains there's no provider for "b".

Back to the drawing board.

[manstis]

I add however that using a directive to inject a GWT widget works a treat!

[h0ru5]

Regarding the second question (mail/twitter/XMPP is of course better for that): In order to access a js component from Java, you need to create a wrapper in GWT using jsni calls from there (for it to work nicely, you need some JSNI tricks). In the next GWT release, there will be a Js-Interop feature that eases this.

In your example above, where you did the whole call in JSNI, you need to tell the injector what to inject. a.k.a. ['$service',function(service){}] Search the Angular.js docs for minification or have a look at the generated js code from angulargwt.