Mvc4 bundling, minification and AngularJS services Mvc4 bundling, minification and AngularJS services angularjs angularjs

Mvc4 bundling, minification and AngularJS services


Actually you can (and should!) write AngularJS code so it is "minification safe". Details are described in the "Dependency Annotation" section of http://docs.angularjs.org/guide/di but in short, for globally defined controllers you can write:

MyController.$inject = ['$scope'];

Please note that globally defined controllers are polluting global namespace (see this for more details) and should be avoided. If you declare a controller on a module level you can make it minification-safe as well:

angular.module('mymodule', []).controller('MyController', ['$scope', function($scope){//controller code goes here}]);


if you still want to control what to minify and what not (or if you want to include an already minified version by the plugin vendor) just declare two bundles, and only minify one of them on your BundleConfig.cs:

var dontMinify = new Bundle("~/bundles/toNotMinify").Include(                        "~/Scripts/xxxxx.js");bundles.Add(dontMinify);var minify = new Bundle("~/bundles/toNotMinify").Include(                        "~/Scripts/yyyyyy.js");minify.Transforms.Add(new JsMinify());bundles.Add(minify);


For those of you who don't want/can't be arsed to write the "minification-safe" angular-DI syntax, and don't care about variable names being obfuscated, I used BundleTransfomer along with Yui Js minifier - available via nuget:

 Install-Package BundleTransformer.Core Install-Package BundleTransformer.Yui

Gives VERY fine-grained control over minification/obfuscation. In the angular world, just set the obfuscateJavascript within the yui web.config section to false.