Minification is breaking my AngularJs code

Question

I'm using Cassette which uses the Microsoft Ajax Minifier to minify JS. This minifier renames variables, including variables that have special meaning to Angular, such as `$scope` and `$http`. So Cassette breaks my Angular code! How can I prevent this happening? For reference, this is the Angular code which is being broken. The `$scope` and `$http` function parameters are being renamed: ``` // <reference path="vendor/angular.js" /> angular.module('account-module', []) .controller('ForgottenPasswordController', function ($scope, $http) { $scope.email = { value: '', isValid: false, containerStyle: "unvalidated", validate: function () { var valid = isEmailAdressValid($scope.email.value); $scope.email.isValid = valid; $scope.email.containerStyle = valid ? "valid" : "invalid"; return valid; }, removeErrorMessage: function() { $scope.email.containerStyle = "unvalidated"; } }; $scope.display = { formClass: '', congratulationsClass: 'hide' }; $scope.submit = function (event) { event.preventDe…

Accepted Answer

To prevent code minifiers from destroying your angular application, you have to use the array syntax to define controllers.

Look at http://odetocode.com/blogs/scott/archive/2013/03/13/angularjs-controllers-dependencies-and-minification.aspx

(From OP): For reference, here is the changed code:

```
angular.module('account-module', [])
    .controller('ForgottenPasswordController', ["$scope", "$http", function ($scope, $http) {
...
}]);
```

Minification is breaking my AngularJs code

Solution

Problem