html5, angularJS with closure compiler and/or closure library

All we need is an easy explanation of the problem, so here it is.

I’m considering html5, angularJS for data binding and also google closure compiler and the closure library for interactive web applications. Do those work nicely together? Unfortunately there seem to be no detailed reports up to now.

I have adobe flex experience, but I’m fairly new to pure js. So the questions can be considered to be from a beginner’s perspective. There is no codebase that needs to be ported, everything will be developed from scratch.

  1. Is anyone else using this combination successfully?
  2. Are there any firsthand reports?
  3. Do you recommend the individual technologies in this context, or are there better alternatives to combine?
  4. Are there any good examples, example projects or even tutorials (for the combination – not the individual technologies)?
  5. Any pitfalls a beginner should be aware of?
  6. Are there any other orthoganal technolgies that I should also use or at least consider?

Some more or less relevant links I already found:

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Closure Compiler

You can definitely compile your code (Angular itself is compiled with Closure compiler), although you can only use simple optimizations at this point.

In general we want Angular to play well together with the compiler.

Closure library

There is a bunch of project inside Google, using the library together with Angular.

They use goog.provide() and goog.require() for dependencies. Also using the utilities like goog.isString() or goog.inherits() is absolutely straightforward.

Using closure UI components might require some extra work (although, again, there are projects using it).

Method 2

Hope this help

Change code

function MyCtrl($scope) {/* code */}


var MyCtrl = ['$scope', function($scope) {/* code */}]

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply