Does RequireJS loads previously loaded files (.Js or .html) from cache? - angularjs

Question

I am using requireJs in my app. I face a scenario and I want to clear it out.
I'm loading the particular template (views) and their dependent js files based on location url or routes. See Following code example.
routes: {
'/': {
templateUrl: 'views/login.html',
dependencies: [
'scripts/controllers/login.js',
]
},
'/abc-view': {
templateUrl: 'views/abc.html',
requireLogin: true,
dependencies: [
'scripts/controllers/abc.js',
'scripts/controllers/xyz.js',
]
},
'/xyz-view': {
templateUrl: 'views/xyz.html',
requireLogin: true,
dependencies: [
'scripts/controllers/xyz',
}
}
When I change to xyz view then xyz.js file will be loaded. My question is when I change to abc view does the xyz.js will be loaded if yes then will it be loaded from cache ?
I have seen in newtwork tab it loads the same file i.e xyz.js again, not from cache same with the html templates that are already included in one template with ng-inlcude it does not loads from cache.
Any help will be appreciated. Thanks.
flow of my application is as following:
index.html have
<script type="text/javascript" src="libs/requirejs/require.js" data-main="config.js"></script>
In Config.js I'm manually bootstrapping the app.
requirejs.config({
"paths":{
"angular": "libs/angular/angular.min",
"angular-route":"libs/angular-route/angular-route",
"angular-sanitize":"libs/angular-sanitize/angular-sanitize",
"jquery-ui":"libs/jquery-ui/jquery-ui.min",
"ngAnimate":"libs/angular-animate/angular-animate.min",
"angularSrapCore":"libs/angular-strap/dist/angular-strap.min",
"angularStrap":"libs/angular-strap/dist/angular-strap.tpl.min"
},
"shim": {
"angular": {
"exports": "angular"
},
"drutasApp": {
deps: ["angular", "angular-route","angular-sanitize","jquery-ui","ngAnimate"]
},
"angular-route": {
deps: ["angular"]
}
}
});
require(['angular','app'
], function (angular) {
angular.element(document).ready(function () {console.log("app bootstraped");
angular.bootstrap(document, ['app']);
});
});
app.js is in same directory with the config.js, code is following...
define(['scripts/routes.js','scripts/services/dependencyResolverFor.js'], function(config, dependencyResolverFor)
{
var app = angular.module('app', ['ngRoute','ngAnimate','ngSanitize']);
app.config(
[
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
function($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide)
{
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
$locationProvider.html5Mode(false);
if(config.routes !== undefined)
{
angular.forEach(config.routes, function(route, path)
{
$routeProvider.when(path, {
templateUrl:route.templateUrl,
resolve:dependencyResolverFor(route.dependencies)
});
});
}
if(config.defaultRoutePaths !== undefined)
{
$routeProvider.otherwise({redirectTo:config.defaultRoutePaths});
}
}
]);
return app;
});
`routes.js` is as following...
define([], function()
{
return {
defaultRoutePath: '/',
routes: {
'/': {
templateUrl: 'views/home.html',
dependencies: [
'scripts/controllers/home'
]
},
'/abc-view': {
templateUrl: 'views/abc.html',
dependencies: [
'scripts/controllers/abc',
'scripts/controllers/xyz'
]
},
'/xyz-view': {
templateUrl: 'views/xyz.html',
dependencies: [
'scripts/controllers/xyz'
]
}
}
};
});
dependencyResolver.js
define([], function()
{
return function(dependencies)
{
var definition =
{
resolver: ['$q','$rootScope', function($q, $rootScope)
{
var deferred = $q.defer();
require(dependencies, function()
{
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}]
}
return definition;
}
});

Answer 1

My question is when I change to abc view does the xyz.js will be loaded
No, requireJS will judge on the final URL of the script tag going to be fetched. If it is already loaded before, requireJS won't do anything.
if yes then will it be loaded from cache ?
Not likely cache got to be used, but requireJS simply detect if the same file with same URL got loaded before or not. If it is loaded before, requireJS will just execute your js without loading anything.
I have seen in newtwork tab it loads the same file i.e xyz.js again, not from cache same with the html templates that are already included in one template with ng-inlcude it does not loads from cache.
As looking into your code, requireJS got to use to fetching the dependencies. And this behavior cannot happen, unless requirejs.undef() got called somewhere. Or that is an old version of requireJS where module's URL was not tracking and <script> got to be loaded regardless the conditions.
NOTE I am not sure about the behavior of older version than 2.1.x of requireJS.