How does Angular JS relate to Google Closure?

Now that AngularJS 1.0 is released I am wondering how this project fits together with the other general-purpose JavaScript framework / tool from Google, Closure.

I have only seen basic description of those two technologies (and read about a half of the book on Closure) so I have no direct experience but this is how it looks to me:

  • Closure is a set of technologies that can be used separately. What I find probably the most appealing is:
    • Closure Compiler which seems to "fix JavaScript" in a sense that it warns against typical issues, provides some compile-time checks (not all people like this but probably most Google developers do, and I do too). And of course it's nice that the resulting code is smaller and more efficient.
    • Then there are some parts of Closure Library that I like, e.g. abstractions over built-in types (ArrayLike etc.), class-based system, eventing mechanism, DOM abstractions etc. I'm not sure yet if I like the GUI library or not (seems to be quite complex and I didn't really have time to study it yet).
    • Then there are some features that I don't think I would find that useful, e.g. Templates.
  • AngularJS, which I've only read briefly about, seems to be much higher-level than Closure. It seems to be an application framework providing features like data binding, reusable components, MVC structure etc.

So these two technologies seem to be aimed at quite a different level of abstraction so my first thought was, can they be used together? Closure providing low-level compiler and browser abstractions while Angular providing application-level services and structure? Would it make sense and would it work well together?

The only Google project I'm aware of that uses AngularJS is the DoubleClick team. (presentation) Essentially, they still use Google Closure Library for everything but the UI building. Also note that they use Google Closure Compiler, but that's almost a given, "nobody" uses only the Library without the Compiler.

Google Closure Library comes with a UI framework in its goog.ui namespace. This framework compares in almost every way to non-web UI frameworks like Android, iOS, Swing and QT. They have a thing I like to call DOM elements on steroids, goog.ui.Component, which has lots of great life cycle mechanisms for garbage collection and event listening and more. You have things like goog.ui.Control, which is a subclass of goog.ui.Component, and handles user interaction in a very interesting way. It lets you plug renderers, for example, so you can change a <button> to an <a> without changing any of your other logic except the actual rendering.

Speaking of classes and subclasses, Google Closure Library also has this. You don't have to use the built-in one, the important part is that you somehow call the prototype of the "superclass" in your methods. You can for example use the class system in CoffeeScript, Google Closure Library doesn't care.

The reason the DoubleClick team chose AngularJS was apparently largely because of the data binding features AngularJS provides. There's nothing built-in in Google Closure Library to automatically update the UI when data changes.

So to summarize, Google Closure is a huuuuge beast, and AngularJS can replace the goog.ui part of the Google Closure Library.

I think AngularJS is more like a solid MVC/MVVM framework and Closure Library is a set of loose components, although both AngularJS Templates and Closure Templates have much in common.