There are javascript obfuscators around like .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?

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?

• javascript
• angularjs
• obfuscation

• Just minify your code to make download times for the client shorter. There's no benefit at all from obfuscation and minification obfuscates code enough to make it very difficult to work with. – Blender Commented May 3, 2014 at 1:38
• @Oriol: because boss wants to protect the code from competition. – guagay_wk Commented May 3, 2014 at 1:39
• @Blender: But is it possible in the first place? – guagay_wk Commented May 3, 2014 at 1:40
• 2 if the competition's code was easier to read than trash, i would go with them. – dandavis Commented May 3, 2014 at 2:14
• @user3293156: AngularJS is JavaScript, so I don't see any reason for why they wouldn't. – Blender Commented May 3, 2014 at 2:36

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