Angular Control not working after minified JS file?

Question

I am new to AngularJS. I have created a new application in VS2012 using AngularJS. I have applied minification to my JavaScript file, but after minification the binding is not working for me because the $scope keyword that Angular understands is converted to "a".

Please let me know how to apply minification to an AngularJS file ?

Answer 1

From http://docs.angularjs.org/tutorial/step_05:

Since angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

To overcome issues caused by minification, just assign an array with service identifier strings into the $inject property of the controller function, just like the last line in the snippet (commented out) suggests:

PhoneListCtrl.$inject = ['$scope', '$http'];

There is also one more way to specify this dependency list and avoid minification issues — using the bracket notation which wraps the function to be injected into an array of strings (representing the dependency names) followed by the function to be injected:

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

Both of these methods work with any function that can be injected by Angular, so it's up to your project's style guide to decide which one you use.