Closure Library / Closure Compiler + AngularJS

[Guido Tapia]

Hi All,

Just saw the GTAC Angular presentation and have spent the last hour going through the web site.  I really like what I see, this resonates with me much more that Knockout or Backbone.  However...

I have a huge code base (read: investment) in the Google Closure Tools.  Has anyone tried to mix the 2?  I mean I can see several obvious pain points:

• My soy templates would need to be converted (over time of course) to angular templates (which are nicer, so in the long run this hopefully will be worthwhile).
  
• There will be a lot of exporting as the angular templates use strings to reference constructor/property/method names (which the closure compiler will of course try to rename).
  
• There will be the pain of creating the angular externs file, however this is no big deal.
  
• 2 event models, should be ok no? I guess eventually you dont use the closure events any more right? Just let the Angular events + data binding take care of all that stuff.
• I really like the closure testing libs (Especially all the mocking libs).  Closure testing tools are built on top of JSUnit, I assume testing frameworks are pluggable? Or am I stuck with Jasmine
• I see that angular.service takes a string.  How would this work when the compiler renames things?
• Are namespaces supported, I mean in the tutorial I saw all constructors lived in global namespace, can I have things like:  ng:controller="my.super.awesome.namespace.AwesomeController"

Has anyone tried this? Is it doable? Am I setting myself up for disappointment and/or pain?

Thanks all, and great project!

Guido

[Vojta Jina]

Hi Guido, thanks for great post.

There is a project at Google - DFA. They use AngularJS + Closure tools very well.

In general, we want AngularJS to play nicely with Closure tools, so we are making steps towards this goal...

To answer your questions:

- yes, convert tpls to Angular

- we prefer Jasmine for unit testing, but you should be able to use any testing framework you like, angular is not coupled to Jasmine

- you can use namespaces

Other questions are all related to one thing - advanced compilation. Currently it's not possible to do that, but we really want it and there are already some proposals, especially by Igor, so I'm confident we will achieve advanced compilation, so that you can advance compile your app together with angular to get all the benefits.

Hope this helps,

V.

[Guido Tapia]

Thanks Vojta,

Can I see those proposals, I searched the groups and they don't seem to be there? Are they public? Its a shame that the closure team have rejected the @export / @public annotation idea.  This would be great for something like Angular interop.  Just mark your controller as @public and ensure all @public members are not renamed (or at least automatically exported).

Can't the Googlers on the Angular team put a bit of pressure on the closure team to get this accepted? :)

Thanks again for the reply Vojta.

[Vojta Jina]

Here is the PR https://github.com/angular/angular.js/pull/597 - which allows to advance compile your app code, not angular itself.

I don't think there is any document, we only had some discussions in person.

Yep, we might push on Closure team, but at this point, I'm not sure if this feature solves all the problems... The main issue is probably mapping to templates (i.e. controller methods in templates, minified in js code...).

Again, we want to achieve advanced compilation of angular together with your app, but at this moment, there are other important things to do...

V.

[Elliott Sprehn]

@export works already, you'd need to annotate the types and methods and the Compiler won't rename them. This really isn't ideal though, the opposite is what I've been pushing for. Renaming to happen on the templates so the exporting isn't needed at all.

function Controller(scope) {
scope.example = function() {};
}

<div ng:show="example()">

becomes

function A(s) {s.e=function(){}}

<div ng:show="e()">

Eventually we'd probably want to rename the ng:show to something like "ng-a" as well.

[Elliott Sprehn]

On Nov 26, 2011, at 3:29 AM, Guido Tapia wrote:

• 2 event models, should be ok no? I guess eventually you dont use the closure events any more right? Just let the Angular events + data binding take care of all that stuff.

This should be fine. We're exploring doing the same thing as well. Closure events serve a different purpose too, since you can pass around an EventTarget and notify a single party of a change, while Angular's system is more for broadcasting across the whole scope tree.

• I really like the closure testing libs (Especially all the mocking libs).  Closure testing tools are built on top of JSUnit, I assume testing frameworks are pluggable? Or am I stuck with Jasmine

You can use any library you want.

• I see that angular.service takes a string.  How would this work when the compiler renames things?

Constants and $inject. For example:

var counter = 0;

function uniqueId(name) {

  return name + (counter++);

}

myapp.services.LOGIN = goog.('login');

angular.service(myapp.services.LOGIN, function(...) {});

function Controller($route, loginService) {

 // ...

}

Controller.$inject = ['$route', myapp.services.LOGIN];

• Are namespaces supported, I mean in the tutorial I saw all constructors lived in global namespace, can I have things like:  ng:controller="my.super.awesome.namespace.AwesomeController

Yes. We do this internally, but you need to make sure to export your controllers otherwise that becomes "my$super$awesome$namespace$AwesomeController" or just "A" depending on the compilation flags.

An alternative approach is to put your controllers with short names in the root scope since Angular will look on the current scope for the controller.

in js:

angular.service(myapp.services.INIT, function(scope) {

  scope['AwesomeController'] = myapp.controllers.AwesomeController;

}, {$eager: true});

and then ng:controller="AwesomeController" should work fine.

... Am I setting myself up for disappointment and/or pain?

Some of both. Advanced compilation mode will probably be a bit painful right now, but simple mode should work.

[Vojta Jina]

This way of rewriting templates is what we want as well. It's not possible now, but hope we can get to it soon, still making steps towards this goal.

[Guido Tapia]

Thanks Elliot,

I did a quick prototype and manually exporting types/props/methods and using those names in angular seems to work. It is ugly tho.

Thanks

[benjamin...@gmail.com]

Hey guys,

Any update on doing advanced compilation?  I see the pull request was closed in favor of server side pre-rendering, but being new to Angular, I'm a little fuzzy on what that means.  Also, there was a vague update on the blog in July.  I'm wondering if this means there's something I can try playing around with?

Thanks,

Ben

[benjamin...@gmail.com]

I've submitted a pull request that makes progress towards running angularjs with closure compiler advanced optimizations turned on. I wrote quite a bit of closure code while at Google, so hopefully I can be helpful in working towards making it work with Closure. Even if making it work is a non-goal, I think that getting closer to making it work is helpful for the static analysis. It identified several errors in the documentation, so there's some good cleanup included in the pull request of documentation referencing non-existing variable names, etc.

-Ben