Lazy Loading AngularJS Controller Files Using RequireJS

AngularJS has become very popular for web development in today's development world. The main advantage of AngularJS is that we can use two way binding of data with the help of AngularJS for a single page application. The main advantage of the single page application is that when the user switches between different pages, there is no full post at the back of the page. Child page always loads within the content of the main page. But if the project contains so many files, say 100 html files, then there are also 100 js files for AngularJS controller files. And for working it properly we need to take the reference of all js files on the home page. In such a way, home page loading will be slow due to downloading the huge number of JavaScript files.

This problem can be solved by the lazy loading concept. For downloading javascript file using lazy loading, we need to use RequireJS. Actually, RequireJS can dynamically resolve the downloading request of javascript files at the run time. It does not load the files in the beginning. When the user clicks on the link and the page is loading at that timethe javascript file is automatically loaded. Once the file has been downloaded, then it does not load in the next request.

For doing this, we first need to create the AngularJS App as below. For configuring Require js, we need to register the controller method with the angular app config and for working Require js properly, we need to define the route key of the page redirection so that it can dynamically resolve the js file request. For this add a javascript file named testapp.js and write down the following code,

'use strict';
var testApp = angular.module('TestApp', ['ngRoute']);
var $routeData;
testApp.config(["$routeProvider", "$controllerProvider", "$compileProvider", function ($routeProvider, $controllerProvider, $compileProvider) {
$routeData = $routeProvider;
testApp.register =
{
controller: $controllerProvider.register,
directive: $compileProvider.directive
};
}]);
testApp.run(['$route', '$http', '$rootScope',
function ($route, $http, $rootScope) {
$routeData
.when('/home', {
templateUrl: '../../Article/LazyLoadingJs/Home.html'
})
.when('/P1', {
controller: 'PageController1',
templateUrl: '../../Article/LazyLoadingJs/Page1.html',
controllerAs: 'model',
resolve: {
resolver: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
require(['../../Article/LazyLoadingJs/Page1'], function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
})
.when('/P2', {
controller: 'PageController2',
templateUrl: '../../Article/LazyLoadingJs/Page2.html',
controllerAs: 'model',
resolve: {
resolver: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
require(['../../Article/LazyLoadingJs/Page2.js'], function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
})
.when('/P3', {
controller: 'PageController3',
templateUrl: '../../Article/LazyLoadingJs/Page3.html',
controllerAs: 'model',
resolve: {
resolver: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
require(['../../Article/LazyLoadingJs/Page3.js'], function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
})
.when('/', { templateUrl: '../../Article/LazyLoadingJs/Home.html' });
}]);
function resolver($q, $rootScope, dependencies) {
var deferred = $q.defer();
require(dependencies, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}

HomePage.Html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Single Page Application</title>
<link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
<script src="../../Scripts/angular.min.js"></script>
<script src="../../Scripts/angular-route.min.js"></script>
<script src="../../Scripts/require.js"></script>
<script src="testApp.js"></script>
<script src="IndexController.js"></script>
</head>
<body data-ng-app="TestApp" data-ng-controller="IndexController as model">
<div class="row animated fadeInRight">
<div class="col-lg-12">
<div class="rowDiv">
<h3>{{model.message}}</h3>
</div>
</div>
<div class="rowDiv">
<div class="col-lg-3">
<a data-ng-click="model.pageChanage(0);">Home</a>
</div>
<div class="col-lg-3">
<a data-ng-click="model.pageChanage(1);">Page 1</a>
</div>
<div class="col-lg-3">
<a data-ng-click="model.pageChanage(2);">Page 2</a>
</div>
<div class="col-lg-3">
<a data-ng-click="model.pageChanage(3);">Page 3</a>
</div>
</div>
<hr />
<div class="col-lg-12">
<div class="rowDiv">
<div ng-view>
</div>
</div>
</div>
</div>
</body>
</html>

For the Require js files, we can download the file from nuget package.

IndexController.Js

testApp.controller('IndexController', ['$http', '$window', '$location', function ($http, $window, $location) {
var self = this;
self.message = 'Single Page Application';
self.pageChanage = function (key) {
switch (key) {
case 1:
$location.path("/P1");
break;
case 2:
$location.path("/P2");
break;
case 3:
$location.path("/P3");
break;
default:
$location.path("/home");
break;
}
}
}]);

Home.html

<div>
Home Page
</div>

Page1.html

<div>
{{model.message}}
</div>

Page1.js

testApp.register.controller('PageController1', ['$http', function ($http) {
var self = this;
self.message = 'Page 1';
}]);

Page2.html

<div>
{{model.message}}
</div>

Page2.Js

testApp.register.controller('PageController2', ['$http', function ($http) {
var self = this;
self.message = 'Page 2';
}]);

Page3.html

<div>
{{model.message}}
</div>

Page3.js

testApp.register.controller('PageController3', ['$http', function ($http) {
var self = this;
self.message = 'Page 3';
}]);

Now run the project and output will be like the following: