Bundling And Minifying AngularJS JavaScript Code Within ASP.NET MVC 4

We here tried to do two way binding using the AngularJS in-built directive “ng-model”. And just trying to display the same value in the following “div”. Just try to run the application and everything would perfectly be working. The following is the output:



Now let’s try to bundle our application and also set the EnableOptimization to force bundling in MVC 4 to pick up the minified css and script files.

Let’s replace the code block from “BundleConfig.cs” with the following code snippet:
Note: We’ve enabled our EnableOptimization property to true. So at runtime it will fetch all the minified files for our JavaScript file as well as for our css files.

So now our bundling for the application is done, now let’s try to make use of it inside our Index.cshtml file. I am removing the script and style reference added earlier with the following lines of code.
Now run the application and press F12 and the following is the snapshot for the same.



From the network tab we can say that our minified Home.js file downloaded from the server inside our BundleConfig.cs file, since we’ve enabled EnableOptimization to true.

Downloaded Home.min.js file code snippet is:

var myApp=angular.module("myApp",[]);myApp.controller("homeController",function(n){n.yourName=""});

Now let’s go to Console tab and there we’ve the following error.



We’ve an injector error that’s because our AngularJS doesn’t know what this n is? It was expecting a $scope object and so it gives us the injector error.

Now let’s try to update our Home.js file code snippet so that after minification it does not result in an error like the above case. Here is the updated snapshot for the Home.js file.

Home.js
Note:

1. Here I encapsulated our function ($scope) inside a JavaScript array. And for the first element of the array I’m expecting the AngularJS $scope defined in double quotes.
   
   
2. Arrays in JavaScript can accept anything: String, integer, objects or even functions.

Now let’s try to minify our Home.js file again. Here is the updated code for the Home.min.js file.

Home.min.js code

Note:

1. As you can see that the javascript minifier just minified those variables names or values which are not enclosed in double quotes.
   
   
2. And the variables names or values inside double quotes will be the same. For example, “homeController” or “$scope” values are not minified. This is because JavaScript minifier will not touch those values which are in double quotes.
   
   
3. Declaring the controller function in this way will help AngularJS to inject the $scope object in the first parameter of our function (o).

Now let’s try to run the application and we’ll see the following output without any error.