15

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:

thomre
  • 161
  • 2
  • 7
  • New users can't post more than two links, so here is one more as a comment: http://groups.google.com/group/closure-library-discuss/browse_thread/thread/5dd2342937fd16e7 – thomre Jun 14 '12 at 11:28
  • 1
    I like these type of questions and in a way it is very useful, but surprised to see why there is no attempt of close voting this on the grounds of non constructive, opinion, etc. Unpredictable. – Saran Jan 30 '14 at 06:21

2 Answers2

14

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).

Vojta
  • 23,061
  • 5
  • 49
  • 46
  • 1
    do you mean "simple optimization" or just "whitespace only" optimization? I've tried to do simple via the closure compiler web app, and when it replaces `MyController($scope)` with `MyController(a)` (along with all other references to `$scope` in the controller), my code breaks. – Marc Jan 31 '13 at 19:55
  • 1
    With "simple optimization" I meant "simple optimization" :-D You need to use explicit annotations for DI to work with compiled code. Eg. MyController.$inject = ['$scope']; – Vojta Mar 18 '13 at 04:17
  • 3
    There is already a Closure compiler pass, that can do these annotations automatically for you, hopefully it will get open-sourced soon... – Vojta Mar 18 '13 at 04:19
4

Hope this help

Change code

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

To

var MyCtrl = ['$scope', function($scope) {/* code */}]
nguyên
  • 5,156
  • 5
  • 43
  • 45