Do javascript obfuscators work for AngularJS?

Question

There are javascript obfuscators around like http://www.javascriptobfuscator.com/Default.aspx. They work on simple javascript code. But would they work on more complicated front-end AngularJS code which may have several files for controllers, services, modules?

What tools do the experienced programmers on StackOverflow use for obfuscating their AngularJS code? Or you don't at all because it is impossible to obfuscate front-end code?

Answer 1

You can use tools like Uglify or the Closure Compiler to minify and obfuscate AngularJS code, but it can get tricky because of Angular's ability to inject dependencies based on the name of the variable used (which will all be changed when you minify or obfuscate the code).

You'll need to use the array form of defining your modules, controllers, etc. It's explained in the "Notes on Minification" section in step 5 of the Angular tutorial: https://docs.angularjs.org/tutorial/step_05

Basically, if you're currently using the shorthand method of dependency injection, ie:

myApp.controller('myController', function($scope, $http) { ... });

you need to change it to the more verbose array based method:

myApp.controller('myController', ['$scope', '$http', function($scope, $http) { ... }]);

This way you're telling angular what objects to inject into your function using strings, which won't be changed during minification, instead of relying on names of the $scope and $http variables themselves.

There is a command line tool called ngmin that will automatically make these changes for you if you don't want to modify your codebase: https://github.com/btford/ngmin

The 'Conceptual Overview' section of the ngmin readme also has a good explanation of this problem.