Introduction
Many times, we face the issue while using ASP.NET bundling and minification with angular JS application. Here, I am providing a sample so that you will get an idea of how to avoid errors while minification of angularjs application.
While minification of angularJs application, we need to concentrate on dependencies injection.
Using the Code
I am using ASP.NET MVC 4 + AngularJs + Typescript to create this sample.
Step 1: Create MVC 4 web application.
Step 2: Install typescript on your local machine. Download from here "http://visualstudiogallery.msdn.microsoft.com/fa041d2d-5d77-494b-b0ba-8b4550792b4d" or get installed from VS using "npm install -g typescript"
Step 3: Create "controller/sampleController.ts" / "Directive/taskList.ts" / "filter/transformToHtml.ts " files as shown below:
- Scripts
- angular (scripts)
- angular.js
- angular-sanitize.js
- definition (definition files)
- angular.d.ts
- jquery.d.ts
- sample
- controller
- sampleController.ts
- sampleModel.ts
- sampleScope.ts
- directives
- taskList.ts
- filter
- transformToHtml.ts
- main.ts
- _references.d.ts (should be at the root of application)
- Code for "sample/sampleModel.d.ts":
/// <reference path="../../../_references.d.ts">
module Sample {
'use strict';
export class sampleViewModel {
constructor() {
}
task: string;
tasks: string[];
}
}
- Code for "sample/sampleScope.ts":
/// <reference path="../../../_references.d.ts">
module Sample {
'use strict';
export interface sampleScope extends ng.IScope {
model: sampleViewModel;
addTask: () => void;
}
}
- Code for "sample/sampleController.ts":
/// <reference path="../../../_references.d.ts">
module Sample {
'use strict';
export class sampleController {
static toString = "sampleController";
static $inject = ["$scope", "$rootScope", "$sce"];
private sampleViewModel = new sampleViewModel();
constructor(
private $scope: sampleScope,
private $rootScope: ng.IScope,
private $sce
) {
$scope.model = this.sampleViewModel;
$scope.model.tasks = ["<b>Sample Task 1</b>", "<b><i>Sample Task 2</i></b>"];
$scope.addTask = () => this.addTask();
}
private addTask() {
this.$scope.model.tasks.push(this.$scope.model.task);
this.$scope.model.task = "";
}
}
}
- Code for "directives/taskList.ts":
/// <reference path="../../../_references.d.ts">
module directives {
'use strict';
export class taskList {
static toString = "taskList";
static $inject = ['$parse', taskList.directiveFactory];
static directiveFactory(someParser: ng.IParseService): ng.IDirective {
return {
//Static factory method that returns an ng.IDirective object
restrict: 'A',
replace: false,
transclude: false,
scope: {
tasks: "="
},
template: '<div><div>Task Added to List</div><div class="grid">
<div ng-repeat="task in tasks track by $index">
<span ng-bind-html="task | transformToHtml"></span>
</div></div><div>',
controller: ["$scope", "$attrs", ($scope, $attrs) => { }] } } } }
- Code for "filter/transformToHtml.ts":
/// <reference path="../../../_references.d.ts">
module filter {
'use strict';
export class transformToHtml {
static toString = "transformToHtml";
static $inject = ["$sce", transformToHtml.filterFactory];
static filterFactory($sce) {
return (task) => {
if (!task) { return ''; }
else {
return $sce.trustAsHtml(task);
}
};
}
}
}
- Code for "Scripts/main.ts":
/// <reference path="../_references.d.ts" />
module main { 'use strict'; var appModule = angular.module("app", ["ngSanitize"])
.filter(filter.transformToHtml.toString, filter.transformToHtml.$inject)
.controller(Sample.sampleController.toString, Sample.sampleController)
.directive(directives.taskList.toString, directives.taskList.$inject)
}
- Add all the above references should be included in "_references.d.ts ":
/// <reference path="Scripts/definitions/angular.d.ts" />
/// <reference path="Scripts/Sample/filter/transformToHtml.ts" />
/// <reference path="Scripts/Sample/controller/sampleController.ts" />
/// <reference path="Scripts/Sample/controller/sampleScope.ts" />
/// <reference path="Scripts/Sample/controller/sampleModel.ts" />
/// <reference path="Scripts/Sample/directives/taskList.ts" />
- Now compile main.ts using "tsc.exe" and generate final .js file inside as "\Scripts\minificationSample.js " from the command prompt:
tsc.exe "<Application Path>\MinificationSample\Scripts\main.ts"
--out "<Application Path>\MinificationSample\Scripts\minificationSample.js"
- Now open "BundleConfig.cs" file and add JS files into it and set "BundleTable.EnableOptimizations" option as "true":
bundles.Add(new ScriptBundle("~/Scripts/minified").Include(
"~/Scripts/angular/angular.js",
"~/Scripts/angular/angular-sanitize.js",
"~/Scripts/minificationSample.js"
));
BundleTable.EnableOptimizations = true;
- Create "sample.cshtml" add the following HTML in it and create
Action method for the same:
@{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Minification Sample</title>
@Scripts.Render("~/Scripts/minified")
<style>
div {
padding: 10px;
}
.grid {
width: 500px;
}
.grid {
background-color: Green;
}
.grid div:nth-child(even) {
background-color: #E0E0E0;
}
.grid div:nth-child(odd) {
background-color: #cccccc;
}
</style>
</head>
<body ng-controller="sampleController">
<div>
<h1>Task List</h1>
</div>
<div>
<div>
<div style="vertical-align:central;width:8%;float:left">
Task:<br />
(* You can add HTML tags)
</div>
<div style="width:15%;float:left">
<textarea type="text" ng-model="model.task" ></textarea>
</div>
</div>
<div>
<input type="button" ng-click="addTask()" value="Add Task" />
</div>
</div>
<div>
<div task-list tasks="model.tasks"></div>
</div>
</body>
</html>
Now run your application and check your bundling and minifications. I have also attached a sample with this article.
If you need any help, just let me know.
