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

In ASP.NET MVC we have the concept of bundling and minification of our JavaScript and stylesheet files that help us to reduce the network calls and pages load size for a particular page request.

For more theoretical information about bundling in MVC you can have a look at the following articles:

• Bundling in MVC4
• Advanced Bundling Feature in MVC4

In this article we are just going to concentrate about how do we bundle and minify our AngularJS javascript code. For demonstrating this I’m creating a new MVC 4 application with the name “MvcAngularDemo” and setting the project template to “Basic”.

Now I’ll be installing AngularJS package to my application through NuGet.



Click “Install” and this will add AngularJS files to our script folder.

I am adding a new folder inside the script folder with the name “app” which will hold my page specific script files. Also, adding a new script file to the app folder with the name “Home.js”.

The following is the code snippet for the “Home.js” file.

var myApp = angular.module("myApp", []);

myApp.controller("homeController", function ($scope) {
   $scope.yourName = "";
});

It simply has a $scope injected and a model named “yourName” initially set to nothing associated on the $scope. We’ll try to create a minified version of our Home.js file by using the online JavaScript minifier and we’ll store it inside a new file name Home.min.js.

Home.min.js Code

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

I’m adding a new controller with the “HomeController” and creating a view for the “Index” action method.

HomeController.cs

public class HomeController : Controller
{
   public ActionResult Index()
   {
      return View();
   }

}

Index.cshtml

@{
    ViewBag.Title = "Index";
}

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<!-- script files referenced-->
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/Home.js"></script>
<div ng-app="myApp">
    <div class="container">
        <h2>Index</h2>
        <hr />
        <div ng-controller="homeController">
            <div class="row">
                <div class="col-sm-3">
                    Enter your name:
                </div>
                <div class="col-sm-5">
                    <input type="text" ng-model="yourName" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3">
                    Your Name is:
                </div>
                <div class="col-sm-5">
                    <h4>{{yourName}}</h4>
                </div>
            </div>
        </div>
    </div>
</div>

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:

namespace MvcAngularDemo
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
              //Setting the bundle to use CDN path.
            bundles.UseCdn = true;

            //Referencing the CDN path for the styleBundle (bootStrap).
            bundles.Add(new StyleBundle("~/bundle/css", "http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"));

            //referencing the jQuery script file.
            bundles.Add(new ScriptBundle("~/bundles/jQuery").Include("~/Scripts/jquery-1.8.2.min.js"));

            //referencing the angularJs script file.
            bundles.Add(new ScriptBundle("~/bundles/angularJs").Include("~/Scripts/angular.js"));

            //referencing the our page specific javascript files.
            bundles.Add(new ScriptBundle("~/bundles/appJs").Include("~/Scripts/app/Home.js"));

            //For enabling optimization forcefully.
     BundleTable.EnableOptimizations = true;
        }
    }
}

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.

@Styles.Render("~/bundles/css")
@Scripts.Render("~/bundles/jQuery")
@Scripts.Render("~/bundles/AngularJS")
@Scripts.Render("~/bundles/appJs")

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

var myApp = angular.module("myApp", []);

myApp.controller("homeController", ["$scope", function ($scope) {
   $scope.yourName = "";
}]);

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

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

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.